Section 7 : スタイル指定の省略形

スタイルシートの利点は,フォントの種類やサイズを選択して自由にレイアウトできる点にあることはすでに学んだ。ページデザインをイメージしたとおりに実現するには,種類の多い属性を使いこなす必要がある。


フォントの省略形

フォントの指定にはたくさんの属性があり,これらを「;」で区切って指定する。

属性意味記述例
font-familyフォントの種類{ font-family: Courier, monospace; }
font-size文字の大きさ{ font-size: 12pt; }
font-weight文字の太さ{ font-weight: bold; }
font-styleイタリックなど{ font-style: italic; }
text-decorationアンダーラインなど{ text-decoration: underline; }
line-height行送り{ line-height: 150%; }

スタイルシートでは頻繁にフォントを指定するわけであるが,これらは font という属性で一括指定することができる。たとえば,以下のように長いものがあったとしても,

DIV {
    font-weight: bold;
    font-style: italic;
    font-size: 12pt;
    line-height: 20pt;
    font-family: Times, serif;
}

これを font でまとめるとかなりの省略が可能。

DIV { font: bold italic 12pt/20pt Times, serif; }

この状態で "Grouping font properties" と書くと以下のようになる。

Grouping font properties

いろいろなフォントを使って Web ページをデザインしても,見る側にそのフォントがなければ制作者の意図どおりに表示されない。欧文フォントは Microsoft のページなどからダウンロードできる。

配置の省略形

フォントと同じように,マージンもまとめて指定できる。順序は top,right,bottom,left の順に空白で区切って記述する。

DIV { margin: 10pt 30pt 10pt 30pt; text-align: right; }

右マージンを 30pt とってあるが,そこに文字列を右寄せする。

Grouping margin properties

同様に background などにも省略形が用意されている。詳細については Step forward CSS の短縮属性を参照されたい。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版