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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

話の途中ですが、さらにクイズです。

次のスタイルシートを見て下さい。このスタイルシートを適用した結果、p要素の文字は何色になりますか?

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

2つのスタイルが記述されていますが、セレクタは、どちらも「 p 」ですね。 記述しているプロパティも、どちらも「 color 」(文字色)です。
※セレクタ:適用するHTML要素名のこと。h1, h2, p, em, strong など。
※プロパティ:スタイルの種類のこと。color, border, margin など。

このスタイルシートを適用すると、p要素内の文字は何色になるでしょうか?

答えは、青色(blue)です。

スタイルシートでは、同じスタイルが記述された場合、後に記述された方を優先して採用します。

ここでは、最初に赤色が指定されて、その次に青色が指定されています。ですから、後の記述を優先した結果、青色で表示されることになるわけです。

同じスタイルは、後の記述が優先される

さて、話を元に戻しましょう。
次の2つのスタイルシートはどう見えるのか。また、両者で見え方が異なるのはなぜか、という話です。

■スタイルシート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では望み通り色が変化するが、スタイルシートBでは変化しないことを示した画面イメージ

スタイルシートAでは、指定通り色が変化していますが、スタイルシートBでは、文字色はずっと紫色のままです。 つまり、スタイルシートBでは、「 a:visited 」のスタイルがずっと採用され続け、「 a:hover 」や「 a:active 」のスタイルは採用されていないということです。

なぜでしょうか?

実はここには、「スタイルシートでは、同じスタイルが記述された場合、後に記述された方を優先して採用する。」という規則が働いているのです。

しかし、一見したところ、このスタイルシート4行のうち、同じ記述などありませんね。何が問題なのでしょうか。

スタイルシートの記述順問題、答えは次のページで! →

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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