CSS を使用してリンクのスタイルを設定する方法: 詳細な初心者向けチュートリアル

公開: 2022-09-02

このチュートリアルでは、CSS を使用して Web リンクのスタイルを設定する方法について説明します。 リンクは、あらゆる Web サイトの中心的な部分です。 訪問者を他の部分に移動させたり、ソースを参照してあなたの主張に下線を引いたり、読者がより関連性の高いブログ投稿を見つけやすくしたりすることができます。

デザインを変更する方法を学ぶことで、リンクとして認識され、Web サイトの残りの部分に適合するようになります。 CSS には、そのためのさまざまな方法とプロパティが用意されているので、1 つずつ見ていきましょう。

リンクの標準とデフォルトのリンク スタイル

リンクのデザインを変更する方法に入る前に、まずリンクの構造を理解しましょう。 リンク要素は HTML では次のようになります。

 <a href="https://torquemag.io/">TorqueMag</a>

ご覧のとおり、いくつかの部分で構成されています。

  • <a> – リンク要素を作成するための演算子です。 なぜa ？ HTML では、リンクはアンカー タグとも呼ばれます。
  • href="" – 二重引用符内は、このリンクが指す場所です。 それをクリックした人が到達するアドレスです。
  • TorqueMag – ページに表示されるリンク テキストです。たとえば、このように表示されます (クリックしないでください。このリンクはどこにもつながりません)。
  • </a> – リンク要素を閉じ、リンク テキストがここで終了することをブラウザに伝える部分。

ここまでは、とても簡単です。

デフォルトでリンクがどのように見えるか

興味深いのは、このタイプのリンクがページ上でどのように見えるかを見るときです。 あなたはおそらくそれを以前に見たことがあるでしょう。

リンクのデフォルト スタイルの例

HTML ドキュメントで古いリンクを宣言し、スタイリング情報を提供しない場合、デフォルトのスタイリングが適用されます。

  1. リンク テキストは青色で、リンク自体には下線が引かれています。
  2. マウスを合わせると、カーソルが小さな手のアイコンに変わります。
  3. クリックすると一瞬赤くなります。
  4. リンクにアクセスすると、その色が紫色に変わります。
  5. キーボードのタブレータ キーを使用してリンクに移動すると、その周りに青いアウトラインが表示されます。

これらの標準は、インターネットの黎明期に確立され、90 年代からあまり変わっていません。 面白いことに、これについて意識的に考えたことがない場合でも、Web サーフィンをしているだけで上記のほとんどのことをある程度認識していた可能性があります。

リンク状態について学ぶ

上記から明らかなように、リンクにはさまざまな状態があり、それらがどのように見えるかに影響を与えます。 個々のスタイリングに影響を与えることを可能にするさまざまな CSS 疑似クラスでこれらをターゲットにすることができます。 これらは：

  • a – これは前述のアンカー タグです。 すべてのステージのすべてのリンクを対象としています。
  • a:link – 通常の未訪問のリンク用。 技術的には、 :linkは、 href属性を持つすべてのアンカー タグをターゲットにします。 実際には、あまり使われていません。 href属性のないアンカー タグはかなりまれであるため、多くの人は単純に を使用aます。そのため、このタイプの差別化は必要ないことがよくあります。
  • a:visited – 現在のユーザーが以前にアクセスしたリンク、つまりブラウザの履歴に存在するリンクを表します。
  • a:hover – ユーザーがマウス カーソルをリンクの上に置いたときに表示されるスタイルをターゲットにします。
  • a:active – リンクがクリックされた瞬間に一時的に表示されるスタイル。
  • a:focus – ユーザーがタブキーを使用してナビゲートしたなど、フォーカスされたリンク。 多くの場合、 hoverとfocusは一緒にスタイル設定されます。

注意すべき重要なことは、複数のリンク状態のスタイルを一度に変更する場合は、次の順序で行う必要があるということです。

  1. a
  2. a:link
  3. a:visited
  4. a:focus
  5. a:hover
  6. a:active

リンク状態のスタイリングは、互いに構築され、カスケード ダウンします。 したがって、それらが意図したとおりに機能することを確認するには、順序が重要です。

ユーザーの期待に応える

CSS を介してリンク スタイルを変更する方法を説明する前に、最後にユーザーの期待について説明します。 デフォルトのリンクがリンクとして簡単に認識される可能性が最も高い理由は、特定のデフォルトが非常に長い間ユーザーとして私たちに根付いているためです。

