目次
Webページの文字の大きさ、適切に設定できていますか？文字のサイズが適切に設定されていないと、ユーザーの離脱をまねく恐れがあります。そのため「font-size」を使って、ユーザビリティの高いWebページを作成する必要があるのです。
この記事では、CSSでフォントサイズを設定する「font-size」の使い方について詳しく解説します。注意点や記述方法についても紹介するため、Webページを作成する際の参考にしてみてください。
CSSでフォントサイズを指定するには？
CSSでフォントサイズを指定する方法を紹介します。
font-sizeプロパティを使用
CSSで文字の大きさを指定するためには、文字サイズを調整するプロパティ「font-size」を利用します。そのままの英語訳のため、わかりやすいですね。
ほかにも文字関連のプロパティとして、以下のようなものがあります。
- font：フォントに関する一括指定を行う
- font-style：イタリック体・斜体・立体などフォントのスタイルを指定する
- font-variant：フォントをスモールキャップにする
- font-weight：フォントの太さを指定する
- font-stretch：フォントの拡大・縮小を指定する
- font-family：フォントの種類を指定する
font-size以外のプロパティも使いこなして、見栄えの良いWebページを目指しましょう。
font-sizeの基本書式
font-sizeの基本書式は、以下のとおりです。
セレクタ{
font-size : 値 ;（文字のサイズを指定する）
}
値には、文字のサイズを指定します。具体的にどんな値が設定できるのか、詳しくは後ほど紹介します。
適切なフォントサイズの単位を選ぶ
フォントサイズを指定するにあたって重要なことは、様々なデバイスを考慮したうえで適切な単位を選ぶことです。ITの発展と共に、Webページが表示されるデバイスの種類が増えていっています。パソコンやスマホ、タブレットなど、スクリーンの大きさや解像度は様々です。さらにはOSによっても、表示が異なる場合もあります。
単位を選ぶ際は1つの表示デバイスだけではなく、様々なデバイスで表示されることを意識します。プレビューする際も、自分のデバイスできれいに表示されたからといって油断しないように気を付けましょう。
CSSでフォントサイズを指定する方法
CSSでフォントサイズを指定する方法を3つ紹介します。
- パーセント値と単位で指定
- 絶対キーワード値で指定
- 相対キーワード値で指定
それぞれの指定方法の違いを理解して、適切な指定方法を選べるようにしましょう。
パーセント値と単位で指定
文字の大きさを「数値+単位」で指定する方法です。主に用いられる単位として、以下が挙げられます。
| 単位 | 効果 | 使用例 |
| px | フォントサイズをpxで指定 | font-size : 30px ; |
| em | 親要素を基準にしてemで指定 1emで親要素と同じフォントサイズ |
font-size : 1em ; |
| rem | ルートを基準にしてremで指定 1remでルートと同じフォントサイズ |
font-size : 1rem ; |
| vw | 表示画面の幅を基準としてvwで指定 50vwで画面幅の50%のフォントサイズ |
font-size : 50vw ; |
| vh | 表示画面の高さを基準としてvhで指定 50vhで画面高さの50%のフォントサイズ |
font-size : 50vh ; |
| % | 親要素を基準として%で指定 50%で親要素の50%のフォントサイズ |
font-size : 50% ; |
remはルートを基準とするとありますが、これはHTML内の要素が基準となります。そしてemとremは、階層の複雑さによって使い分けることをおすすめします。例えば階層が深くなりすぎると親要素を判別しにくくなるため、remを使用したほうが分かりやすいです。
絶対キーワード値で指定
絶対的なサイズのキーワード「medium」を基準として、文字の大きさを指定する方法です。mediumでは、ブラウザ標準の文字の大きさが適用されます。絶対キーワードは、7つあります。
| 絶対キーワード | 効果 | 使用例 |
| xx-small | mediumよりも3段階小さいフォントサイズを設定 | font-size : xx-small ; |
| x-small | mediumよりも2段階小さいフォントサイズを設定 | font-size : x-small ; |
| small | mediumよりも1段階小さいフォントサイズを設定 | font-size : small ; |
| medium | ブラウザ標準のフォントサイズを設定 | font-size : medium ; |
| large | mediumよりも1段階大きいフォントサイズを設定 | font-size : large ; |
| x-large | mediumよりも2段階大きいフォントサイズを設定 | font-size : x-large ; |
| xx-large | mediumよりも3段階大きいフォントサイズを設定 | font-size : xx-large ; |
相対キーワード値で指定
親要素を基準として、相対的なキーワードで文字の大きさを指定する方法です。相対キーワードは、2つあります。
| 相対キーワード | 効果 | 使用例 |
| larger | 親要素より1段階大きいフォントサイズで指定 | font-size : xx-small ; |
| smaller | 親要素より1段階小さいフォントサイズで指定 | font-size : x-small ; |
フォントサイズを指定する時の注意点
フォントサイズを指定する際の注意点を3つ紹介します。
- HTMLでフォントサイズを指定しない
- 絶対値と相対値の違いを理解しておく
- レスポンシブではpxを控える
それぞれの注意点について解説します。
HTMLでフォントサイズを指定しない
HTML内で文字の大きさを指定することはやめましょう。font-sizeをはじめとしたデザインを整えるタグは、HTML5.0で非推奨になっているためです。
非推奨タグは、今後廃止される要素や属性を指します。そのため、デザインに関する記述はCSSで行うことをおすすめします。
絶対値と相対値の違いを理解しておく
文字の大きさを設定する際は、絶対値と相対値を意識して使い分けられるようにしましょう。絶対値は他要素に左右されない値、相対値は他要素によって変化する値です。
単位の場合pxは絶対値、em・rem・vw・vh・%は相対値に当てはまります。例えばfont-sizeを30pxと指定すると、親要素やルート要素に関係なく30pxで文字が表示されます。
レスポンシブではpxを控える
レスポンシブの場合、pxを使用しないことをおすすめします。レスポンシブとは、パソコンやタブレットなど、異なるデバイスに合わせて表示を調整することを指します。
pxは絶対値のため、文字の大きさはほかの要素に関係なく指定されたpx値になります。そのためレシポンシブに記述するとなると、pxの値を何度も変更しなければなりません。時間も労力も必要となるため、remなどの一括変更が容易な指定方法を用いましょう。
適切なフォントサイズで見やすいページをデザインしよう
CSSで文字の大きさを指定する際「font-size」が用いられます。指定方法は、パーセント値と単位で指定・絶対キーワード値で指定・相対キーワード値で指定の3つです。指定方法の違いを理解して、適切な方法を選ぶことが重要です。
文字の大きさを指定する際の注意点は、HTMLで記述すること・絶対値と相対値の違いを理解すること・レスポンシブではpxを控えることです。font-sizeはCSSの基礎的なプロパティのため、注意点を踏まえたうえで使いこなせるようになりましょう。
