リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。

いくつかのリンクを見てみましょう

前提知識:	基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。
学習目標:	リンク状態を装飾する方法と、ナビゲーションメニューのような一般的な UI 機能でリンクを効果的に使用する方法を学ぶこと。

ハイパーリンクの作成のベストプラクティスに従って、HTML がリンクをどのように実装するかを調べました。この記事では、この知識を基にして、リンクの装飾のためのベストプラクティスを示します。

リンク状態

最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは異なる疑似クラスを使って装飾することができます。

デフォルトの装飾

次の例は、リンクがデフォルトでどのようにふるまうかを示しています（CSS は、テキストをより見やすくするために、単にテキストを拡大して中央に配置しています）。

注: このページの例にあるリンクはすべて偽のリンクです — #（ハッシュまたはポンド記号）が実際の URL の代わりに配置されています。これは、実際のリンクが含まれている場合、それらをクリックすると例が壊れる可能性があるためです（エラーが発生したり、ロードしたページから埋め込まれた例に戻ることができません）。 # は現在のページにリンクしているだけです。

デフォルトの装飾を調べていくうちに、次のようないくつかのことに気付くでしょう。

興味深いことに、これらのデフォルトの装飾は、1990年代半ばのブラウザーの初期の頃のものとほぼ同じです。これは、ユーザーがこのふるまいを知っており、予期するようになったためです — リンクの装飾が異なると、多くの人が混乱してしまうでしょう。これは、リンクの装飾を設定してはいけないという意味ではなく、予想されるふるまいから大きく外れてはいけないということです。少なくとも次のことをするべきです。

デフォルトの装飾は、次の CSS プロパティを使用してオフにしたり変更したりできます。

いくつかのリンクを装飾する

デフォルトの状態を少し詳しく見てきたので、典型的なリンクの装飾のセットを見てみましょう。

リンクのスタイルは互いに重なっているため、この順序は重要です。例えば、最初の規則の装飾は、それ以降のすべての規則に適用され、リンクがアクティブになっているときは、ホバーもしています。これらを間違った順序で並べると、物事は適切に機能しません。順番を覚えておくには、LoVe Fears HAte のようなニーモニックを使用してみてください。

それでは、これを適切に装飾するための情報を追加しましょう。

それでは、ここで何をしたでしょうか？これは確かにデフォルトの装飾とは異なるように見えますが、それでもユーザーに何が起こっているのかを知るための十分な身近な経験を提供します。

能動的学習: あなた自身のリンクを装飾する

この能動的学習セッションでは、空の規則のセットにあなた自身の宣言を追加してリンクを本当にかっこよく見せてください。想像力を駆使して、ワイルドに。上記の例と同じように、よりかっこよく機能的なものを思いつくことができると確信しています。

間違えた場合は、Reset ボタンを使用していつでもリセットできます。本当に立ち往生してしまったら、上に示した例を挿入するために Show solution ボタンを押してください。

Playable code

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>There are several browsers available, such as <a href="#">Mozilla
 Firefox</a>, <a href="#">Google Chrome</a>, and
<a href="#">Microsoft Edge</a>.</p></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

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

一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、icons8.com からの素晴らしい例を使います。

欲しい効果が得られる HTML と CSS を見てみましょう。まず、装飾する簡単な HTML です。

それでは、ここで何が起こっているのでしょうか？これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。しかし最後の規則は興味深いです — ここでは前回の記事のリストアイテムのカスタム行頭記号を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに {{cssxref("background")}} の一括指定を使用します。挿入したい画像へのパスを設定し、no-repeat を指定してコピーを1つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。

また、{{cssxref("background-size")}} を使用して、背景画像を表示するサイズを指定します。レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。

最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。

最後の一言 — どのように外部リンクだけを選択したのでしょうか？あなたがHTML リンクを適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。したがって、テキスト "http" は（2番目と3番目のリンクのように）外部リンクにのみ現れ、これを属性セレクタで選択できます。 a[href*="http"] は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ {{htmlattrxref("href","a")}} 属性がある場合に限ります。

それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！

ボタンとしてのリンクの装飾

この記事でこれまでに説明したツールは、他の方法でも使用できます。例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。

さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。その方法を探りましょう。

最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。

注: HTML 内のリスト項目がすべて一行に記述されていることに気付いたかもしれません。インラインブロック要素間のスペースや改行は、単語間のスペースと同様にページにスペースを作成します。そして、そのようなスペースは水平ナビゲーションメニューのレイアウトを壊すでしょう。だからスペースを取り除きました。この問題（と、その解決方法）についての詳細は、インラインブロック要素間のスペースの戦い（英語）で見つけることができます。

あなたのスキルをテストしてみてください!

あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？この情報を保持しているかどうかを確認するためのアセスメントがモジュールの最後にあります。コミュニティスクールのホームページの組版を参照してください。

この評価ではこのモジュールで説明されているすべての知識をテストしますので、次に進む前に次の記事を読んだほうがいいかもしれません。

まとめ

この記事が、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています — 今のところは！テキストの装飾モジュールの最後の記事では、ウェブサイトでのカスタムフォントの使用方法や、ウェブフォントの使用方法について詳しく説明しています。

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}