スマホの文字サイズは、端末やフォント、読者、表示距離で見え方が変わります。「必ず16px」と固定せず、本文の初期値を読みやすい大きさから始め、行間、行長、左右余白、拡大時のリフローを合わせて確認します。
本文文字と行間の基準を決める
:root {
font-size: 100%;
}
body {
font-size: 1rem;
line-height: 1.7;
}
h1 {
font-size: clamp(1.75rem, 6vw, 2.75rem);
line-height: 1.25;
}ルート文字をブラウザ既定へ合わせ、本文はremで指定するとユーザー設定を反映しやすくなります。line-heightは単位なしにすると要素の文字サイズに応じて計算されます。日本語本文では1.6〜1.9程度を試し、実際のフォントで詰まりと間延びを確認します。
一行を長くしすぎない
.article {
max-width: 68ch;
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem);
}chは英字幅基準なので、日本語で必ず同じ文字数にはなりません。上限の起点として使い、430px、390px、360px、320pxなどで折り返しを確認します。
余白をclampで調整する
.section {
padding-block: clamp(2.5rem, 8vw, 5rem);
}
.article p + p {
margin-top: 1em;
}
.article h2 {
margin-top: 2.2em;
margin-bottom: .8em;
}clamp()は最小値、可変値、最大値を指定できます。画面が狭いときに余白が消えず、広い画面で過剰に伸びない設計に向きます。見出し直前の余白を段落間より大きくすると、内容のまとまりが分かりやすくなります。
固定高さを避ける
文字が2行になる可能性のあるカードやボタンへheightを固定すると、拡大時に文字が切れます。min-heightとpaddingを使い、内容に応じて伸びるようにします。
拡大・リフロー・タップ操作をQAする
W3CのWCAG理解文書では、支援技術なしで200%まで文字を拡大しても内容や機能が失われないことを説明しています。ブラウザズーム、OS文字サイズ、横幅320CSS px相当で、横スクロール、重なり、切れを確認します。
.button {
display: inline-flex;
min-height: 48px;
padding: .75rem 1.25rem;
align-items: center;
justify-content: center;
}
@media (max-width: 480px) {
.button { width: 100%; }
}web.devはタップ対象の実用的な目安として約48pxを紹介しています。ボタン同士の間隔も確保し、リンク文字だけの小さな対象は行間と周囲の余白を確認します。
viewport設定を確認する
<meta name="viewport" content="width=device-width, initial-scale=1">viewportメタがないとスマホが広い仮想幅で表示し、CSSのブレークポイントが意図どおり働きません。user-scalable=noやmaximum-scale=1でズームを妨げないでください。
よくある質問
本文は16pxで十分ですか？
起点にはできますが、フォントと読者で異なります。実機、拡大、行間、コントラストとセットで確認します。
pxを使ってはいけませんか？
境界線などにpxは使えます。文字はユーザー設定を反映しやすいremを基本にし、用途で選びます。
余白を減らすと情報量が増えますか？
表示量は増えても、まとまりが分かりにくくなる場合があります。段落、見出し、ボタンの優先順位を保ちます。
まとめ
スマホCSSは、remの本文、単位なしline-height、clampの余白、内容に応じる高さを起点にします。320px幅、200%拡大、タップ操作まで確認し、文字が切れない実装にしましょう。
確認した公式資料
- MDN：font-size（2026年8月22日確認）
- MDN：viewport meta（2026年8月22日確認）
- W3C：Resize text（2026年8月22日確認）
- W3C：Text Spacing（2026年8月22日確認）
- web.dev：Accessible tap targets（2026年8月22日確認）
関連記事：ホームページクエスト
コメント