WEB作成の豆知識 -フォント関連-

CSS講座

フォントのスタイルを指定する場合に使用します。

指定可能な値は、normal と italic です。

このプロパティは、文字を斜体で表示させるときに使います。

フォントの太さを指定する場合に使用します。

指定可能な値は、normal と bold です。

このプロパティは、文字を太字で表示させるときに使います。

フォントの大きさを指定する場合に使用します。

フォントの大きさを指定します。フォントサイズを指定するのに使える単位は・・・CSSで使用する単位のページを参照してください。

まあ、基本的に %（パーセント）で指定をします。一部 pt（ポイント）、em、px（ピクセル）を使うぐらいでしょう。他の単位はまず使うことは無いでしょう。

サンプルを載せておきます。

行の高さを指定する場合に使用します。

このプロパティは見やすいページを作成するときに必須となるでしょう。行の高さを設定する＝行間を設定するということです。

基本的に、行の高さは %（パーセント）で指定するようにしてください。以下にサンプルを示します。

100%（規定値）: line-height: 100%;; 行の高さが１００％で表示されます。
行の高さが１００％で表示されます。
行の高さが１００％で表示されます。
行の高さが１００％で表示されます。
200%: line-height: 150%;; 行の高さが１５０％で表示されます。
行の高さが１５０％で表示されます。
行の高さが１５０％で表示されます。
行の高さが１５０％で表示されます。
300%: line-height: 300%;; 行の高さが３００％で表示されます。
行の高さが３００％で表示されます。
行の高さが３００％で表示されます。
行の高さが３００％で表示されます。

どうでしょう。150%ぐらいが読みやすい行間ではないでしょうか。いろいろ試してみるといいと思います。

使用するフォントを指定する場合に使用します。

フォントは、一般的なものを指定するようにしてください。インストールされているフォントは環境によって異なっています。指定したフォントがインストールされていない場合は、デフォルトのフォントで表示されることになります。

ページ全体のフォントを指定することはしない方がいいでしょう。フォントの指定は、あくまでもアクセントとして考えるべきです。例えば、ページのタイトルや見出しに使う程度でしょうか。

オススメフォントは以下のものです。

以上は、英字フォントです。日本語フォントは・・・わざわざ指定する必要は無いと思います。どの環境にもほぼ100%の確立でインストールされていて、アクセントに使えそうなフォントは無いような気がします。

また、CSS独特のフォントの指定方法もあります。

簡単に説明をすると、

という感じです。しかし、これらは環境によって異なる場合があります。（ブラウザによっては、serifはNew Times Roman、sans-serifはArial、cursiveは・・・という感じにフォントを割り当てることができます。）

それで、フォントを指定する際は、普通のフォントとCSSのフォント指定を両方書くことになっています。

とりあえず、書き方のサンプルを。

font-family: "Times New Roman", serif;

いくつも指定する場合は、コンマで区切って指定をします。この場合、Times New Romanが優先され、このフォントがインストールされていなかった場合には、serifのフォントで表示されることになります。

また、名前にスペースを含むフォントは "（ダブルクォーテーション）で囲むことになっています。