昔はWebサイトの閲覧といえばPCが主流でしたが、現在ではスマホやタブレットなど多様なデバイスが使われるようになりました。
そのため、さまざまな閲覧環境を前提にWebサイトを設計する必要があります。
ここでは、「CSSによる文字サイズの指定」の応用編として、画面に合わせて文字サイズを動的に変更する方法を解説します。
文字サイズを動的に変更する方法
CSSで文字サイズを動的に変更する主な方法は、
の3つです。
vw・vhで指定する方法
vwとvhは、画面の表示領域（ビューポート）を基準にしたCSSの単位です。それぞれビューポートの幅と高さの1%に相当します。例えば100vwと指定した場合、PCであればブラウザのウィンドウ幅いっぱい、スマホであれば画面の横幅いっぱいのサイズとなります。100vhと指定した場合は、ブラウザのウィンドウの高さ、またはスマホの画面の高さいっぱいのサイズになります。
また、vwのみ指定した場合の高さ、vhのみ指定した場合の幅は、ブラウザが自動調整します。
※コンテンツの内容が画像や動画の場合はアスペクト比を維持して調整、divやpなどブロック要素の場合はテキストの量に合わせて調整されます
例）style.css
| .size_5vw { font-size: 5vw; } .size_5vh { font-size: 5vh; } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <p class=”size_5vw”>文字サイズは5vwです</p> <p class=”size_5vh”>文字サイズは5vhです</p> </body> </html> |
ブラウザでの表示結果（ウィンドウサイズ：800×600）
この場合、5vw=800×0.05=40px相当、5vh=600×0.05=30px相当です。
ブラウザでの表示結果（ウィンドウサイズ：400×600）
この場合、5vw=400×0.05=20px相当、5vh=600×0.05=30px相当です。
ブラウザでの表示結果（ウィンドウサイズ：800×300）
この場合、5vw=800×0.05=40px相当、5vh=300×0.05=15px相当です。
vwやvhを使うと、CSSによるレスポンシブな文字サイズ設定が簡単に実現できますが、いくつかの注意点があります。
・画面が小さいデバイスの場合、文字が極端に小さくなり、可読性が低下することがある
・vwは画面幅に依存するため、スマホを横向きにすると文字が突然大きくなる
・親要素のサイズは無視されるので、画面全体のレイアウトが崩れやすい
このように、vwやvhでの文字サイズ指定は細かい配慮が難しいため、次に解説するclamp関数と組み合わせて使用するのがおすすめです。
clamp関数で指定する方法
clamp() はCSSの関数（値を動的に計算する仕組み）で、ある値に対して、最小値と最大値を指定することができます。決められた範囲内に収めて文字サイズを調整したいときに便利です。
| font-size: clamp(最小値, 基準値, 最大値) |
例えば、次のように文字サイズを指定した場合、画面幅の5%が文字サイズの基準となり、文字サイズの計算結果が16px未満になる場合は最小値の16px、48pxより大きくなる場合は最大値の48pxで調整されます。
| font-size: clamp(16px, 5vw, 48px) |
※基準値には%やremなどの単位を指定することもできますが、動的なサイズ変更を意図する場合はvw,vhを使用するのが一般的です。
例）style.css
| .size_5vw_clamp { font-size: clamp(20px,5vw,40px) } .size_5vh_clamp { font-size: clamp(20px,5vh,40px) } |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <p class=”size_5vw_clamp”>文字サイズは5vw(最小20px, 最大40px)です</p> <p class=”size_5vh_clamp”>文字サイズは5vh(最小20px, 最大40px)です</p> </body> </html> |
ブラウザでの表示結果（ウィンドウサイズ：980×300）
通常は5vw=980×0.05=49px相当、5vh=300×0.05=15px相当ですが、clamp関数で指定した最小値・最大値の範囲外のため、それぞれ40pxと20pxに調整されています。
ブラウザでの表示結果（ウィンドウサイズ：500×980）
通常は5vw=500×0.05=25px相当、5vh=980×0.05=49px相当です。vwは範囲内の文字サイズのため25pxのままですが、vhは40pxに調整されています。
このclamp関数は、font-size以外のCSSプロパティ（widthやpaddingなど）にも使用できるため、レスポンシブデザインを実現するうえで非常に便利な機能のひとつです。
メディアクエリで指定する方法
メディアクエリとは、デバイスの画面サイズや向きなどに応じて、適用するスタイルを切り替えることができる仕組みです。例えば「ビューポートの幅が480px以下」といった条件を指定しておくと、ユーザーの閲覧環境が条件と一致したときのみCSSを適用できます。
メディアクエリの基本的な構文は次のとおりです。メディア種別だけ、もしくはメディア特性だけ記述する形でもOKです。
| @media メディア種別 and (メディア特性) { /* CSSのスタイルを記述 */ } @media メディア種別 { @media (メディア特性) { |
メディア種別は「どの種類の媒体に対してCSSを適用するか」を指定するもので「all」「print」「screen」などの種類があります。省略した場合はallが適用されます。
| メディア種別 | 用途 | 使用例 |
|---|---|---|
| all | すべての媒体 | @media all and (min-width: 600px) { … } |
| 印刷・印刷プレビュー | @media print { … } | |
| screen | PCやスマホなどの画面表示 | @media screen and (min-width: 600px) { … } |
例）style.css
| @media screen { p { font-size: 30px; color: blue; } } @media print { |
例）index.html
| <html> <head> <title>ページのタイトル</title> <style> @import url(style.css) </style> </head> <body> <p>画面では30pxの青字、印刷では50pxの赤字になります</p> </body> </html> |
ブラウザでの表示結果
印刷プレビューでの表示結果
メディア特性には画面の幅や高さ、画面の方向などを指定します。
例えば、ビューポートの幅が600px以上の場合に文字サイズを大きくしたい場合、メディアクエリは次のように記述します。
| /* デフォルト(モバイル向け。画面幅が600px未満) */ body { font-size: 20px; } /* 画面幅が600px以上 */ |
※この例のように、デフォルトでモバイルデバイス向けのスタイルを記述し、特定の画面サイズ以上でPC向けのスタイルを上書きしていく手法を「モバイルファースト」と呼びます。
代表的なメディア特性は次のとおりです。
| メディア特性 | 説明 | 例 |
|---|---|---|
| width / height | ビューポートの幅・高さ | @media (width: 600px) |
| min-width / max-width | 幅の下限・上限 | @media (min-width: 768px) |
| min-height / max-height | 高さの下限・上限 | @media (max-height: 800px) |
| orientation | 画面の向き（portrait：縦方向 / landscape：横方向） | @media (orientation: landscape) |
※width / heightは、幅や高さがちょうど指定した値のときに適用されるメディア特性ですが、限定的な条件指定となるため、実務ではほとんど使用されません。
なお、widthとheightを同時に設定する場合、@media (width: 600px , height: 500px)のように1つのカッコ「()」に複数の値を入れたりすることはできません。
widthとheightを同時に設定する場合は、下記の様に論理演算子を使って、@media (width: 600px) and (height: 500px) と記述する必要があります。
論理演算子（and, orなど）を使うと、ひとつのメディアクエリに対して、複数のメディア特性をまとめて指定することができます。
メディアクエリで使用できる代表的な論理演算子は、次のとおりです。
| 論理演算子 | 説明 | 例 |
|---|---|---|
| and | 複数の条件がすべて満たされた場合にスタイルを適用します。 | @media screen and (min-width: 768px) and (orientation: landscape) |
| カンマ(,) またはor | 複数の条件のうち、いずれか一つでも満たされた場合にスタイルを適用します。 ※orは後から追加された仕様で、一般的にはカンマが広く使われています | @media screen and (max-width: 500px), print または @media screen and (max-width: 500px) or print |
| not | 指定された条件が満たされない場合にスタイルを適用します。特定のメディア種別を除外したい場合に便利です。 | @media not print |
| /* 画面幅が600px以上、800px以下の場合 */ @media (min-width: 600px) and (max-width: 800px) { body { font-size: 30px; } } |
| /* 画面幅が800px以下、または画面が縦向きの場合 */ @media (max-width: 600px), (orientation: portrait) { body { font-size: 30px; } } /* カンマとorは同じ意味を表します。(通常はカンマ推奨) */ |
メディアクエリ内で使用する論理演算子の数に制限はありませんが、複雑な条件式を作るとCSSの可読性が低下し、スタイルの修正やデバッグが難しくなります。目安として2〜3個の論理演算子を組み合わせる程度に留めておき、複雑になる場合はメディアクエリを分けて記述しましょう。