まとめて指定 (詳細情報) |
対応 |
Internet Explorer 4 ↑
Netscape 4 ↑ (ブラウザの対応)
|
字体 |
font:★ ★ ★;
|
指定 |
★の部分に下記の スタイルシート の効果部分を複数指定することができます。
font系を全部まとめて指定できるので非常に便利なスタイルシートです。
各スタイルシートの効果の部分だけを記入するだけで反映させることが可能です。
複数記入する際には、半角スペースで区切る必要があります。
例 : style="font:italic bold 13px 'MS ゴシック';"
文字の大きさと、文章の行間を指定する場合は下記のように / で区切ります。
例 : style="font:italic bold 13px/25px 'MS ゴシック';"
(単位の種類: % px pt mm cm in pc em ex )
※ まとめて指定するには順番があるようです。
斜体 → small-caps → 太さ → 大きさ → 行間 → 種類 の優先順で書いてきます。
- 「italic」 斜体にするスタイルシートの効果。
- 「small-caps」 スモールキャップにするスタイルシートの効果。
- 「bold」 太字にするスタイルシートの効果。
- 「字の大きさ」 文字の大きくするスタイルシートの効果。(例:15px)
- 「行の高さ」 行の上下間の余白を決めるスタイルシートの効果。(例:24px)
- 「フォント名」 フォントを変更するスタイルシートの効果。(例:MS ゴシック)
|
効果 |
複数のfont系のスタイルシートを 簡単にまとめて指定できる。 |
例1 |
<div style="font:13px 'MS 明朝';"> サンプル用の文字 サンプル用の文字 サンプル用の文字 </div>
|
結果 |
サンプル用の文字 サンプル用の文字 サンプル用の文字
|
例2 |
<div style="font:italic 19px/29px;"> サンプル用の文字 サンプル用の文字 サンプル用の文字 </div>
|
結果 |
サンプル用の文字 サンプル用の文字 サンプル用の文字
|
例3 |
<div style="font:bold 22px/16px;"> HOMEPAGE HOMEPAGE HOMEPAGE </div>
|
結果 |
HOMEPAGE HOMEPAGE HOMEPAGE
|
解説 |
まとめて指定することによって、簡易にスタイルシートを反映できます。
まとめて指定するには優先順位があるようです。下記のような順にしてください。
斜体 → small-caps → 太さ → 大きさ → 行間 → 種類 の優先順で書いてきます。
|