文字の読みやすさを左右する設定
文字は同じ内容でもサイズやフォントによって読みやすさや印象が大きく変わります。
ここではfont-sizeやfont-familyなどのフォント関連プロパティを使って、情報を伝えやすい文字表現に整えるための基本的な考え方を確認していきます。
文字の種類
font-familyはどのフォントで文字を描画するかを指定するプロパティです。
丸みのあるゴシック体にすれば親しみやすい印象になり、細い明朝体にすれば落ち着いた雰囲気になるなど、同じ文章でもフォント選びによってサイト全体のトーンが変わります。
構文
セレクタ{
font-family:値;
}
font-familyの値は使いたいフォント名をカンマで区切って複数並べます。
左から順に環境にインストールされているものが探され、見つからなかった場合は最後に書いたsans-serifやserifなどの総称フォントが使われます。
環境ごとの差を減らしたいときは、候補をいくつか並べてフォールバックを用意しておくのが基本です。
コード例
<p class="mincho">フォントを明朝体にします。</p>
<p class="gothic">フォントをゴシック体にします。<p>.mincho{
font-family: 'MS Mincho', 'MS 明朝', 'Hiragino Mincho ProN', serif;
}
.gothic{
font-family: 'MS Gothic', 'MS ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
}出力例
フォントを明朝体にします。
フォントをゴシック体にします。
WindowsとMacでは、標準フォントであるゴシック体や明朝体を指定しても、見た目が変わることがあります。
font-familyで指定するフォント名は、フォントの見た目の名前ではなく、OSに登録されている正式なフォント名を指定する必要があります。
スペルを間違えてもエラーは表示されず、そのフォントは自動的にスキップされます。
フォント名が分からない場合は、自分のPCにインストールされているフォント一覧を確認し、表示されているフォント名をそのままコピーして使うのが確実です。
なお、OSに標準でインストールされているフォントをfont-familyで指定して表示するだけであれば、通常は著作権を気にする必要はありません。 ただし、Webフォントとして配布したり、フォントファイル自体を利用する場合は、フォントごとの利用条件を確認する必要があります。
また、OSによる表示の差をなくしたい場合は、Webフォントを利用する方法もあります。
文字サイズ
font-sizeは文字の大きさを決めるプロパティです。
見出しを大きくして存在感を出したり、本文をやや小さめにして情報量をまとめたりと、画面上の「声の大きさ」をコントロールする感覚で使います。
構文
セレクタ{
font-size:値;
}font-sizeの値には下表のような値を使用します。
| 単位 | 指定方法 | 説明 |
|---|---|---|
| px | 任意の数値px | 画面ピクセル基準で、デザイン通りのサイズになります。 例：16px |
| em | 任意の数値em | 親要素のフォントサイズ×値（小数点可）。 ネストすると累積する点に注意が必要です。 例：1.2em |
| rem | 任意の数値rem | htmlのフォントサイズ基準。 値は小数点可。 例：1.5rem |
| % | 任意の数値% | 親のフォントサイズ×値（パーセンテージ）。 例：120% |
コード例
<p>フォントサイズを20pxに変更します。</p>
<p class="font-sizing">フォントサイズをhtmlのフォントサイズを1.2remに変更します。</p>
p{
font-size: 20px;
}
.font-sizing{
font-size: 1.2rem;
}出力例
フォントサイズを20pxに変更します。
フォントサイズをhtmlのフォントサイズを1.2remに変更します。
font-sizeを極端に大きくすると行間とのバランスが崩れ、小さくしすぎると可読性が下がります。
emとremは少しわかりにくいので、動画で解説します。
remはhtml（ルート）の文字サイズを基準にし、emは親要素の文字サイズを基準にします。
emは入れ子の影響でサイズが変わりやすいので、使う場面には注意しましょう。
のちに説明しますが、CSSリセットを使用している場合は、ブラウザの初期設定が変更され、文字サイズが異なることがあります。
文字の太さ
font-weightは文字の太さを変えるプロパティです。
見出しを太くしてページの中で目立たせたり、本文を少しだけ太くして視認性を上げたりと、文字に強弱を付けて情報の重要度を伝える役割を持っています。
構文
セレクタ{
font-weight:値;
}
font-weightにはnormalやboldなどのキーワードのほか、100から900まで100区切りで数値指定できます。
日本語フォントでは数値の差が分かりにくいため、当サイトではキーワード指定のみ紹介します。
コード例
<p class="bold">フォントをキーワードで太字にします。</p>
<h2 class="normal">見出しを細くします。</h2>.bold{
font-weight: bold;
}
.normal{
font-weight: normal;
}出力例
フォントを太字にします。
見出しを細くします。
pタグの標準フォントは通常normalのため、boldを指定すると太くできます。
h2タグは通常太字なのに細くできます。
一般的には、見出しは太字で使うことが多いため、本文を太字にしたい場面で bold を指定するケースがよくあります。
文字の色
文字の色は読みやすさだけでなく印象にも大きく影響します。
colorはテキストをどの色で描画するかを決めるプロパティで、強調したい語句に鮮やかな色を使ったり、本文を落ち着いた色にして全体の統一感を出したりするなど、情報の伝え方を調整するために活用します。
構文
セレクタ{
color:値;
}colorの値には下表のような色指定を使用します。
| 値 | 指定方法 | 説明 |
|---|---|---|
| キーワード | redなど | 定義された名前付きの色。 可読性が高く小規模な指定に便利で約140色ある。 |
| 16進数 | #000000～#ffffff | 付録：色の指定方法参照 ※別タブが開きます。 |
| 省略16進数 | #000～#fff | |
| 16進数＋アルファ | #00000000～#ffffffff | |
| rgb() | rgb(0～255,0～255,0～255) | |
| rgba() | rgba(0～255,0～255,0～255,0～1) |
コード例
<p class="keyword">フォントカラーをgreenにします。</p>
<p class="sixteen">フォントカラーを#00ff99に変更します。</p>
<p class="rgb">フォントカラーをrgb(100,50,15)に変更します。</p>
<p class="rgba">フォントカラーをrgba(200,0,50,0.8)に変更します。</p>.keyword{
color: green;
}
.sixteen{
color: #00ff99;
}
.rgb{
color: rgb(100,50,15);
}
.rgba{
color: rgba(200,0,50,0.8);
}出力例
フォントカラーをgreenにします。
フォントカラーを#00ff99に変更します。
フォントカラーをrgb(100,50,15)に変更します。
フォントカラーをrgba(200,0,50,0.8)に変更します。
colorは値を1つ指定するだけのシンプルなプロパティです。
赤や青などの基本色はキーワードで手軽に指定でき、より細かい色味を調整したいときはRGBやHSLによる指定が向いています。
透過させたいときはAの値を加えることで背景との馴染みを調整できます。
キーワードは簡単ですが環境によって微妙に見え方が変わる場合があるため、再現性を重視する場面では数値指定のほうが望ましいことがあります。