[ CSS ] CSS の文法まとめ

CSS の文法を簡単に書いておきます。

CSS のコメントの書き方
———————————————————————-

CSS のコメントは `/* */` で囲まれた部分のみです。

/* これが CSS のコメント */

私は JavaScript と間違えて、よく次のように書いてしまいます。

// これは CSS のコメントではありません

まぎらわしいですねえ。

CSS のセレクタ
———————————————————————-

CSS セレクタとは、スタイルを適用する対象を指定するもので、何個か種類があるのですが、いつまでたっても覚えられないので自分用にメモ。

| CSS セレクタ | マッチする箇所 |
| ——————– | ————————————– |
| `h1 { }` | h1 要素 |
| `h1, h2 { }` | h1 と h2 要素 |
| `p.photo { }` | photo クラスを適用している p 要素 |
| `.photo { }` | photo クラスを適用している要素 |
| `div#photo { }` | photo ID を適用している div 要素 |
| `#photo { }` | photo ID を適用している要素 |
| `p strong { }` | p 要素の中の strong 要素 |
| `p > strong { }` | p 要素直下の strong 要素 |
| `ul + p { }` | ul 要素直後の p 要素 ( IE6:NG ) |

### 擬似クラス

| CSS セレクタ | マッチする箇所 |
| ————————- | —————————————— |
| `ul > li:first-child { }` | ul の最初の子要素である li 要素 ( IE6:NG ) |

### 属性セレクタ

CSS には、属性が一致した時にスタイルを適用する [ 属性セレクタ ] なるものがあるらしい。
実際に試してはいませんが、とりあえずメモ。なんで参考程度に。

| CSS セレクタ | マッチする箇所 |
| ———————- | ———————————————————————————— |
| `a[href$=”.pdf”] { }` | PDF へのリンク。後方一致。
応用すれば PDF へのリンクにアイコンが付けれるかも？ |
| `a[href=”#top”] { }` | top へのリンクを持つ a 要素 ( IE6:NG ) |
| `img[src*=”hoge”] { }` | ファイルパスに「hoge」を含む画像。部分一致。 |
| `img[src^=”http”] { }` | 絶対パスで書かれた画像。前方一致。
応用すれば別サイトの画像をはじけるかも？ |

CLASS と ID の命名規則
———————————————————————-

CLASS と ID には、半角英数字とハイフンを使って任意の名前を付けることができますが、一文字目を数字にすると、Netscape でうまく認識してくれません。一文字目はアルファベットで始めるようにしましょう。また、クラス名にアンダーバー(_)を使用していると Netscape 4.7 でスタイルシートが適用されないので、これも注意です。

ということで、サンプルを作ってみる。

それから ID は、ひとつの HTML 文書内で一度しか使えないことになっているそうです。

よく使う id, class 名の覚え書き
———————————————————————-

CSS を書いている時、id, class 名を決めるとき悩む事が多いので、忘れっぽい自分の為に覚え書き。

header
head
footer
foot
logo
menu
body
contents
wrap
col-2
main
side
left
container
container-inner

とか書いてたら、もっと役に立つページがありました。

色々あるんですねぇ。

ひとつの要素に class 属性を複数指定する
———————————————————————-

CSS の class 属性は半角空白で区切って複数の値を指定する事が出来ます。例えば…

.font_red { color: #FF0000; }
.font_10px { font-size: 10px; }

上の様なスタイルを定義しておき、

<p class="font_red font_10px">テキスト</p>

こんな感じで指定します。サンプル。

ちょっと気になって確認してみた所、Mac 版 Netscape 4.7 では、うまく動きませんねー。

外部 CSS ファイルの文字コード指定
———————————————————————-

外部 CSS ファイルの中に日本語（コメントとか、フォントファミリーで日本語フォントを指定する時とか）を記述するときは、HTML のページに合わせた文字コードを指定しておきましょう。文字コードを指定していないと文字化けするのかな？

文字コードの指定方法は、CSS ファイルの一行目に以下のような記述を入れておきます。

EUC-JP の場合
@charset "EUC-JP";

UTF-8 の場合
@charset "UTF-8";

Shift-JIS の場合
@charset "Shift_JIS";

代替スタイルシート
———————————————————————-

CSS ファイルを何種類か作っておき、head 内に、

<link rel="stylesheet" type="text/css" title="black" href="color_black.css" />
<link rel="alternate stylesheet" type="text/css" title="red" href="color_red.css" />
<link rel="alternate stylesheet" type="text/css" title="blue" href="color_blue.css" />

なんて書いておくと、Opera 8 や Firefox 1.5 なんかの「表示」→「スタイルシート」で CSS を切り替える事ができるみたい。この時、title に書いてある文字列がメニューに表示される。

一応、スタイルシートを切り替えるサンプルを作ってみた。

margin と padding の違い
———————————————————————-

margin はボーダー外側の余白、padding はボーダー内側の余白。なので、要素の margin 同士が重なると大きい方が優先されるみたいです。

Media Queries のサンプル
———————————————————————-

– [ウインドウ幅に応じて背景色が変わるサンプル](http://jsdo.it/gontaworks/p6yU)