CSSの概要
CSS(Cascading Style Sheets)は、W3Cが策定している、HTML文書の見栄えを定義する仕様です。単にスタイルシートと呼ばれることもあります。初期のHTMLでは、文書としての情報と文字色などの見栄えが混在していましたが、これらを分離して、HTML文書には文書情報とその意味づけのみ記述し、見栄えに関することはCSSで記述しようというのがコンセプトです。
CSS3とは
CSS3(Cascading Style Sheets level 3)はCSSの新しい仕様です。「フォント」や「テキスト」などのモジュールに分かれており、モジュールごとに並行して仕様の定義が進められています。一部はすでに勧告されており、まだ勧告されていない仕様についても一部のブラウザが対応しています。
CSS3を使うと従来JavaScriptで行っていたアニメーション効果や入力内容チェックをCSS3だけで実現できるほか、Webサーバーからフォントをダウンロードしてブラウザ上で表示させることもできるようになります。
CSSの書式
CSSの基本的な書式を紹介します。たとえば、h1要素の文字色を赤のイタリック体にするには次のように記述します。
h1 {
color: red; /* 赤 */
font-style: italic; /* イタリック */
}
h1の部分をセレクタといい、colorやfont-styleのことをプロパティといいます。/* から */の間はコメントです。
セレクタ部分の指定によって、プロパティを適用する範囲を指定できます。
セレクタの主な書式
| セレクタ | 意味 |
| * | すべての種類の要素 |
| *.classname または .classname | クラス名がclassnameの要素 |
| *#idname または #idname | IDがidnameの要素 |
| h1,h2 | h1要素とh2要素 |
| h1[attrname] | h1要素のうち属性にattrnameを持つもの |
| h1[attrname="attrvalue"] | h1要素のうちattrname属性の値が"attrvalue"であるもの |
| a:link | 未読のリンク |
| a:visited | 既読のリンク |
| a:hover | マウスオーバー時のリンク |
| a:active | 選択時のリンク |
| a:focus | フォーカス時のリンク |
| *:checked | ラジオやボタンがチェックされている要素 |
| *:lang(en-US) | lang属性の値がen-USで始まっている要素 |
| *:enabeled | disabledが指定されていない要素 |
| *:disabled | disabledが指定されている要素 |
| *:root | ルート要素（html要素） |
利用方法
HTML文書中でCSSを利用するには、３つの方法があります。
※HTML4.01の頃は、CSSを利用するために
<meta http-equiv="Content-Style-Type" content="text/css">
という記述が必要でしたが、HTML5では省略できます。
要素中でstyle属性を用いて指定する
次のようにするとh1要素にスタイルを指定できます。
<h1 style="color: red">
HTML文書内にまとめて記述する
次のようにhead要素内にスタイルを記述します。
<head>
<style>
h1 {
color: red;
font-style: italic;
}
</style>
</head>
※HTML5ではstyle要素中の 「type="text/css"」の記述は省略できます。
別ファイルに記述する
拡張子が.cssのファイルに次のように記述します。
h1 {
color: red;
font-style: italic;
}
HTML文書では、head要素内に次のように記述してCSSファイルを指定します。
<head>
<link rel="stylesheet" href="base.css">
</head>
※HTML5ではlink要素中の 「type="text/css"」の記述は省略できます。
外部CSSファイルの文字コード指定
拡張子が.cssのファイルの先頭行に「@charset "文字コード名";」と書くと、そのファイルがどの文字コードで記述されているかを指定できます。
次の例はそれぞれ、UTF-8、Shift-JIS、EUC-JPを指定した例です。
UTF-8
@charset "utf-8";
Shift-JIS
@charset "shift-jis";
EUC-JP
@charset "euc-jp";
HTML5ではUTF-8の利用が推奨されていますので、CSSファイルの文字コードもUTF-8にしておくのがよいでしょう。
ベンダープレフィックス
CSS3の仕様で勧告（Recommendation）されているのはまだ一部ですが、各ブラウザでは先行していくつかの機能をサポートし始めています。たとえば、図形に変形効果を適用するtransformは2012年1月現在、草案（Working Draft）の段階ですが、IE9、Firefox10、Opera11、Chrome16、Safari5、の各ブラウザで利用することができます。ただし、このような機能をブラウザが実装する際は、セレクタの前に各ブラウザごとに異なる接頭辞（プレフィックス）を付けることが推奨されています。
プレフィックスとは次のようなものです。
| プレフィックス | ブラウザ |
| -ms- | Internet Explorer |
| -moz- | Firefox |
| -o- | Opera |
| -webkit- | Chrome、Safari |
たとえば、IEでtransform機能を利用する場合は、「tansform」と書く代わりに、「-ms-tansform」と書きます。
なお、草案が勧告候補（Candidate Recommendation）の段階に移行したら、プレフィックスを外すことが推奨されています。各ブラウザに対応させるためには、次のように各ブラウザに対応したセレクタを同時に記述します。
#idname {
-ms-tansform: scale(2,2);
-moz-|tansform: scale(2,2);
-o-tansform: scale(2,2);
-webkit-tansform: scale(2,2);
tansform: scale(2,2);
}
CSSの代表的なプロパティ
| color | 色を指定します。色の指定の方法には、「red」のように色名で指定する方法のほか、#ff0000、rgb(255, 0, 0)、rgb(100%, 0%, 0%)のようにRGB形式で指定する方法などがあります。 |
| margin、margin-top、margin-bottom、margin-left、margin-right | 要素間の隙間の大きさを指定します。marginに値を１つ指定した場合は上下左右に同じ値を指定します。それ以外は上（top）下（bottom）左（left）右（right）に個別に設定します。 |
| padding、padding-top、padding-bottom、padding-left、padding-right | 要素のまわりの余白の大きさを指定します。paddingに値を１つ指定した場合は上下左右に同じ値を指定します。それ以外は上（top）下（bottom）左（left）右（right）に個別に設定します。 |
| border、border-top、border-bottom、border-left、border-right | 要素の枠線の太さを指定します。borderに値を１つ指定した場合は上下左右に同じ値を指定します。それ以外は上（top）下（bottom）左（left）右（right）に個別に設定します。 |
| display | 表示方法を block（段落）、inline（文中）、list-item（箇条書き）、none（非表示）などから指定します。 |
| position | 位置指定の方法を static（指定なし）、relative（相対位置）、absolute（絶対位置）、fixed（絶対位置（スクロールでも固定））などから指定します。 |
| top、bottom、left、right | 要素の位置を指定します。それぞれ上（top）下（bottom）左（left）右（right）を表します。 |
| float | テキストの回り込みを指定します。none（指定なし）、left（要素を左端に固定し、テキストは右に回り込み）、right（要素を右端に固定し、テキストは左に回り込み）のいずれかで指定します。 |
| clear | 回り込みを解除します。 |
| z-index | 重ね合わせの順序を整数値で指定します（数字が大きいほど手前） |
| width、height | 要素の横幅と高さを指定します。 |
| overflow | テキストが領域をはみ出したときの表示方法を指定します。visible（はみ出してそのまま表示）、hidden（はみだし分を隠す）、scroll（スクロールバーを表示）、auto（自動）などを指定します。 |
| clip | 一部をくりぬいて表示します。auto（自動）を指定するか、rect(top,right,bottom,left)の形式で指定します。 |
| visibility | 要素を表示するかどうかを、visible（表示）、hidden（非表示）等から指定します。 |
| list-style、list-style-type、list-style-position、list-style-image | 箇条書きの書式を指定します。list-style-typeは<li>のマーカーの形、list-style-positionはマーカーの位置、list-style-imageはマーカーの画像を指定します。list-styleはこれらをまとめて指定します。 |
| background、background-color、background-image、background-repeat、background-attachment、background-position | 要素の背景を設定します。background-colorは色、background-imageは画像、background-repeatは画像の繰り返し、background-attachmentはスクロールの仕方、background-positionは表示位置を指定します。backgroundはこれらをまとめて指定します。 |
| font、font-style、font-weight、font-size、line-height | フォントを指定します。font-styleは斜体かどうか、font-weightは太さ、font-sizeは大きさ、line-heightは行間を指定します。fontはこれらをまとめ指定できます。 |
| text-indent | テキストの字下げを指定します |
| text-align | テキストの配置をleft（左寄せ）、right（右寄せ）、center（センタリング）などから指定します。 |
| text-decoration | テキストの装飾をnone（なし）、underline（下線）、line-through（打ち消し線）、blink（点滅）などから指定します。 |
| letter-spacing | 文字間を指定します。normal（通常）や、3pxなどの数値で指定します。 |
| white-space | 空白の扱いを normal（自動改行）、pre（自動改行しない）、nowrap（自動改行しない、空白はつめる）などから指定します。 |
| caption-side | テーブルのキャプションの位置を指定します。 top（上）、bottom（下）などから指定します |
| table-layout | テーブルの横幅の決め方を指定します。auto（自動的に調整）やfixed（固定）で指定します。 |
| empty-cells | 中身が空のセルの枠線を描画するかを show（表示）、hide（非表示）で指定します。 |
| cursor | 要素上にマウスカーソルが来たときの形状をauto（自動）、crosshair（十字）などから指定します。 |
関連項目
