フォント・テキスト関連の主なプロパティ。

CSS(カスケーディングスタイルシート)でのフォント及びテキスト関連のプロパティ(属性)について、主なものについて解説します。

以下の解説では値について一部解説を省略しております。詳細はCSSリファレンス内の各プロパティの記事をご覧ください。

`font-family` プロパティ(使用するフォント)。

font-family プロパティとは、使用するフォントです。

実際に使用するフォントだけでなく、使用したいフォントの系統を指定する事で、想定していないプラットフォームでも適切なフォントが撰ばれる可能性が高まります。

font-family プロパティの主な値としては、以下のものがあります。

font-family プロパティは指定なき場合には上位要素から継承されます。

また、font-family プロパティは、他のプロパティとともに font プロパティで一括指定する事も出来ます。

`font-family` プロパティに於ける注意事項。

ウィンドウズ Meのインターネットエクスプローラでは、font-family プロパティの sans-serif 値が正しく認識出来ずに日本語文字が化ける不具合があります。
このため、sans-serif 値(ゴシック体)を指定したい場合にはその前に "ＭＳＰゴシック", を記述するようにしましょう。
```
font-family: "ＭＳ Ｐゴシック", sans-serif;
```
また、キーワードを適切にしてしておかないと、該当するフォントを持たないOSでは指定が効かなくなってしまいますので、フォント名を指定する場合でも最後に適切なキーワードを記述するようにしましょう。
```
font-family: "AvantGarde Md BT", "S2Gつきフォント", sans-serif;
```

`font-size` プロパティ(フォントの大きさ)。

font-size プロパティとは、フォントの大きさです。

他のプロパティでも、○文字分の大きさと言う概念が出て来る場合がありますが、それらは全て font-size プロパティの値を基準としたものとなります。

font-size プロパティの主な値としては、以下のものがあります。

この他にもいろいろな値が指定出来ますが、好ましくない値や、一部で表示がおかしくなる不具合が予想されるものがあり、これらについては省略しました。詳しくはCSSリファレンスのfont-family プロパティをご覧下さい。

font-family プロパティは指定なき場合には上位要素から継承されます。

また、font-family プロパティは、他のプロパティとともに font プロパティで一括指定する事も出来ます。

`line-height` プロパティ(行の高さ)。

line-height プロパティとは、行の高さです。

この場合、文字自体の高さを差引いた値が行間の幅となります。

従って、line-height プロパティを一文字分より小さな値にしてしまうと、行の上下が重なってしまう事になりますので注意してください。

line-height プロパティの主な値としては、以下のものがあります。

この他にも指定出来る値がありますが、取敢えずこれだけ知っていれば充分なので省略しました。詳しくはCSSリファレンスのline-height プロパティをご覧下さい。

line-height プロパティは指定なき場合には上位要素から継承されます。

また、line-height プロパティは、他のプロパティとともに font プロパティで一括指定する事も出来ます。

`font-style` プロパティ(フォントのスタイル)。

font-style プロパティとは、フォントのスタイル、すなわちフォントを斜体にするか直立体にするかと言う事です。

font-style プロパティの主な値としては、以下のものがあります。

この他にも指定出来る値がありますが、日本語環境では余り意味が無いので省略しました。詳しくはCSSリファレンスのfont-style プロパティをご覧下さい。

font-style プロパティは指定なき場合には上位要素から継承されます。

また、font-style プロパティは、他のプロパティとともに font プロパティで一括指定する事も出来ます。

`text-decoration` プロパティ(テキストの装飾)。

text-decoration プロパティとは、テキストの装飾スタイルです。

text-decoration プロパティの主な値としては、以下のものがあります。

この他にも指定出来る値がありますが、好ましい値が含まれるため省略しました。詳しくはCSSリファレンスの text-decoration プロパティをご覧下さい。

text-decoration プロパティは指定なき場合にはnone値(飾り無し)が採られます。

