CSS(スタイルシート)講座：各ブラウザの互換性を考慮したCSSを学びたい人にオススメ！
CSSの構文の基礎
このページは難しい記述も多少含まれていますので、最初はCSSの基本的文法、要素セレクタ を参照して頂いて、他は必要に応じてご覧頂いた方がよいかもしれません。
CSSの基本的文法
早速ですが、CSSの基本的文法の説明に入ります。
セレクタ { プロパティ : 値 ; }
以上がCSSの基本的文法です。簡単ですよね？見難いと思いますが、「プロパティ」の後ろの記号がコロンで「値」の後ろの記号がセミコロンです。※ちなみに見やすくするために途中途中にスペースを入れていますが、本来は入れる必要はありません。
それでは各部分の説明をします。
- セレクタ
- スタイルを適用させたい要素・ID・クラスを指す
- プロパティ
- どのようなスタイルを適用させたいか
- 値
- プロパティの値
プロパティは複数指定することが出来ます。
セレクタ{
プロパティ1 : 値1 ;
プロパティ2 : 値2 ;
}
このように複数プロパティを指定する場合はその節々で改行することをオススメします。１行で書くことも可能ですが見づらくなってしまいますからね。ちなみに、HTMLもそうですが、セレクタ、プロパティ、値は半角英数字で記述してください。全角文字だと動作しません。
これだけでは分かりにくいと思うので実例を紹介します。各プロパティの意味は今のところは理解できなくて構いません。このような記述方法があるということだけ覚えてください。
要素セレクタ
p{
font-size:12px;
color:#FF0000;
}
上記の例では、p要素（タグ）に対して、フォントの大きさと色を指定しています。つまり、上記のように記述すると全てのp要素が12pxの大きさの赤い文字になるわけです。例のようにp要素をセレクタとする要素セレクタ以外にも様々なセレクタがあります。
全称セレクタ
*{
font-size:small;
color:#FFFFFF;
}
セレクタに"*"を用いることで、全ての要素に対してスタイルを指定することが可能です。 marginやpadding、文字サイズなどの初期化によく使われます。
IDセレクタとクラスセレクタ
.impact{
font-weight:bold;
color:#FF0000;
}
#talk{
font-size:15px;
}
「.」がついているほうがクラス、「#」がついているほうがIDです。クラスやIDはHTMLの各要素を特徴付ける際に使用します。CSSの肝でもあるのでしっかり覚えましょう。クラス、IDを使用するには下記のようにHTMLを記述します。
<p id="talk"><span class="impact">IDとクラス</span>の使い方</p>
クラス、IDを使用するにはそれぞれclass属性、id属性を使用します。
同一IDはページ内に１箇所しか記述できないので注意が必要です。（一応正常に表示はされると思いますが文法的には誤っています。）
ちなみにこのHTMLソースの場合以下のようなCSSでも同様の効果が得られます。
span.impact{
font-weight:bold;
color:#FF0000;
}
p#talk{
font-size:15px;
}
このように記述すると、span要素に.impactを指定した場合だけ、p要素に#talkを指定した場合だけというようにスタイルの範囲が狭まります。汎用性は無くなりますが管理しやすくなります。
ちなみに要素と「.」または「#」の間にスペースを入れてしまうと、全く別の意味（次の文脈的セレクタを参照）になってしまうので注意！
文脈的セレクタ
div ul il{
font-weight:bold;
color:#FF0000;
}
<div>
<ul>
<li>この部分のスタイルを指定</li>
</ul>
</div>
上記のサンプルはdiv要素さらにul要素に囲まれたli要素に対してスタイルの指定を行うという意味です。このように各要素を半角スペースで区切ることで、より細かな指定を行う事が出来ます。またクラスセレクタやIDセレクタと併用することも可能です。
#box ul il{
font-weight:bold;
color:#FF0000;
}
<div id="box">
<ul>
<li>この部分のスタイルを指定</li>
</ul>
</div>
このようにIDを併用した文脈的セレクタを使うことは、CSSを駆使したwebサイトを構築する上で必須のテクニックなので難しいですが必ず覚えましょう。
親要素と子要素
文脈的セレクタを覚えるついでに親要素と子要素についても学んでおきましょう！先ほどのサンプルを使い親要素と子要素の解説をしたいと思います。
ul要素を基準とした場合、div要素が親要素、li要素が子要素になります。
div要素を基準とした場合、ul要素が子要素、li要素が孫要素になります。
li要素を基準とした場合、ul要素が親要素、div要素が親の親要素になります。
ul要素はli要素の親であり、li要素はul要素の子である。
先ほどのHTMLソースを見ると、おのずと親と子の関係が分かってくるかと思います。
また、「親要素」や「親の親要素」を祖先要素、「子要素」や「孫要素」を子孫要素ということもあります。
また、子に持てる要素は各要素ごとに異なります。
例えば、
p要素が子に持てるのはインライン要素のみ
ul要素が子にもてるのはli要素のみ
※入れ子とは･･･ div要素内にul要素、ul要素内にli要素というように要素内に他の要素を含ませた構造。（あくまでもコーディングでの意味です。）
アンカー擬似クラスセレクタ
擬似クラスはa要素だけに適用可能（2006年現在）です。今までとは文法が少し異なるので戸惑うかも知れませんが、覚えてしまえば簡単です。
a:link{color:#0000FF;}
a:visited{color:#FF00FF;}
a:hover{color:#00FFFF;}
a:active{color:#00FF00;}
このようにa要素の直後を:（コロン）で区切り擬似クラスを指定するだけです。また、アンカー擬似クラスセレクタは上記のサンプルのように「link」「visited」「hover」「active」の順に指定してください。各擬似クラスの解説は下を参照。
- :link
- 未訪問のa要素
- :visited
- 訪問済みのa要素
- :hover
- a要素の上にカーソルがのっている状態
- :active
- 選択中のa要素 (キーボード操作している人や携帯で閲覧している人向けの設定。マウス操作の場合ほとんど効果なし。)
こういう応用も可能です。
div ul li a.navi:link{color:#0000FF;}
<div>
<ul>
<li><a class="navi">next</a></li>
</ul>
</div>
擬似要素セレクタ
p:first-line{color:#0000FF;}
h1:first-letter{color:#0000FF;}
文法は擬似クラスと同じなので、擬似クラスが理解できれば問題ないと思います。擬似クラスがa要素だけに適用できたのに対し、擬似要素は様々な要素に適用可能です。
- :first-line
- 要素の一行目
- :first-letter
- 要素の一文字目
サンプルではp要素の一行目とh1要素の一文字目にカラーを指定しています。
グルーピング
グルーピングを使うことで、一つのスタイルを複数のセレクタに適用させることが可能です。一つ一つ指定していっても問題は無いのですが、冗長なコーディングになってしまい非常に見づらくなります。グルーピングを使って無駄を省きましょう！
p,h1{color:#FF0000;}
div ul li,#sample{font-size:small;}
このようにセレクタを「,」（カンマ）で区切ることで複数のセレクタにスタイルを適用できます。サンプルの3行目のように要素セレクタだけでなく、文脈的セレクタ、IDセレクタ等もグルーピング可能です。
スタイルの競合
スタイルシートが複雑になってくるとスタイルが競合する可能性が出てきます。例えば、以下のような例です。
*{
font-size:small;
color:#FF0000;
}
p{color:#0000FF;}
この例だと全称セレクタで全ての要素にcolorプロパティが指定されているわけですから、p要素にcolorプロパティを指定すると競合してしまいます。ちなみに例ではfont-sizeプロパティは競合してないので、そのまま引き継がれます。
この場合はp要素に指定されたスタイルが優先されます。基本的により詳細な指定のセレクタが優先されることになります。
- スタイルが競合した場合の優先順位
- 全称セレクタ ＜ 要素セレクタ ＜ クラスセレクタ ＜ IDセレクタ
またセレクタの優先順位が同じ場合は、後に書いたものが優先されます（!important指定された場合を除く）。
全称セレクタのように優先順位の低いセレクタのプロパティの優先順位を上げる方法があります。下記のサンプルソースをご覧下さい。（あまり使う機会は無いと思いますが）
*{ color:#FF0000 !important;}
このように、値の直後に「!important」と記述することで、そのプロパティを最優先させることが出来ます。
@規則について
CSS（スタイルシート）の文字コード指定方法で説明しましたが、CSSには@で始まる記述があります。
@ではじまる記述には以下のような物があります。
- @charset
- @import
@charsetは文字コードを指定します。詳しくはCSS（スタイルシート）の文字コード指定方法をご覧下さい。
@importは他のCSSファイルを読み込みます。いくつもCSSファイルを読み込む必要がある場合、
XHTMLファイル内のlink要素が煩雑になります。それを避けたい時に使うと便利です。（個人的にはあまり使う必要はないと思っています。）
<link rel="stylesheet" href="import.css" type="text/css" media="all" />
@import url("header.css");
@import url("footer.css");
@import url("content.css");
@import url("print.css") print;
上の例では、XHTMLのlink要素でimport.cssを読み込み、import.cssファイル内からさらに各種CSSファイルを読み込んでいます。 ファイルパスの後ろにオプションとして適用するメディアを指定できます。4行目のprint.cssは印刷物に対してスタイルを適用しています。
なお、@規則はどのセレクタよりも先行させる必要があります。
他にも、@media、@page、@font-faceなどがありますが、使われる機会がなかったりブラウザが対応していなかったりするので説明は割愛します。
