viewport-unitsで古いブラウザも安心！レスポンシブフォントサイズ

2024-04-09

レスポンシブデザインにおけるCSSのフォントサイズ設定

ここでは、CSSでレスポンシブなフォントサイズを設定する3つの方法をご紹介します。

相対単位を使う

相対単位は、親要素のフォントサイズを基準にフォントサイズを指定します。例えば、em や rem を使うことで、画面サイズに合わせてフォントサイズが自動的に調整されます。

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1.5rem;
}

この例では、body 要素のフォントサイズは 16px に設定されています。h1 要素は 2em なので、body 要素のフォントサイズの2倍、つまり 32px になります。同様に、p 要素は 1.5rem なので、body 要素のフォントサイズの1.5倍、つまり 24px になります。

メディアクエリを使って、画面サイズごとに異なるフォントサイズを設定できます。例えば、スマートフォンでは 16px、タブレットでは 18px、PCでは 20px といったように設定できます。

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

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

@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

この例では、画面幅が767px以下の場合は 16px、768pxから1024pxまでは 18px、1024px以上は 20px というようにフォントサイズを設定しています。

vw単位を使う

vw 単位は、ビューポートの幅を基準にフォントサイズを指定します。例えば、1vw はビューポート幅の1%に相当します。

body {
  font-size: 1vw;
}

この例では、フォントサイズはビューポート幅の1%になります。つまり、ビューポート幅が1000pxであれば、フォントサイズは10pxになります。

Zurb Foundationは、レスポンシブデザイン用のCSSフレームワークです。Foundationには、レスポンシブなフォントサイズ設定を簡単に実現するための機能が用意されています。

<p class="small">This is small text.</p>
<p class="medium">This is medium text.</p>
<p class="large">This is large text.</p>

この例では、small、medium、large というクラスを使って、それぞれ異なるフォントサイズを設定しています。Foundationはこれらのクラスにメディアクエリを自動的に適用するため、画面サイズに合わせてフォントサイズが調整されます。

CSSでレスポンシブなフォントサイズを設定するには、様々な方法があります。どの方法を使うかは、プロジェクトの要件や目的に合わせて選択してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Font Size</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>見出し</h1>
  <p>本文</p>
</body>
</html>

/* 相対単位 */

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1.5rem;
}

/* メディアクエリ */

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

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

@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

/* vw単位 */

body {
  font-size: 1vw;
}

説明

相対単位

メディアクエリ

vw単位

実行方法

このサンプルコードをHTMLファイルとCSSファイルに保存し、ブラウザで開きます。画面サイズを変えてみると、フォントサイズが自動的に調整されることが確認できます。

レスポンシブなフォントサイズ設定のその他の方法

CSS Gridを使って、レイアウトを構築し、フォントサイズを自動的に調整することができます。

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1rem;
}

.grid-item {
  font-size: 1vw;
}

@media (max-width: 767px) {
  .grid-item {
    font-size: 16px;
  }
}

この例では、grid クラスの要素を12カラムのグリッドレイアウトにしています。grid-item クラスの要素は、ビューポート幅の1%のフォントサイズになります。

viewport-units というCSSポリフィルを使うと、vw や vh などの単位をより多くのブラウザでサポートすることができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/viewport-units-buggyfill/0.6.3/viewport-units-buggyfill.min.js"></script>

このコードをHTMLファイルに追加することで、vw や vh などの単位が古いブラウザでもサポートされます。

const body = document.querySelector('body');

function updateFontSize() {
  const width = window.innerWidth;
  body.style.fontSize = `${width / 100}px`;
}

window.addEventListener('resize', updateFontSize);

updateFontSize();