先生と生徒の会話形式で理解しよう

生徒

「スマホとパソコンで文字の大きさを変える方法ってありますか？」

先生

「はい、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を使うと全体の調整が楽になるので、少しずつ取り入れてみましょう。」

生徒