Home » ★スタイルシートリファレンス

★スタイルシートリファレンス

font …… フォントに関する指定をまとめて行う
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9
Netscape4Netscape6Netscape7Netscape8
Opera6Opera7Opera8Opera9Opera10
Firefox1Firefox2Firefox3Firefox4
Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告



fontプロパティは、フォントに関する指定をまとめて行う際に使用します。
指定できるのは、
font-style
font-variant
font-weight
font-size
line-height
font-familyの6つのプロパティの値です。

各プロパティの値を指定する際の順序は以下のように決まっています。
このうち
font-size
font-family
省略することができません。

  1. font-stylefont-variantfont-weight(順不同)
  2. font-size
  3. line-height
  4. font-family

line-heightを指定する場合には、以下の例のようにline-heightの値を記述する前にスラッシュ( / )で区切ります。

font: bold large/150% “MS 明朝”;

尚、fontプロパティを使用すると、フォント関連のスタイルが一旦リセットされてから、
fontプロパティで指定した値が適用される点に注意してください。
省略した値は、親要素に指定されている値を継承するのではなく初期値に戻されます。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample {font: bold large/150% “MS 明朝”;
}

HTMLソース

<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”sample”>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。<br>
太字・大きめ・行高150%・MS 明朝体を指定。
</p>
</body>
</html>

↓↓↓

ブラウザ上の表示

太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。
太字・大きめ・行高150%・MS 明朝体を指定。

■関連項目

font …… フォントに関する指定をまとめて行う
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.