ホームページ作成

【ホームページ作成】実は重要！スタイルシートの記述順！

リンクの表示・装飾 (HTML,CSS,JavaScript)

更新日：2005年06月22日

実は重要！スタイルシートの記述順！

西村文宏

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

いきなりですが、クイズです。

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

h1 { color: red; }

h2 { color: blue; }

答えは簡単。h1要素は赤色(red)、h2要素は青色(blue)ですね。

では、次のスタイルシートを見て下さい。このスタイルシートを適用した結果、h1要素とh2要素の文字は何色になるでしょうか？

h2 { color: blue; }

h1 { color: red; }

h1要素とh2要素に対するスタイルの記述順が変わっています。
しかし、答えは一緒。h1要素は赤色(red)、h2要素は青色(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のスタイルシートでは、見え方が異なってしまうのです。 違う点は、記述順だけであるにもかかわらず、両者では見え方が異なります。

※補足：

よく使われるのでご存じの方々が多いでしょうが、念のために簡単にご紹介しておきましょう。上記のソースで使用しているスタイルは、それぞれの条件に合致するリンクに対してのみ有効になります。

a:link ：まだアクセスしたことのないリンクに適用
a:visited ：既にアクセスしたことのあるリンクに適用
a:hover ：マウスが上に乗っている状態のリンクに適用
a:active ：選択されている状態のリンクに適用

記述順が異なるだけで、見え方が異なってしまうのはなぜでしょうか？

スタイルの記述順と表示の関係は次のページで！ →

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！