TOP ＞ スタイルシートで文字をデザイン ＞ フォント関連のプロパティをまとめて設定する
フォント関連のプロパティをまとめて設定する
スタイルシートで文字デザインの締めは、フォント関連のプロパティ6種類をまとめて設定する方法です。「font」プロパティを使用します。
指定できるプロパティはfont-style、font-variant、font-weight、font-size、 line-height、font-familyの6種類です。
「font」プロパティの後に指定できる各プロパティの値を入力するのですが、順番に多少のルールがあります。
先頭の3つのプロパティ（font-style、font-variant、font-weight）は、順不同で省略可能です。 省略するとすべてデフォルトを指定したことになります。
次のfont-sizeは必須です。必ず指定してください。次のline-heightは省略可能です。ただし、 line-heightを指定する場合はfont-sizeとline-heightの間に 「/」を入れます。
最後にfont-familyを指定しますが、これも省略できません。
フォント関連のプロパティをまとめて設定する。
【書き方】
font : font-styleの値 font-variantの値 font-weightの値 font-sizeの値 / line-heightの値 font-familyの値 ;
"フォント関連のプロパティをまとめて設定する"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 .c1{font: italic small-caps bold 18px/25px serif; background-color: #ff9999;} .c2{font: 14px sans-serif; background-color: #9999ff;} 【HTML本文】 <html> <head> <title>フォント関連のプロパティをまとめて設定するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/222.css" type="text/css"> </head> <body bgcolor="silver"> <p>フォント関連のプロパティをまとめて設定しています。</p> <p class="c1">この段落はfontプロパティを使って、文字を斜体・スモールキャップ・太字・文字のサイズを18px・1行の高さを25px・フォントをセリフ付きにしてます。</p> <p class="c2">この段落はfontプロパティを使って、文字のサイズを14px・フォントをセリフなしにしています。その他の値に関しては省略しているので、デフォルト値になっています。</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
