スタイルシートの利点は,フォントの種類やサイズを選択して自由にレイアウトできる点にあることはすでに学んだ。ページデザインをイメージしたとおりに実現するには,種類の多い属性を使いこなす必要がある。
フォントの指定にはたくさんの属性があり,これらを「;」で区切って指定する。
属性 | 意味 | 記述例 |
---|---|---|
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" と書くと以下のようになる。
いろいろなフォントを使って Web ページをデザインしても,見る側にそのフォントがなければ制作者の意図どおりに表示されない。欧文フォントは Microsoft のページなどからダウンロードできる。
フォントと同じように,マージンもまとめて指定できる。順序は top,right,bottom,left の順に空白で区切って記述する。
DIV { margin: 10pt 30pt 10pt 30pt; text-align: right; }
右マージンを 30pt とってあるが,そこに文字列を右寄せする。