CSS(Cascading Style Sheets)とは、HTMLの装飾(色などのデザイン)を指示するものです。 HTMLのタグによって装飾を指示することもできますが、 CSSを利用することでより簡単に指示することができます。 また、HTML4以降、文書の見栄えはCSSで定義することが推奨されています。CSSの書式
セレクタ { プロパティ: 値; プロパティ: 値; }
,(カンマ)で区切ってセレクタを複数指定できます。クラス名の命名規則は、使用可能な文字は半角英数字で、英字(アルファベット)で始まる必要があります。
- 全称セレクタ - 全ての要素に適用されます。
* { プロパティ: 値;}- タイプセレクタ - 指定の要素に適用されます。
b { プロパティ: 値;}- 文脈セレクタ - 以下の場合、<p>の中にある<b>に適用されます。
p b { プロパティ: 値;}- 子供セレクタ - 以下の場合、<p>の中にある<b>にだけ適用されます。
p > b { プロパティ: 値;}- 隣接兄弟セレクタ - 以下の場合、</p>の直後にある<b>に適用されます。
p + b { プロパティ: 値;}- 子孫セレクタ - 以下の場合、<div>の中にある<p>などの中にある<b>に適用されます。
div * b { プロパティ: 値;}- クラスセレクタ - 指定のクラスに適用されます。
.test { プロパティ: 値;}
b.test { プロパティ: 値;}- 一意セレクタ - 指定の要素のID属性に適用されます。
b#test { プロパティ: 値;}- 属性セレクタ - 指定の要素の属性に適用されます。
a[href] { プロパティ: 値;}
例えば<b>タグに囲まれた部分を赤字にしたい場合、 HTMLでは<b>タグが登場するたびに<b><font color="red">などと 記述する必要がありますが、CSSを利用すれば「<b>タグは赤字」という感じで、 一回の記述で全ての<b>タグに指示することができ、 さらに複数のページに反映させることもできます。 CSSを外部ファイルにすると、ひとつの定義で複数のHTMLファイルに反映させることができるので便利です。htmlの<head>タグの中に記述する方法
<style type="text/css"> <!-- b { color: red; } --> </style>外部ファイルで記述する方法
外部ファイル (test.css)b { color: red; }htmlの<head>タグの中で外部ファイルを指定<link rel="stylesheet" type="text/css" href="test.css">
単位 説明 絶対単位 pt ポイント。1ポイントは72分の1インチ。 pc パイカ。1パイカは12ポイント。 mm ミリメートル。 cm センチメートル。 in インチ。1インチは2.54センチメートル。 相対単位 px ピクセル。画素数。環境の解像度に依存。 em font-sizeの高さをを1とした相対単位。 ex フォントのx-height(高さ)。 % 100%を基準とした相対単位。
以前はブラウザに問題があり、HTMLの<table>を使ってレイアウトをすることが主流でした。しかし、テーブルは本来「表」を表すものであり、HTML4でもCSSが推奨されていることから、 現在はCSSを用いてレイアウトをすることが推奨されています。ただ、現在のモダンブラウザがCSSをサポートしているとはいえ、ブラウザによって仕様が異なったり、バグがあることで、見栄えが統一されないことが、ウェブデザイナーの悩みの種となっています。テーブルによるレイアウト
<table border="1" bordercolor="#000000" cellspacing="0" cellpadding="0" rules="cols"><tr> <td width="100px" height="100px">左</td> <td width="100px" height="100px">右</td> </tr></table>
左 右 CSSによるレイアウト
<div style="border:solid 1px #000000;width:100px;height:100px;text-align:center;float:left;line-height:100px;">左</div> <div style="border:solid 1px #000000;width:100px;height:100px;text-align:center;float:left;line-height:100px;position:relative;left:-1px;">右</div> 左右
- とほほのスタイルシート入門 CSSを詳細に解説。
- W3C CSS 検証サービス W3Cによるバリデーションツール。