その結果、私たち、そして他のすべての人は、リンクがどのように見えるかについて非常に明確な期待を持っています. 満たされない場合、人々がそれらが何であるかのリンクを認識しにくくする可能性がある期待。 そのため、Web サイトのデザインに取り組むときは、これらの期待に近づき続けることをお勧めします。

実際には、次のことを意味します。

  • リンクが何らかの方法で強調表示されていることを確認してください。 ページ上でリンクを目立たせる限り、色や下線は問題ありません。 斜体や太字などは避けてください。
  • ホバーするとリンクが変化し、程度は低いがクリックするとリンクが変化することで、フィードバックを提供します ( a:active 、覚えていますか?)。 また、インタラクティブな要素であることを示すために、カーソルが手の形に変わってしまうことも避けてください。

以下では、上記のすべてを変更する方法を説明します。 ただし、ユーザーを苛立たせないように、適度に行う必要があることに注意してください。

CSS を使用してリンク テキストのスタイルを変更する方法

最初に、リンクのテキスト部分を変更する方法について説明しましょう。それがリンクの本質を構成しているためです。

リンク テキストの色の変更

このセクションで扱う内容は、CSS を介して色を宣言する方法に関する記事と比較的似ています。 したがって、詳細を知りたい場合は、その投稿もご覧になることをお勧めします。

リンク テキストの色は、いくつかの異なる方法で変更できます。カラー ワードや、HEX コード、 rgb() / rgba() 、 hsl() / hsla()などのさまざまな色表記システムです。

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

上記のページは次のようになります。

CSS の例でリンクの色を変更する

最も一般的には、HEX やrgb()などを使用します。 単純なテスト ケース以外では、色名を使用することは非常にまれです。

どのカラー システムを使用するかは、ブラウザーの互換性や透過性が必要かどうかなど、さまざまな要因によって異なります。 ただし、ご覧のとおり、 colorプロパティを使用してリンクに色を割り当てるのは非常に簡単で、他のすべてのリンク状態でも同じように機能します。 したがって、 :hoverまたは:focusのテキストの色も簡単に変更できます。

背景色の調整

テキストの色を変更するだけでなく、リンクの背景色やさまざまな状態を変更することもできます。 これは、 background-colorプロパティを使用するのと同じくらい簡単です。

CSSの例によるスタイルリンクの背景色

上記の例のマークアップは次のとおりです。

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

その他のテキスト スタイル オプション

リンクはテキストに過ぎないため、CSS でテキストをスタイリングする他のすべての方法もリンクに適用されます。 つまり、他のプロパティをリンクとそのさまざまな状態に割り当て、ユーザーがそれらの上にマウスを置いたときに、フォント サイズ、フォント ファミリ、またはその他のものを変更することができます。

代替リンクの CSS スタイリング

これは特定のデザインでは意味がありますが、CSS を介してリンクをスタイリングする方法としてはあまり一般的ではありません。

上記の効果を達成するためのマークアップは次のとおりです。

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

下線の操作

最初に学んだように、リンクにはデフォルトで下線が引かれています。 それを取り除きたい場合は、 text-decoration: none;を使用できます。 (これはtext-decorationプロパティの最も一般的な用途です)。

 a { text-decoration: none; }

また、通常のリンクではなく、ホバー時にのみ下線を追加することを好む人もいます。 これも簡単です。

 a { text-decoration: none; } a:hover { text-decoration: underline; }

さらに、 border: bottom;を使用できます。 text-decoration: underline; リンクの下に行を追加します。 より良いスタイリングオプションを提供するため、人々はこれを採用していました。 ただし、最近では、より多くのカスタマイズを可能にする標準のunderline方法の新しいプロパティがあります。

たとえば、 text-underline-offsetを使用すると、 text-decorationを使用するときに、テキストとその下の線の間の距離を制御できます。 text-decoration-thicknessを使用すると、カスタムの線幅を設定できます。 そのため、 borderルートに行く必要はなくなりました。

それとは別に、アニメーションを含め、リンクの下の線を操作する方法は本当にたくさんあります。 おそらくそれについては別の記事を書くことができます。

ホバー時のカーソル スタイルの変更

すでに説明したように、リンクにカーソルを合わせると、マウス カーソルが小さな矢印から指している小さな手に変わります。

ホバー10でカーソルがポインターに変わる

これは、クリック可能な HTML 要素を扱っていることの普遍的な兆候です。 ただし、サイズ変更矢印の上の十字線から読み込みインジケーターまで、カーソルを他のものにも変更できることに気付いていないかもしれません。

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

