CSSで画面サイズごとのフォントサイズを調整する方法を完全ガイド！初心者にもやさしく解説
生徒
「スマホとパソコンで文字の大きさを変える方法ってありますか？」
先生
「はい、CSSのメディアクエリという仕組みを使えば、画面の大きさに応じて文字サイズを変えることができますよ。」
生徒
「それって難しいんですか？初心者でもできますか？」
先生
「もちろんできます！一緒にステップバイステップでやってみましょう！」
1. なぜ画面サイズごとにフォントサイズを調整する必要があるの？
スマートフォンやタブレット、ノートパソコンや大きなディスプレイのパソコンなど、画面の大きさはバラバラです。あるデバイスでは読みやすくても、別の画面では文字が小さすぎて読みにくくなることがあります。
そこで活躍するのが「メディアクエリ」です。これは、CSS（スタイルシート）で「この画面サイズのときはこの設定を使ってね」と指示する機能です。
2. メディアクエリとは何かを初心者向けに解説
「メディアクエリ（media query）」とは、HTMLの見た目をコントロールするCSSの中で、「条件に応じてスタイルを切り替える」ためのしくみです。
たとえば、「画面の横幅が600ピクセル以下だったら文字サイズを小さくする」といった設定ができます。
こうすることで、スマホ・タブレット・パソコンのどれでも見やすいサイトを作ることができます。
3. 文字サイズを調整する基本的なCSSの書き方
まずは、メディアクエリを使わずに文字サイズを指定してみましょう。これはすべてのデバイスで同じ大きさになります。
<style>
p {
font-size: 16px;
}
</style>
<p>これはすべての画面で同じ文字サイズです。</p>
4. メディアクエリを使った文字サイズの変更方法
では次に、画面サイズによって文字サイズを変えるコードを書いてみましょう。
ここでは以下のように指定します：
- 画面幅が600ピクセル以下（スマホ）：文字サイズ14px
- 画面幅が601ピクセル以上（パソコン）：文字サイズ18px
<style>
p {
font-size: 18px;
}
@media screen and (max-width: 600px) {
p {
font-size: 14px;
}
}
</style>
<p>画面サイズに応じて文字サイズが変わります。</p>
5. メディアクエリの基本構文とキーワードの意味
メディアクエリには、いくつかのキーワードや構文がありますが、初心者がまず覚えておくべきポイントを紹介します。
@media：メディアクエリのスタートscreen：画面に対する設定であることを示すmax-width：最大の幅（これ以下のとき）を指定min-width：最小の幅（これ以上のとき）を指定
「max-width: 600px」というのは、「画面の横幅が600ピクセル以下のときに使ってね」という意味です。
6. よく使う画面サイズの目安とフォントサイズの例
実際のWebサイト制作では、以下のような画面幅でスタイルを切り替えることが多いです。
| デバイス | 画面幅 | フォントサイズの例 |
|---|---|---|
| スマートフォン | 〜600px | 14px〜16px |
| タブレット | 601px〜960px | 16px〜18px |
| パソコン | 961px〜 | 18px〜20px |
7. 小技：ルート要素で調整するremの使い方
少し応用ですが、「rem（レム）」という単位を使うと、全体の文字サイズを一括で調整しやすくなります。
remは、「ルート要素（html）」のフォントサイズを基準にする単位です。
<style>
html {
font-size: 16px;
}
@media screen and (max-width: 600px) {
html {
font-size: 14px;
}
}
p {
font-size: 1rem;
}
</style>
<p>この文章はremを使って表示しています。</p>
8. どの方法を選ぶべき？初心者へのおすすめ
まずはピクセル（px）で指定して、スマートフォンとパソコンの2つのサイズに対応するだけでも大丈夫です。
慣れてきたら、remや他の単位、さらに細かい画面サイズに対応した調整にもチャレンジしてみましょう。
CSSの勉強は一歩ずつ！まずはメディアクエリを使って、文字サイズを変える練習からはじめてみましょう。
まとめ
画面サイズごとにフォントサイズを調整する重要性
この記事では、CSSを使って画面サイズごとにフォントサイズを調整する方法について、初心者にも分かりやすく解説してきました。スマートフォン、タブレット、パソコンといったデバイスごとに画面の大きさは大きく異なり、同じ文字サイズでも「読みやすい」「読みにくい」と感じ方が変わります。そのため、レスポンシブデザインの考え方を取り入れ、画面幅に応じて文字サイズを調整することは、現代のWeb制作において欠かせないポイントです。
特にCSSのメディアクエリは、「どの画面サイズのときに、どのスタイルを適用するか」を柔軟に指定できる便利な仕組みです。フォントサイズだけでなく、余白やレイアウト、表示・非表示の切り替えなど、さまざまな場面で活用できますが、まずは文字サイズの調整から始めることで、メディアクエリの基本的な使い方を無理なく理解できます。
記事の中では、px単位を使った基本的な指定方法から、max-widthやmin-widthといったメディアクエリの重要なキーワード、さらにremを使って全体の文字サイズをまとめて管理する方法まで紹介しました。これらを組み合わせることで、どのデバイスでも読みやすく、ユーザーにやさしいWebページを作ることができます。
フォントサイズ調整のまとめサンプル
ここで、今回学んだ内容をまとめて確認できるサンプルコードを見てみましょう。パソコンとスマートフォンで文字サイズが変わる、シンプルで実践的な例です。
<style>
html {
font-size: 18px;
}
@media screen and (max-width: 600px) {
html {
font-size: 14px;
}
}
p {
font-size: 1rem;
line-height: 1.8;
}
</style>
<p>
この文章は、画面サイズに応じてフォントサイズが変わります。
スマホでは小さく、パソコンでは少し大きく表示されます。
</p>
このように、ルート要素であるhtmlタグのフォントサイズをメディアクエリで切り替え、本文にはrem単位を使うことで、全体の文字サイズを効率よく管理できます。ページ全体のバランスを保ちつつ、デバイスごとの読みやすさを確保できるため、初心者にもおすすめの方法です。
生徒
「メディアクエリを使えば、スマホとパソコンで文字の大きさを変えられるんですね。今まで全部同じサイズにしていました。」
先生
「そうですね。画面サイズごとに調整するだけで、読みやすさが大きく変わります。特にスマホでは文字サイズが重要ですよ。」
生徒
「最初はpxで指定して、慣れてきたらremを使うのが良さそうだと感じました。」
先生
「その考え方で大丈夫です。remを使うと全体の調整が楽になるので、少しずつ取り入れてみましょう。」
生徒
「フォントサイズだけでなく、余白やレイアウトも画面サイズで変えたくなりました。」
先生
「とても良い視点ですね。メディアクエリを理解すれば、レスポンシブデザインの幅が一気に広がりますよ。」
CSSで画面サイズごとのフォントサイズを調整することは、ユーザーにとって読みやすいWebサイトを作るための基本です。今回学んだメディアクエリとフォントサイズ調整の考え方を活かして、さまざまなデバイスに対応したWebページ制作に挑戦してみてください。
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSSでスマホとパソコンでフォントサイズを変える方法はありますか？
はい、CSSのメディアクエリを使うことで、スマホとパソコンなど異なる画面サイズに応じてフォントサイズを変更することができます。
CSSのメディアクエリとは何ですか？初心者向けに教えてください。
メディアクエリは、画面の幅やデバイスの種類に応じて、異なるスタイルを適用するためのCSSの機能で、レスポンシブ対応に欠かせません。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
