Cascading Style Sheet の基礎知識
CSSは、HTML文書を OSやブラウザに左右されずに正確にレイアウトしたり、レイアウトを拡張するための機能です（実際は、どのブラウザも CSSの実装方法が異なるため完全に同一レイアウトにはなっていません）。また、文書とレイアウトの分離も目的の一つです。
書式
CSS は次の書式で記述します。
セレクタ { プロパティ: 値 }
セレクタは、スタイルを適用する対象のことで、通常 HTMLのタグが該当します。タグに対してのスタイル定義では、適用範囲が細かく設定できないためクラスセレクタとIDセレクタというものがあります。違いは、ページ内で複数の内容にスタイルを指定するクラスセレクタに対し、唯一の内容にスタイルを適用するIDセレクタとなります。プロパティは、CSS1 や CSS2 などの仕様書で定義されているもので、セレクタにどのような効果を与えるか指定するものです。プロパティごとに指定できる効果が決まっています。
プロパティはセミコロン（;）で区切って複数指定することができます。 詳細は http://www.w3.org/TR/REC-CSS1, http://www.w3.org/TR/REC-CSS2/ を参照。
HTML 文書内で利用するには、文書内に直接記述する方法とCSSファイルを読み込む方法があります。複数のページがあり、変更しやすさを考えると別ファイルにすると良いでしょう。
文書内に記述する場合：
<html> <head> <title>CSS Sample</title> <style type="text/css"> .title1 { color: #207870; font-weight: bold; } </style> </head> <body> <div align="center" class="title1">CSS Sample</div> <body> </html>
CSSファイルを読み込む場合：
<html> <head> <title>CSS Samplet</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div align="center" class="title1">CSS Sample</div> <body> </html>
複数セレクタ
セレクタは、カンマ（,）で区切って複数指定することができます。
h1, h2, h3 { color: #e05682 }
セレクタの組み合わせ（入れ子になったセレクタに影響）
セレクタとセレクタを半角スペースで区切って記述すると、初めに指定したセレクタの範囲内にある最後のセレクタにのみにスタイルを適用させることができます。
p strong { color: #e05682 }
...
<p><strong>data</string></p> <!-- 適用される -->
<span><strong>data</string></span> <!-- 適用されない -->
スペース以外にもあるがスタイルが複雑になるのでちょっと意味だけ...
セレクタ1 > セレクタ2 {プロパティ:値; ...} は、セレクタ2 がセレクタの構造の中でセレクタ1 より1レベル下位にある場合のみ
セレクタ1 * セレクタ2 {プロパティ:値; ...} は、セレクタ2 がセレクタの構造の中でセレクタ1 より少なくとも2レベル下位にある場合
セレクタ1 + セレクタ2 {プロパティ:値; ...} は、セレクタ2 がセレクタ1 と同じレベルにあり、セレクタの構造の中でセレクタ1 の直後に来る場合
属性により制限を受けるセレクタ
セレクタ[属性の名前] {プロパティ:値; ...} と [] で属性を指定することで、指定した属性を持つセレクタのみにスタイルを適用させることができます。
input[type="text"] { background-color: #e05682 } /* type属性が text */
img[alt~="help"] { border: 2px } /* altに helpが含まれる */
...
<input type="text" name="user" value=""> <!-- 適用される -->
<img src="fish.jpg" alt="command help"> <!-- 適用される -->
クラスセレクタ （セレクタ.クラス名）
クラスセレクタ は、ページ内で複数の内容にスタイルを指定するために使用します。セレクタにピリオド（.）とクラス名をつけて識別します。
p.caution { color: #e05682 } /* 注意！ */<p class="caution">※ここに注目してね。</p>
セレクタ名を指定せずに、ピリオド（.）とクラス名だけを記述した場合（あるいは、セレクタ名の代わりにアスタリスクを記述した場合）、すべての要素でそのスタイルを指定できます。
.caution { color: #e05682 } /* 注意！ */<p class="caution">※ここに注目してね。</p> <div class="caution">※ここには注意してね。</div>
また、ひとつの要素に複数のクラスを適用させるには、半角スペースで区切りクラス名を列挙します。
.caution { color: #e05682 } /* 注意！ */ .box { border: 1px solid #444444 } /* 枠 */<div class="caution box">※ここには注目してね。</div>
IDセレクタ （セレクタ#ID名）
IDセレクタ は、ページ内で唯一の内容にスタイルを指定するために使用します。セレクタにシャープ（#）とID名をつけて識別します。
セレクタ名を指定せずに、シャープ（p#attention { color: #e05682 }<p id="attention">※ここには注意してね。</p>
#）とID名だけを記述した場合、指定した要素のスタイルを指定できます。
#attention { color: #e05682 } /* 注意！ */<div id="caution">※ここには注意してね。</div>
単位
スタイルシートで使用する長さには、数値と単位を設定することで様々な指定ができます。単位には、「相対値」と「絶対値」の2種類があります。（絶対値とはいっても、モニタの解像度がWindows では96dpiで Macintoshでは72dpi なので、正確に同一のレイアウトにはなりません）
単位 説明 mmミリメートル (絶対値) cmセンチメートル (絶対値) inインチ [ 1 inch = 2.54 cm] (絶対値) ptポイント [ 1pt = 1/72in ] (絶対値) pcパイカ [ 1pc = 12 pt ] (絶対値) emフォントの高さを基準とした大きさ (相対値) ex英字小文字の「x」の高さを基準とした大きさ (相対値) px画面のピクセル (相対値) %画面サイズや親要素に対する割合 [パーセント] (相対値)
色の指定
スタイルシートで利用する色の指定にも、いくつかの方法があります。
単位 説明 #rrggbbRGB を 16進数で指定 (16bit) #rgbRGB を 16進数で指定 (8bit) rgb(x,x,x)RGB を 10進数で指定 (xは、0-255の範囲の整数) rgb(x%,x%,x%)RGB をパーセントで指定 (xは、0.0-100.0 の範囲)
ボックスモデル
スタイルシートでは、ボックス・モデルという要素の配置に関する定義があります。要素（テキストや画像など）に対して、パディング、ボーダー、マージンというプロパティを持っています。
padding: 10px 15px 10px 15px; /* top, right, bottom, left, */ padding: 10px 15px; /* top and bottom, right and left */ padding: 10px; /* top and bottom and right and left */
要素のサイズの計算は
.element_a {
width: 300px;
margin: 5px;
padding: 5px;
border: 1px solid #000000;
}
<div class="element_a">要素</div>
300px (要素) + 5px (left マージン) + 5px (right マージン) + 5px (left パディング) + 5px (right パディング) + 1px (left ボーダー) + 1px (right ボーダー)= 322px (全体の幅の合計)
画面と印刷ページ
CSS では、ブラウザによる表示と印刷時の表示を変えることができます。 headタグ内に以下のようなタグを追加します。 先に印刷用を書いてしまうと、 印刷用スタイルシートが適用されないことがあるので順番を間違えないようにします。
<link rel="stylesheet" type="text/css" href="theme/display.css" media="all">
<link rel="stylesheet" type="text/css" href="theme/print.css" media="print">
スタイルシートはmedia属性を加えることで、ページを閲覧する環境によって使うスタイルシートを切り替えることができます。media="all"は全ての環境で適用され、media="print"は印刷するときに適用されます。他にもテレビ(tv)や携帯端末(handheld)などがあります。
では実際にどのような使い分けをするのかというと以下のようなことが挙げられます。
- フォントのサイズ(
font-size:10px)や色(color:#000000;)を変更 - 不要な部分を印刷されないように非表示(
display:none;) - ページの横幅の調整
スタイルの優先順位
スタイルの設定で競合する場合、設定者／セレクタ／指定場所によって優先される順番が異なります。
設定者による優先順位
スタイルシートには、ページ制作者によって設定された「制作者スタイル」、閲覧者によって設定された「ユーザースタイル」、ブラウザ標準の「ブラウザスタイル」があります。
-
制作者スタイル - ページ制作者が、自分のサイトをデザインする際に設定するスタイルシートです。最も優先されるスタイルです。
-
ユーザースタイル - 閲覧者が、自分が見やすいように設定したスタイルシートです（ブラウザで設定可能）。!importantを指定することにより、閲覧者の設定を優先させることが可能です。
-
ブラウザスタイル - ブラウザに標準設定されたスタイルです。上記二つのスタイルで設定されていない場合、このスタイルが適用されます。（例えば、h1要素内のテキストを大きめのサイズで表示、strong要素内のテキストを太字で表示といった基本のスタイル。）
セレクタによる優先順位
セレクタの種類による優先順位は次のようになります。
-
IDセレクタ - ひとつの要素に対する指定
-
クラスセレクタ - グループ単位の指定
-
要素名 - 要素の種類単位の指定
-
*（全称セレクタ）- 全ての要素に指定
#caution { color: red; } /* 注意！ */ .notice { color: blue; } <div id="caution" class="notice">ここには注意してね！</div>ここには注意してね！※ IDセレクタが優先されている
設定場所による優先順位
外部スタイルシート、head要素内の指定、要素に直接指定とそれぞれ設定した場合の優先順位は次のようになります。
<html>
<head>
<title>スタイルの優先度</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
<!--
p { color: green; }
-->
</style>
</head>
<body>
<p style="color: red;">この文字の色は赤</p>
</body>
</html>
要素に直接指定（color: red）
head内の指定（color: green）
外部スタイルシートの指定（color: blue）
headタグ内でスタイルを設定した場合は最後に設定したほうが優先される。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { color: green; }
-->
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>この文字の色は青</p>
</body>
</html>
外部スタイルシートの指定（color: blue）
head内の指定（color: green）
優先順位の変更（!important）
通常は、上記の各項目で説明したルールでスタイル指定の優先順位が決められます。しかし、!important を指定することで閲覧者の設定を優先することができます。これは、注目すべき部分の表示を閲覧者の設定に合わせることで重要な項目を見落とさないように配慮することができます。