興味がある場合は、ローカルの開発環境で上記を試して、その効果を確認してください。 さらに多くのオプションがあり、ここで見つけることができます。

ただし、ポインターは非常に普遍的であるため、これは間違いなくユーザーが期待するものであり、通常はそのまま使用する必要があります。 何らかの理由でリンクが機能しない場合は、次のコードで修正できます。

 a { cursor: pointer; }

Web サイトで独自のカーソルを使用する場合は、カスタム イメージを使用することもできます。 たとえば、ドイツの音楽商品のオンライン ショップでは、独自のテーマ ポインター カーソルを使用しています。

カスタム ホバー カーソルの例

ブラウザ開発者ツールを介してどのようにそれを行うかを調べると、次のコードが見つかります。

 a { cursor: url(../images/hand.cur),pointer; }

ご覧のとおり、画像ファイルにアドレスを指定するだけでカスタム カーソルを使用できます。

a:focus に変更を加える

focusのためのスタイリングはアクセシビリティの重要な助けとなるため、それを維持するようにしてください。 デフォルトでは、ハイライトはoutlineプロパティを介して発生し、その周りにボックスが表示されます。

リンクのデフォルトのアウトラインの例

なぜあなたが尋ねるborderではなくoutlineを描くのですか？

outlineはページのスペースを占有しないためです。 代わりに、要素の背景の上に配置されます。 そうすれば、リンクをフォーカスしても、ページ レイアウトのジャンプなどは変更されません。

では、フォーカスされたリンクには他にどのようなスタイル オプションがありますか?

彼らの多くは。 background-colorからcolor 、 font-size 、 box-shadowまで、名前を付けます。

CSS の例によるスタイル フォーカス リンク

上記を達成する方法は次のとおりです。

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

a:focusを使用すると、基本的に何でもできます。 ただし、最も興味深いアプリケーションの 1 つは、 outlineプロパティを使用してブラウザーの既定値を簡単にカスタマイズできることです。

 a:focus { outline: 3px dotted green; }

上記のページは次のようになります。

CSSの例によるスタイルフォーカスリンクのアウトライン

リンクボタンとボックス

もちろん、リンクは単なるテキスト リンクではありません。 一部の場所では、ナビゲーション メニューなどのボックスとして、フォームの一部として、または行動を促すフレーズとして表示されることがよくあります。

ボタンの例としてリンク

これを達成するのはそれほど難しくありません。 基本的に、リンク テキストの周りにスペースを追加し、背景または境界線/アウトラインを提供して、ボタンまたはボックスとして表示する方法を見つける必要があります。 それ以外は、以前使用していたリンク要素と同じです。

これを実現するには、フレックスボックスやグリッドなどのシステムに単にパディングを追加する方法から、いくつかの方法があります。 以下はその方法の一例にすぎません。他にも多くのオプションがあります。

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

この場合、CSS には、リンクのスタイルとそれが存在するコンテナーの両方が含まれています。もちろん、以前と同じリンク状態を使用して、さまざまなシナリオにさまざまな動作を含めることができます。

リンクにアイコンを含める

説明に値する簡単なことは、リンクにアイコンを含めることもできるということです. これは、現在のページからユーザーを遠ざけるアウトリンクであることをより明確にするために、一部の人々が行っていることです。

CSSの例を介して外部リンクにアイコンを追加する
アイコンソース: Icons8

その方法は次のとおりです。 最初の HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

次に、CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"]は、 href=""にhttpで始まるアドレスを持つアンカー タグのみをターゲットにします。 それらに、マークアップはアイコンである背景画像を追加し、繰り返しなしに設定し、右端まで移動し、垂直方向の中央に配置します。 マークアップの残りの部分は、アイコンのサイズを定義し、アイコンとテキストの間にわずかなスペースを作成します。

最終的な考え: リンクの CSS スタイリング

CSS を使用してリンクのスタイルを変更することは、基本を理解していればそれほど難しくありません。 最も重要な部分は、さまざまな演算子と疑似クラスの対象となるさまざまな状態を取ることを理解することです。 その後は、共通の CSS プロパティを使用して、デザインを好きなように変更するだけです。 これで、開始するために必要なすべての情報が揃いました。

CSS を介してリンクのスタイルを設定するお気に入りの方法は何ですか? 他に共有するヒントはありますか？ コメントでそうしてください！