CSS
仕様の表記CSS1 --- CSS Level 1、CSS Level 2
で定義されている属性と値
CSS2 --- CSS Level 2
で定義されている属性と値
CSS仕様: CSS1
値 | 機能 | Windows | Macintosh |
serif | 明朝系のフォント | IE4以降 NS6以降 | IE4以降 NS6以降 |
sans-serif | ゴシック系のフォント | IE4以降 NS6以降 | IE4以降 NS6以降 |
cursive | 草書体(筆記体)のフォント | IE4以降 NS6以降 | IE4以降 NS6以降 |
fantasy | 装飾的なフォント | IE以降 NS6以降 | IE4以降 NS6以降 |
monospace | 等副フォント | IE3以降 NS4以降 | IE3以降 NS4以降 |
適応要素 :すべてのエレメント
継承 :する (デフォルト値=ブラウザ依存)
テキストにフォントを設定し、見栄えを良くしたいのは制作者ならみな同じ感覚を持っています。しかしながら、ユーザ環境は Windows、Macintosh、UNIX系と千差万別で、OSによっては同じフォントファミリ名でも異なることすらあります。世界中に存在するフォントは多種多様であり、それらを1つの規則に基づき定義することは至難の業です。例えば、斜体の文字1つとっても、「italic」「Oblique」「Slanted」「Incline」「Cursive」「Kursiv」
等が存在し、一意にこれと言って決められないのが実状です。
<サンプル>
p { font-family: Tahoma,"MS UI Gothic",Osaka,sans-serif }
値をカンマ "," で区切って複数設定します。また MS UI Gothic
のようにファミリ名に空白がある場合は、ダブルコーテーションで囲むようにしないと、ブラウザが無視する場合があります。
値には、フォント名を設定する方法とフォントファミリの系統名で設定する方法があります。設定したフォントがユーザ側にない場合は、設定したフォントに近いフォントになったり、スタイルシートの指定が無視されてブラウザの設定されてる初期値のフォントで表示されたりします。
CSS仕様: CSS1
値 | 機能 | Windows | Macintosh |
数値+単位 | 16px(ピクセル)12pt(ポイント)など | IE3以降 NS4以降 | IE3以降 NS4以降 |
数値+% | 親要素のフォントサイズに対する割合で指定する | IE4以降 NS4以降 | IE4以降 NS4以降 |
smaller | 親要素の値より一段小さくする | IE4以降 NS4以降 | IE4以降 NS4以降 |
larger | 親要素の値より一段大きくする | IE4以降 NS4以降 | IE4以降 NS4以降 |
xx-small | 標準値の値より一番小さくする | IE4以降 NS4以降 | IE4以降 NS4以降 |
x-small | 標準値の値より2回り小さくする | IE4以降 NS4以降 | IE4以降 NS4以降 |
small | 標準値の値より1回り小さくする | IE4以降 NS4以降 | IE4以降 NS4以降 |
medium | 標準値 | IE4以降 NS4以降 | IE4以降 NS4以降 |
large | 標準値の値より1回り大きくする | IE4以降 NS4以降 | IE4以降 NS4以降 |
x-large | large の値より1回り大きくする |
IE4以降 NS4以降 | IE4以降 NS4以降 |
xx-large | 標準値の値より1番大きくする | IE4以降 NS4以降 | IE4以降 NS4以降 |
CSS仕様: CSS1
値 | 機能 | Windows | Macintosh |
normal | 標準 | IE3以降 NS4以降 | IE3以降 NS4以降 |
italic | イタリック体 (斜体文字) | IE3以降 NS6以降 | IE3以降 NS6以降 |
oblique | 斜体 | IE4以降 NS6以降 | IE4以降 NS6以降 |
適応要素 :すべてのエレメント
継承 :する (デフォルト値 = normal
)
これは normal の字体です。
これは itaric の字体です。
これは oblique の字体です。
CSS仕様: CSS1
値 | 機能 | Windows | Macintosh |
normal | 標準 (400と同じ/デフォルト) | IE4以降 NS4以降 | IE4以降 NS4以降 |
bold | 強調 (700と同じ) | IE3以降 NS6以降 | IE3以降 NS6以降 |
bolder | 現在有効な値より一段階太くする | IE4以降 NS6以降 | IE4以降 NS6以降 |
lighter | 現在有効な値より一段階細くする | NS6以降 | IE5以降 NS4以降 |
100〜900 | 標準を400として100〜900まで100刻みで太さを指定する Sample13 | IE4以降 NS6以降 | IE4以降 NS6以降 |
CSS仕様: CSS1
値 | 機能 | Windows | Macintosh |
normal | 標準(正体) | 未実装 | 未実装 |
ultra-condensed extra-condensed condensed semi-condensed |
normalに対し semi-condensed 〜ultracondensed まで段階的に文字幅を狭くする | 未実装 | 未実装 |
ultra-expanded extra expanded expamded semi-expanded |
normalに対し semiexpanded 〜ultra-expanded まで段階的に文字幅を広くする | 未実装 | 未実装 |
narrower | 親要素の幅より一段階狭いフォント | 未実装 | 未実装 |
wider | 親要素の幅より一段階広いフォント | 未実装 | 未実装 |
CSS仕様: CSS1
値 | 機能 | Windows | Macintosh |
アスペクト値 | 小文字 [x] の高さ÷フォントサイズ | 未実装 | 未実装 |
none | 調整しない | 未実装 | 未実装 |
CSS仕様: CSS1
値 | 機能 | Windows | Macintosh |
normal | 標準 (デフォルト値) | IE4以降 NS6以降 | IE4以降 NS6以降 |
small-caps | スモールキャップのフォントを設定する | IE4以降 NS6以降 | IE4以降 NS6以降 |
適応要素 :すべてのエレメント
継承 :する (デフォルト値 = normal
)
スモールキャップとは小文字が大文字を小さくしたような形状をしている種類のフォントです。このプロパティは要素内のフォントとしてスモールキャップを設定します。
<ul style="font-size: large"> <li>font-variant: normal <li style="font-variant: small-caps">font-variant: small-caps </ul>
サンプルでは小文字が、variant
属性によって大文字で表記されます。