今日はCSS（スタイルシート）の優先順位について書こうと思います。
CSSファイルには上書きルールと言うものがあり、
このCSSのルールを利用する事でレイアウトの自由度が広がります。
優先順位とは、同じ記述があった場合、
どれが実際に表示されるのかと言う事で、
これは上書きルールと関係してきます。
基本的なCSSの優先順位と上書きルール
CSSの基本的な優先順と上書きルールとして、
記述する順番によるものがあります。
例えば、
<style type="text/css">
h1{color:#000000;} /* 黒 */
h1{color:#ff0000;} /* 赤 */
h1{color:#ffffff;} /* 白 */
</style>
こんなCSSがあったとしたらどれが実際に表示されるのか？
と言うことです。
上記はどれもh1に対してフォントカラーを指定していますが、
黒、赤、白とそれぞれ違う色を指定しています。
CSSに限らず、大抵のコードは上から読み込まれます。
そしてCSSには上書きルールがありますので、上記の場合は、
最初に黒が読み込まれ、その後に赤が上書きされ、最後に白で上書きされ、
最終的には白が表示されます。
つまり、次々と上書きされて、一番下に記述されているものが
最終的に表示されますので、
「より下に記述されているCSSコードが優先順位が高い」
ということになります。
ただし、下記のようなCSSコードの場合、
<style type="text/css">
h1{color:#000000; font-size:20px;} /* 黒+フォントサイズ20px */
h1{color:#ff0000;} /* 赤 */
h1{color:#ffffff;} /* 白 */
</style>
最初のCSS定義では 文字色を黒にしてフォントサイズを20pxに
指定されています。2番目、3番目では色指定のみで、
フォントサイズ指定がされていません。
この場合は、最初に文字色を黒、フォントサイズ20pxと
読み込まれ、2番目で文字色だけ赤に上書きされ、
3番目で文字色が白に上書きされますので、
結果は、文字色が白、フォントサイズ20pxが表示されます。
CSSの記述場所による優先順位
CSSの記述場所とは、CSSを定義する（書く）場所の事で、
主に、外部CSSファイル、HTMLのヘッダー内に記述する方法、
インラインCSSの3つになります。
優先順位としては、
インラインCSS ＞ <head>内に記述 ＞ 外部CSS
となります。
外部CSS
h1{color:#000000;} /* 黒 */
HEAD内に記述
<style type="text/css">
h1{color:#ff0000;} /* 赤 */
</style>
インラインCSS
<h1 style="color:#ffffff;">白文字</h1>
上記の場合、文字色は白となります。
このパターンは知っていると結構レイアウトに幅が出ますので
覚えておくと良いと思います。
CSSセレクタによる優先順位と上書き
CSSセレクタによる優先順位です。
CSSセレクタには、
タイプセレクタ（要素名）、
ユニバーサルセレクタ（*）、
classセレクタ、
idセレクタ、
属性セレクタ
などがあります。
<html>
<head>
<title></title>
<style type="text/css">
<!--
h1{ color : #000000; }
.colors{ color : #ff0000; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1 class="colors">てすと </h1>
</body>
</html>
上記の場合、
タイプセレクタであるh1は、
classセレクタやidセレクタよりも優先されますので、
文字色は黒となります。
ネットビジネス速報メールマガジン
メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。
Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。
