プロパティ

「プロパティ:値」を「;」で区切る

セレクタを使ってスタイルを設定する場合、背景色と文字色、文字の大きさと色など複数のスタイルを設定したいときは「プロパティ:値」の組をセミコロン「;」で区切って列挙します。「;」 の後で改行しでも効果は同じなので、見易さを考慮して改行して記述するとよいでしょう。3つ以上列挙する場合も同様です。

背景色と文字色を指定する

布のソースでは背景色を指定するbackground-colorプロパティを「blue」、文字色を指定するcolorプロパティを「white」に指定しています。なお、列挙した末尾の「プロパティ:値」のあとの「;」は不要ですが、あとでスタイルを追加するときに付け忘れないように付けておいてもよいでしょう。

クラス名を付けて設定対象とする

スタイルの設定対象となるものを「セレクタ」といいますが、このセレクタに直接タグ名を指定する方法と並んで、最も活用範囲の広いのがクラスセレクタです。この2つの方法さえしっかり理解しておけば、ホームページ制作上回ることはほとんどないといってよいでしょう。まず「.クラス名」として任意のクラス名(半角英数字、先頭は英字)を付けてセレクタとします。

例えば「blue」というクラスに「color:#0000ff」というスタイルを設定しています。colorプロパティは文字色を設定するプロパティで、「#OOOOff」は青色にするという意味になります。こうしておいて、スタイルを設定したい要素にclass属性の値としてクラス名を設定します。右のサンプルでは、h1、h2要素でできる見出しの一方に「class=”blue”」 でクラス名を設定し、一方には何も指定していません。

クラス名を指定したタグだけスタイル設定されるブラウザで表示すると、クラス名を指定したタグだけにスタイルが設定されるのがわかります。