フォントを指定しなかった場合
閲覧する環境によって、系統の異なるフォントが表示され、デザインに統一感が無くなる。
font-family プロパティ
フォントの種類を指定するプロパティ。
font-family:sans-serif; でゴシック系フォント、font-family:serif; で明朝系フォントを指定する。
値
具体的なフォント名、おおまかな分類名を指定できる。
- [,](カンマ)で区切って複数指定できる。
- より前に指定されたフォントが優先される。
- フォント名が日本語もしくはフォント名に、スペースが含まれる場合、フォント名を、[‘](シングルクォーテーション)もしくは、[“](ダブルクォーテーション)で囲む。
font-weight プロパティ
フォントの太さを指定するプロパティ。
適用要素 | 全ての要素 |
値の継承 | ○ |
初期値 | normal |
指定可能な値 | normal : 標準の太さ。 |
bold : 太字にする。 | |
lighter, bolder : 基準のフォントより、1段階、細い、もしくは、太いフォントにする。 | |
100, 200, 300, 400, 500, 600, 700, 800, 900 9段階に太さを指定。 標準=400 太字=700 |
|
inherit : 親要素と同じ値。 |
font-style プロパティ
フォントファミリーの中で、イタリック体、斜体を指定したい場合に用いるプロパティ。
適用要素 | 全ての要素 |
値の継承 | ○ |
初期値 | normal |
指定可能な値 | normal : 標準のフォントに設定。 |
italic : フォントファミリーの中のイタリック体に設定。
イタリック体が無ければ、斜体に分類されるフォント、それも無い場合、標準のフォントを斜めに表示させる。 |
|
oblique : フォントファミリーの中で、oblique(斜体)に分類されるフォントに設定。
oblique に分類されるフォントが存在しない場合、標準のフォントを斜めに表示させる。 |
|
inherit : 親要素と同じ値にする。 |
line-height プロパティ
行の高さを指定するプロパティ。
プロパティの値は、数値、%、px、em、ex などで指定できる。
em :文字の高さを、1em とした単位。
ex :小文字のx の高さを1ex とした単位。
行間 = 行の高さ(line-height) ー 文字の高さ(font-size) となる。
適用要素 | 全ての要素 |
値の継承 | ○ |
初期値 | normal |
指定可能な値 | normal : フォントに合わせて適切に設定。 |
実数:実数値にフォントのサイズを掛けた値が高さとして設定される。 | |
実数+単位:その値で高さを設定する。 | |
実数+% : フォントサイズのこの割合での高さが、設定される。 | |
inherit : 親要素と同じ値。 |
font プロパティ
フォントの種類、太さ、斜体、行の高さなど、フォント関連のプロパティの値を、まとめて指定できるプロパティ。
値の指定順序
必要な値をスペースで区切って指定する。
ただし、font-size と font-family の値は、省略できない。
省略した値は、初期値が適用される。
- font-style の値
- font-weight の値
- font-size の値
- line-height の値
- font-family の値
font-style と font-weight の順序は、逆でも構わない。
line-height の値を指定する場合は、font-size との間を[/](スラッシュ)で区切る必要がある。
text-decoration プロパティ
テキストに、下線、上線、取り消し線を引いたり、点滅させるプロパティ。
半角スペースで区切ることにより、複数の値を同時に指定できる。
(指定順序は、自由。)
適用要素 | 全ての要素 |
値の継承 | × |
初期値 | none |
指定可能な値 | none : 通常の状態。(他の値と同時に指定できない。) |
underline : 下線を付ける。 | |
overline : 上に線を付ける。 | |
line-through : 取り消し線を付ける。 | |
blink : テキストを点滅させる。 | |
inherit : 親要素と同じ値にする。 |
vertical-align プロパティ
縦方向の表示位置を指定する。
指定可能な値
baseline,top,middle,bottom,text-top,text-bottom,super,sub,パーセント値、数値
このプロパティに関する一連の記事は、「10日でおぼえるCSS/CSS3入門教室」を大きく参考にした記事である。
CSS に限らず、この「10日でおぼえる」は、初心者を対象に、1つ1つ積み上げながら、系統的に学べる良書です。
尚、「10日でおぼえるHTML5入門教室」は、Web制作者向けというより、Webアプリケーションの制作を目的としています。