すなわち、text-decoration プロパティを指定しなかった場合、上位要素からの値の継承はありません。

また、font-style プロパティは、font プロパティでの一括指定は出来ません。

`font-weight` プロパティ(文字の太さ)。

font-weight プロパティとは、文字の太さです。

text-decoration プロパティの主な値としては、以下のものがあります。

この他にも指定出来る値がありますが、現実的には余り巧く機能しないため省略しました。詳しくはCSSリファレンスの font-weight プロパティをご覧下さい。

font-weight プロパティは指定なき場合には上位要素から継承されます。

また、font-weight プロパティは、他のプロパティとともに font プロパティで一括指定する事も出来ます。

`text-align` プロパティ(テキストの行揃え)。

text-align プロパティとは、テキストの配置、すなわちテキストの行揃えの指定です。

text-align プロパティの主な値としては、以下のものがあります。

この他にも指定出来る値があります。詳しくはCSSリファレンスの text-align プロパティをご覧下さい。

text-align プロパティは指定なき場合には上位要素から継承されます。

但し、text-align プロパティは、font プロパティでの一括指定は出来ません。

`text-align` プロパティに於ける注意事項。

text-align プロパティの対象となるのは、あくまでもテキストや画像などインラインで表示される要素のみです。

インラインで表示されずブロックの形で表示される要素は、text-align プロパティの影響を受けずに配置されるのが正しい取り扱いです。

HTML 5 ではインライン及びヴロックの概念はなくなりましたが、基本的にはフレージング内容要素とされる要素が対象となります。

しかし、インターネットエクスプローラの旧ヴァージョンでは text-align プロパティを与えた場合、一部を除いて内容となるブロックレヴェル要素についても同様に配置してしまいます。

`text-indent` プロパティ(テキストの字下げ)。

text-indent プロパティとは、テキスト一行目の字下げの指定です。

text-alignプロパティの主な値としては、以下のものがあります。

この他にも指定出来る値があります。詳しくはCSSリファレンスの text-indent プロパティをご覧下さい。

text-indent プロパティは指定なき場合には上位要素から継承されます。

但し、text-indent プロパティは、font プロパティでの一括指定は出来ません。

`font` プロパティ(フォント関連のプロパティの一括指定)。

font プロパティとは、フォント関連のプロパティの一括指定のための記述法です。

対象となるプロパティは以下の通りです。

font-style プロパティ(文字のスタイル)
font-weight プロパティ(文字の太さ)
font-size プロパティ(文字の大きさ)
line-height プロパティ(行の高さ)
font-family プロパティ(使用するフォント)

これらのプロパティへ与える値を半角空白(font-size　プロパティと line-height プロパティの間のみ /)で区切って記述します。

これらの値について個別に inherit 値(上位要素からの継承)を指定する事は出来ません。
font プロパティでの inherit 値はそれ一個のみが記述され、上記の全てプロパティの値を上位要素から継承すると言う指定になります。

font プロパティとして記述する場合、font-size プロパティ及び font-family プロパティ以外は省略出来ます。

省略されたプロパティは上位要素から継承された値となります(後述)。

例えば、

h1 {
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 200%;
    font-style: italic;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    text-decoraion: none;
    text-indent: 0;
    }

と言うプロパティ定義では、以下のように略記出来る事になります。

h1 {
    font: italic bold 200%/1em "ＭＳ Ｐゴシック", sans-serif;
    text-align: center;
    text-decoraion: none;
    text-indent: 0;
    }

`font` プロパティに於ける注意事項。

font プロパティとしての記述では、font-size プロパティ及び font-family プロパティ以外については、省略すると上位要素からの継承となります。

上記二つのプロパティは省略出来ません。

このため、これらのプロパティを個別に指定した後で、font プロパティを記述してしまうと、上位要素からの継承と言う値に上書きされてしまい、折角の個別の記述が無効になってしまいます。

ですから、くれぐれも font プロパティの前に対象となる個別のプロパティを記述しないようにしてください。