読み込み中...

HTMLでフォントサイズ自動調節！驚くべき5つの方法

HTMLフォントサイズ自動調節イメージ HTML
2024.04.16
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

この記事を読めば、HTMLでフォントサイズを自動調節する方法が身につくでしょう。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webページを見る際、読みやすさはとても重要です。

そんなときに役立つのが、HTMLでフォントサイズを自動調節する方法です。

この記事では、初心者向けにHTMLでフォントサイズを自動調節する5つの方法を徹底解説します。

サンプルコード付きで分かりやすく説明するので、初めての方でも安心です。

●方法1：CSSを使ったフォントサイズの自動調節

○基本的な使い方

まずは、CSSを使ってフォントサイズを自動調節する方法を紹介します。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-size: calc(1em + 1vw);
  }
</style>
</head>
<body>
  <p>この文章のフォントサイズは自動調節されます。</p>
</body>
</html>

このコードでは、フォントサイズが画面幅に応じて自動的に調節されます。

calc(1em + 1vw)という式で、基本のフォントサイズに画面幅の1%分を足しています。

○注意点

この方法では、vwの値を変更することで、フォントサイズの自動調節の度合いをカスタマイズできます。

ただし、vwの値が大きすぎると、画面が狭いデバイスで文字が大きくなりすぎることがありますので、適切な値を見つけることが大切です。

●方法2：JavaScriptを使ったフォントサイズの自動調節

○基本的な使い方

次に、JavaScriptを使ってフォントサイズを自動調節する方法を紹介します。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-size: 16px;
  }
</style>
<script>
  window.addEventListener("resize", function() {
    const fontSize = Math.max(16, window.innerWidth / 50);
    document.body.style.fontSize = fontSize + "px";
  });
</script>
</head>
<body>
  <p>この文章のフォントサイズは自動調節されます。</p>
</body>
</html>

このコードでは、ウィンドウサイズが変更されるたびに、フォントサイズが自動的に調節されます。

Math.max(16, window.innerWidth / 50)という式で、最小フォントサイズを16pxに設定し、画面幅の50分の1に応じてフォントサイズが調整されます。

○注意点

この方法では、フォントサイズの自動調節の度合いをカスタマイズするために、式の数字を調整することができます。

ただし、JavaScriptが無効になっている場合や古いブラウザでは動作しないことがあるため、対応策としてCSSを併用することをおすすめします。

●方法3：メディアクエリを使ったフォントサイズの自動調節

○基本的な使い方

メディアクエリを使って、画面サイズに応じてフォントサイズを自動調節する方法を紹介します。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-size: 16px;
  }

  @media screen and (min-width: 768px) {
    body {
      font-size: 18px;
    }
  }

  @media screen and (min-width: 1024px) {
    body {
      font-size: 20px;
    }
  }
</style>
</head>
<body>
  <p>この文章のフォントサイズは自動調節されます。</p>
</body>
</html>

このコードでは、メディアクエリを使って、画面幅が768px以上の場合は18px、1024px以上の場合は20pxと、段階的にフォントサイズが調節されます。

○カスタマイズ

この方法では、画面サイズの範囲やフォントサイズを変更することで、自分の好みに合わせてカスタマイズできます。

また、メディアクエリを追加することで、さらに細かい画面サイズの条件に対応することができます。

●方法4：文字数に応じたフォントサイズの自動調節

○基本的な使い方

文字数に応じてフォントサイズを自動調節する方法もあります。

この方法は、特に見出しやタイトルにおいて、文字が多い場合にフォントサイズを小さくすることで、デザインを崩さずに表示できるようになります。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
  h1 {
    font-size: 3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<script>
  window.addEventListener("DOMContentLoaded", function() {
    const h1 = document.querySelector("h1");
    while (h1.scrollWidth > h1.offsetWidth) {
      const fontSize = parseFloat(window.getComputedStyle(h1).fontSize);
      h1.style.fontSize = (fontSize - 1) + "px";
    }
  });
</script>
</head>
<body>
  <h1>この見出しのフォントサイズは文字数に応じて自動調節されます。</h1>
</body>
</html>

このコードでは、h1要素のフォントサイズが、その要素の幅を超えるまで繰り返し縮小されます。

parseFloat(window.getComputedStyle(h1).fontSize)で現在のフォントサイズを取得し、1pxずつ減らして調節しています。

○注意点

この方法では、文字が多すぎる場合にフォントサイズが小さくなりすぎてしまうことがあります。

最小のフォントサイズを設定することで、読みやすさを確保することが重要です。

●方法5：ビューポート単位を利用したフォントサイズの自動調節

○基本的な使い方

ビューポート単位（vw, vh, vmin, vmax）を使って、フォントサイズを自動調節する方法もあります。

これらの単位は、画面の幅や高さに対する相対的な単位で、画面サイズに応じて自動的に調整されます。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-size: 2vmin;
  }
</style>
</head>
<body>
  <p>この文章のフォントサイズは自動調節されます。</p>
</body>
</html>

このコードでは、2vminという単位でフォントサイズが設定されており、画面幅・高さの小さい方に対する2%に相当するサイズに自動調節されます。

○カスタマイズ

ビューポート単位を利用する場合、vwやvhなど他の単位を試してみることで、自分にとって最適なフォントサイズの調節方法を見つけることができます。

  • vw：画面幅に対する相対的な単位
  • vh：画面高さに対する相対的な単位
  • vmin：画面幅・高さの小さい方に対する相対的な単位
  • vmax：画面幅・高さの大きい方に対する相対的な単位

ただし、ビューポート単位を使う際は、フォントサイズが小さくなりすぎることがないよう、適切な最小値を設定することが重要です。

まとめ

この記事を読めば、HTMLフォントサイズの自動調節方法を理解し、実装できるようになります。

各方法にはそれぞれメリットとデメリットがありますので、自分のニーズに合わせて適切な方法を選ぶことが大切です。

それぞれの方法を簡単に振り返っておきましょう。

  1. CSSのcalc()関数を使った方法
  2. JavaScriptを使った方法
  3. メディアクエリを使った方法
  4. 文字数に応じた方法
  5. ビューポート単位を利用した方法

それぞれの方法によって、フォントサイズの自動調節が実現できます。

プロジェクトの要件や好みに応じて、適切な方法を選んで実装してみてください。

この記事が、フォントサイズの自動調節に関する知識と技術の向上に役立てば幸いです。