ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

実は重要!スタイルシートの記述順!(3ページ目)

「a:hoverを使っても色が変わらない」というトラブルの原因は、多くの場合、スタイルシートの記述順に原因があります。ここでは、正しいCSSの記述順を初心者にもわかりやすく解説します。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

後に記述されたものが優先されるということは…

先ほどから何度も言っていますが、同じスタイルが記述された場合は、後に記述された方が優先して採用されます。
これはつまり、上から順番に適用されると考えると分かりやすいでしょう。

前のページの冒頭でご紹介した、次のスタイルシートで考えてみましょう。

p { color: red; }
p { color: blue; }

上から順番に適用していくことを考えてみると、次のような順番で解釈されることになります。

[ 1 ] p要素の文字色を赤色にする
[ 2 ] p要素の文字色を青色にする
→ 結果、p要素の文字色は青色になる。

このように、記述されたスタイルを上から順番に適用していけば、「同じスタイルが記述された場合は、後に記述された方が優先して採用される」となるわけです。

リンクの状況に応じたスタイルの場合は

それでは、上記のことを踏まえて、本題の「リンクの状況に応じたスタイル」の問題を考えてみましょう。

■スタイルシートA:
a:link { color: red; }
a:visited { color: purple; }
a:hover { color: green; }
a:active { color: yellow; }
■スタイルシートB:
a:active { color: yellow; }
a:hover { color: green; }
a:link { color: red; }
a:visited { color: purple; }

「 a:link 」や「 a:hover 」など、一見異なる要素を指しているようにも見えますが、これらはすべて「a要素(リンク)」に対するスタイルです。 つまり、「同じ箇所を対象にしたスタイル」なわけです。 ただ、それに「 :link 」や「 :hover 」などの条件が付加されていて、別の要素を指しているように見えています。(疑似クラスと呼びます。)

ここで、「既に行ったことのあるリンク」の上に「マウスを乗せた状態」という状況を考えてみます。 そのときの両者の見え方は、次の通りです。スタイルシートAではうまく色が変わっていますが、スタイルシートBでは変わらないままです。

「既に行ったことのあるリンク」の上に「マウスを乗せた状態」という状況での見え方を示した画面イメージ

スタイルシートAとBで、どのようにスタイルの適用が進むのかを追ってみましょう。

スタイルを記述された順番に解釈していくと…

まずは、スタイルシートAの場合を考えてみましょう。

●スタイルシートAの場合

[ 1 ] 行ったことがない場合は赤色にする
→ 行ったことがあるリンクなので無変化
[ 2 ] 行ったことがある場合は紫色にする
行ったことがあるので紫色にする
[ 3 ] マウスが乗っていれば緑色にする
マウスが乗っているので緑色にする
[ 4 ] 選択されていれば黄色にする
→ 選択はされていないので緑色のまま

→ 結果、リンクの文字色は緑色になる

このように、うまく適用されていますね。
それでは、問題のスタイルシートBの場合を考えてみましょう。

●スタイルシートBの場合

[ 1 ] 選択されていれば黄色にする
→ 選択はされていないので変化なし
[ 2 ] マウスが乗っていれば緑色にする
マウスが乗っているので緑色にする
[ 3 ] 行ったことがない場合は赤色にする
→ 行ったことがあるリンクなので緑色のまま
[ 4 ] 行ったことがある場合は紫色にする
行ったことがあるので紫色にする

→ 結果、リンクの文字色は紫色になる

いかがでしょうか。 スタイルシートBでは、色が変化しなかった理由がお分かりいただけたでしょうか。

リンクの上にマウスが乗っていようが、リンクが選択状態にあろうが、「行ったことのあるリンクである」という事実は変わりません。 ですから、「 a:visited { color: purple; } 」という「行ったことがあるリンクなら紫色に」というスタイルを最後に記述している限り、 どんな状態であっても、紫色にしかならないわけです。

リンクにスタイルを適用するには記述する順番が肝心!

というわけで、リンクにスタイルを適用する場合には、記述する順番が重要になります。
次のページで記述順に関する条件をまとめてみます。

守らないといけない記述順は、次のページで! →

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます