画面サイズでフォントサイズを自動調整！CSSで見やすい文字を作る方法

画面サイズ別にフォントサイズを調整する方法

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

生徒

「パソコンで見るとちょうど良い文字が、スマホで見ると大きすぎて読みづらいんです。」

先生

「それはウェブ制作でよくある悩みですね。画面の幅に合わせて文字の大きさを変える設定が必要ですよ。」

生徒

「難しそうですが、初心者でも簡単にフォントサイズを調整できますか？」

先生

「大丈夫です。ＣＳＳという言葉を使って、端末ごとにルールを決める方法を覚えれば解決します！」

1. フォントサイズを画面サイズ別に調整する重要性とは？

ウェブサイトを作るとき、文字の大きさは読みやすさを左右する最も大切な要素の一つです。パソコンの大きなディスプレイで見ているときは、一度にたくさんの情報が目に入るため、少し大きめの見出しがあっても違和感はありません。しかし、同じ文字の大きさをスマートフォンの小さな画面で表示してしまうと、画面が文字だけで埋め尽くされてしまい、何度も指を動かしてスクロールしなければならなくなります。

これを解決するのが、レスポンシブなフォントサイズの調整です。レスポンシブとは、日本語で「反応が良い」という意味で、ウェブ制作の世界では、画面の大きさに応じて自動的にデザインが切り替わる仕組みのことを指します。適切なフォントサイズを設定することは、読者のストレスを減らすだけでなく、グーグルなどの検索エンジンからも「親切なサイトだ」と評価されるため、ＳＥＯ対策としても非常に効果があります。

2. 基本となるフォントサイズの指定単位を知ろう

プログラミング未経験の方がまず覚えるべきは、文字の大きさを表す「単位」です。普段の生活では「センチ」や「ミリ」を使いますが、ウェブの世界では主に「ｐｘ（ピクセル）」や「ｒｅｍ（レム）」を使います。ピクセルは、画面上の小さな点一つのことで、数値を固定して指定する場合に使われます。例えば、１６ｐｘと指定すると、どんな画面でも基本的には同じ大きさで表示されます。

一方で、最近おすすめされているのがｒｅｍという単位です。これは、全体の基準となる文字サイズを１としたとき、その何倍にするかを決める方法です。例えば「１.５ｒｅｍ」は基準の１.５倍という意味になります。この単位を使うと、画面サイズに合わせて全体の基準を少し変えるだけで、全ての文字の大きさをバランス良く調整できるので、非常に管理がしやすくなります。まずはこの「単位」という道具を使い分けることが第一歩です。


<style>
/* 固定のピクセル指定 */
.fixed-text {
    font-size: 24px;
    color: #333;
}
/* 倍率で決めるレム指定 */
.relative-text {
    font-size: 1.5rem;
    color: #007bff;
}
</style>

<div class="fixed-text">
    <p>これは24ピクセルで固定された文字です。</p>
</div>
<div class="relative-text">
    <p>これは基準の1.5倍の大きさの文字です。</p>
</div>

ブラウザ表示

3. メディアクエリを使ってスマホとパソコンを切り分ける

画面サイズごとに設定を変えるための魔法の言葉を「メディアクエリ」と呼びます。これはＣＳＳの中で「もし画面の横幅が〇〇ピクセル以上だったら、このルールを適用してね」とブラウザに指示を出す仕組みです。例えば、スマホを基準に文字を小さく設定しておき、タブレットやパソコンなどの広い画面になったときだけ、文字を大きく書き換えるという使い方が一般的です。

これを「モバイルファースト」の考え方と呼びます。小さなスマホ用から作り始めることで、プログラムの記述がシンプルになり、読み込み速度も速くなります。現代のウェブ制作では、ほとんどのプロがこのメディアクエリを使って、スマホ用、タブレット用、パソコン用の３段階くらいでフォントサイズを切り替えています。難しく聞こえるかもしれませんが、決まった書き方を真似するだけで簡単に実現できます。


<style>
/* 最初はスマホ用の小さいサイズ */
.responsive-title {
    font-size: 18px;
    font-weight: bold;
}

/* 画面幅が768ピクセル以上のとき（タブレットなど） */
@media (min-width: 768px) {
    .responsive-title {
        font-size: 26px;
    }
}

/* 画面幅が1024ピクセル以上のとき（パソコンなど） */
@media (min-width: 1024px) {
    .responsive-title {
        font-size: 36px;
        color: #d32f2f;
    }
}
</style>

<div class="responsive-title">
    <i class="bi bi-display"></i>
    <span>画面を広げると文字が大きくなります！</span>
</div>

ブラウザ表示

4. ビューポート単位を使って滑らかに変化させる方法

メディアクエリは「カチッ」と段階的にサイズが変わりますが、画面の幅に合わせて「じわじわ」と滑らかに文字サイズを変えたい場合もあります。そんなときに便利なのが「ｖｗ（ビューポート幅）」という単位です。これは画面の横幅を１００としたときの割合で文字の大きさを決める方法です。例えば「５ｖｗ」と設定すると、画面が広がるにつれて文字も少しずつ自動で大きくなっていきます。

この方法の素晴らしいところは、細かい設定をたくさん書かなくても、ブラウザが勝手に計算してサイズを調整してくれる点です。大きなモニターで見ているときは迫力のある文字に、小さなスマホではそれなりのサイズに収まります。ただし、極端に小さな画面や大きな画面では文字が小さすぎたり大きすぎたりすることがあるので、次に説明する「制限をかける方法」と組み合わせて使うのがプロの技です。


<style>
.fluid-text {
    /* 画面の横幅の5パーセントの大きさにする */
    font-size: 5vw;
    background-color: #f1f8e9;
    padding: 10px;
    border-radius: 8px;
}
</style>

<div class="fluid-text">
    <i class="bi bi-arrows-angle-expand"></i>
    <span>この文字は画面幅に合わせて伸び縮みします。</span>
</div>

ブラウザ表示

5. 文字サイズの限界値を決める便利な関数とは？

先ほどの「ｖｗ」という単位は便利ですが、画面が小さすぎると文字が読めなくなってしまう弱点がありました。そこで登場するのが、最近のＣＳＳで使える「ｃｌａｍｐ（クランプ）」という便利な関数です。これは「最小値、推奨値、最大値」の３つを一度に設定できる優れた道具です。例えば「最小は１６ピクセル、普段は画面の３パーセントの大きさ、でも最大でも３２ピクセルまで」といった細かなルールを一行で書くことができます。

これを使えば、スマホでも小さくなりすぎず、パソコンでも大きくなりすぎない、完璧な文字サイズの設定が可能になります。初心者の方にとっては少し複雑な書き方に見えるかもしれませんが、今のウェブ制作現場では最も効率的で賢い方法として注目されています。この一行を覚えるだけで、サイトのクオリティが劇的に向上し、読みやすさが格段に変わります。プログラミングの面白さは、こうした便利な道具を使いこなすところにあります。


<style>
.smart-text {
    /* 最小20px、推奨4vw、最大40pxに制限する */
    font-size: clamp(20px, 4vw, 40px);
    line-height: 1.6;
    padding: 20px;
    border: 2px dashed #9c27b0;
}
</style>

<div class="smart-text">
    <i class="bi bi-magic"></i>
    <span>限界値を決めているので、崩れずに変化します！</span>
</div>

ブラウザ表示

6. 行間と文字サイズの絶妙な関係について

文字の大きさばかりに目が行きがちですが、実は「行間」も読みやすさに大きく関わっています。行間とは、一行一行の隙間のことです。文字を大きくしたときは、行間も適切に広げてあげないと、文章がぎゅうぎゅうに詰まって見えてしまい、読者がどこを読んでいるのか分からなくなってしまいます。ＣＳＳでは「ｌｉｎｅ－ｈｅｉｇｈｔ（ライン・ハイト）」という命令を使って調整します。

特にスマートフォンのように画面が狭い場合、行間が狭すぎると誤って隣のリンクをタップしてしまう原因にもなります。一般的には、文字サイズの１.５倍から１.８倍程度の行間を空けると、非常に美しく読みやすいと言われています。文字サイズの調整とセットで、この行間の設定も意識してみましょう。これだけで、あなたの作るサイトはプロが作ったような洗練された印象に変わります。

7. 実際のデバイスで確認する習慣をつけよう

パソコンの画面上で数字をいじっているだけでは、本当の読みやすさは分かりません。設定を変更したら、必ず自分のスマートフォンで実際にサイトを表示して確認してみることが大切です。パソコンではちょうど良く見えても、実際に手に持ってスマホで見てみると「もう少し大きくしたほうが親指で操作しやすいな」といった発見が必ずあります。実機での確認こそが、最高のユーザー体験を生む近道です。

もし手元に色々な端末がない場合は、ブラウザの「検証モード」という機能を使うと、擬似的に色々なスマホの画面サイズを再現することができます。パソコンのキーボードにある「Ｆ１２」というキーを押すと出てくる特別なツールです。初心者の方も、このツールを使いこなせるようになると、制作スピードが格段に上がります。画面を伸び縮みさせながら、文字が美しく変化する様子を観察するのはとても楽しい作業ですよ。

8. 読みやすいフォント選びとサイズ調整の相乗効果

最後のアドバイスとして、フォントの種類（書体）についても触れておきます。文字サイズをどんなに完璧に調整しても、そもそも読みづらいフォントを使っていては意味がありません。ウェブサイトでは、装飾の少ない「ゴシック体」が、どんな画面サイズでも認識しやすく好まれます。これに適切なサイズ調整が加わることで、初めて「ずっと読んでいたくなるブログ」が完成します。

プログラミング未経験から始めると、最初は覚えることが多く感じるかもしれません。しかし、今回紹介したメディアクエリや単位の使い分けは、一度覚えてしまえば一生使える知識です。検索エンジンに好かれ、読者にも喜ばれるサイトを目指して、まずは一つの見出しからフォントサイズの調整に挑戦してみてください。小さな工夫の積み重ねが、大きな成果へとつながっていきます。

2026年最新スキルアップ・実践セミナー