★CSSの基本
| CSSの書き方
⬛︎ CSSの基本書式（セレクタ・プロパティ・値）CSSでスタイルを指定する際には、どの部分に対してどのスタイルをどのように適用するかを指定します。 以下の使用例では、p要素の色を青くするスタイルを指定しています。
p {color:blue;} それぞれの名称は、 セレクタ {プロパティ名:値;}となります。 セレクタ（selector）とはスタイルシートを適用する対象のことです。 上記の例ではp要素が指定されていますが、セレクタの種類を使い分けることで様々な対象にスタイルを適用することができます。
プロパティ（property）とは適用するスタイルの種類のことです。 上記の例では色を指定するcolorプロパティの値（value）にblueを指定しています。 CSSでは他にも様々なプロパティが用意されているので、適用するスタイルに応じて使い分けます。
尚、{ ～ } で囲んだ全体を宣言ブロック（declaration block）、プロパティ名と値をコロン（ : ）でセットにした部分をスタイル宣言（declaration）と呼びます。
⬛︎ 複数のスタイルを指定するひとつのセレクタに対して複数のスタイル指定する場合には、スタイル宣言をセミコロン（ ; ）で区切って記述します。 セミコロン（ ; ）は宣言同士の区切り記号なので最後は必要ありませんが、付けても誤りではありません。 後からスタイル宣言を追加したり、スタイル宣言の順序を入れ替える可能性などを考慮して付けておくのが一般的です。
例：複数のスタイル宣言の適用p {color:blue; line-height:1.5;} ⬛︎ 複数のスタイルを指定する
ひとつのセレクタに対して複数のスタイル指定する場合には、スタイル宣言をセミコロン（ ; ）で区切って記述します。 セミコロン（ ; ）は宣言同士の区切り記号なので最後は必要ありませんが、付けても誤りではありません。 後からスタイル宣言を追加したり、スタイル宣言の順序を入れ替える可能性などを考慮して付けておくのが一般的です。
例：複数のスタイル宣言の適用
p {color:blue; line-height:1.5;} ⬛︎ コメントの書き方/*から*/で囲んだ範囲はコメントとなります。 コメント部分はブラウザには無視されるので、一時的にCSSを無効にしたりCSSソース内にメモを残す際などに使用します。 コメントを入れ子にすることはできません。
例：CSSのコメントの書き方
p {color:blue; line-height:1.5;} /*段落を青くして行の高さを1.5倍にする*/ /* コメントは 複数行にすることもできます。 */ ⬛︎ 半角スペース・タブ・改行CSSでは半角スペース・タブ・改行はスタイルに影響しません。 これらを使用してCSSソースを見やすく整形しても問題ありません。
例：半角スペース・タブ・改行はスタイルに影響しないp { color : blue ; line-height : 1.5 ; } ⬛︎ 大文字と小文字HTML では要素名と属性名の大文字・小文字を区別しませんが、 XHTMLでは要素名と属性名は小文字で定義されているのですべて小文字で記述します。CSSファイル内でこれらを記述する場合、そのCSSがHTML文書に適用されるかXHTML文書に適用されるかによって、大文字・小文字が区別されるかどうかが決まります。
文書をHTMLで作成している場合でも、将来的にXHTMLへ移行する可能性を考慮して、CSSファイル内でも要素名・属性名はすべて小文字で記述したほうが良いでしょう。
|
