モバイルファーストのタイポグラフィ

CoddyのHTMLジャーニー「実践的フロントエンド」セクションの一部。レッスン 7/35。

モバイルファーストのタイポグラフィとは、小さな画面でも読みやすいテキストスタイルから始め、メディアクエリを使って大きな画面向けに調整することです。

モバイルユーザーには、小さな画面でも読みやすい明瞭で見やすいフォントが必要なため、これを使います。文字が小さすぎると読みにくくなり、デスクトップで大きすぎると不格好に見えることがあります。

モバイル向けの基本フォントサイズを設定します。

/* モバイルファーストのスタイル */
body {
  font-size: 16px; /* モバイル向けの基本サイズ */
}

h1 {
  font-size: 1.5rem;
}

h1に使われているrem単位に注目してください。remはroot emの略です。ルート要素であるhtmlのフォントサイズを基準にします（bodyではありません）。そのため、htmlのfont-size: 16pxが設定されている場合（ブラウザーのデフォルト）、1.5remは24pxに相当します。remを使うと、基本サイズを変更するだけで、すべてのテキストを一貫して簡単に拡大・縮小できます。

次に、メディアクエリを使って大きな画面に合わせて調整します。

/* 大きい画面 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

チャレンジ

簡単

課題：

モバイルでは、<h1>見出しのフォントサイズを24pxにします。
モバイルでは、<p>段落のフォントサイズを16pxにします。
幅が768pxより大きい画面を対象とするメディアクエリを作成し、次のようにします。
- <h1>見出しのフォントサイズを36pxに大きくします。メディアクエリ内でセレクターheader h1を使い、モバイル用のサイズを設定した場所にかかわらず、上書きされるようにします。
- 段落のフォントサイズを20pxに大きくします。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Typography</title>
  <style>
    /* ===== Mobile-First Styles ===== */
    :root {
      --base-font-size: 16px; 
    }

    body {
      font-size: var(--base-font-size);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.5;
      background-color: #f0f8ff;
      color: #333;
    }

    header {
      background: url('https://upload.wikimedia.org/wikipedia/commons/a/af/Female_polar_bear_%28Ursus_maritimus%29_with_cub%2C_Svalbard.jpg')
                  center/cover no-repeat;
      color: white;
      text-align: center;
      padding: 50px 20px;
    }

    header h1 {
      margin: 0;
    }

    .subtitle {
      margin-top: 10px;
      font-size: 1rem;
      opacity: 0.9;
    }

    main {
      padding: 20px;
    }

    h2 {
      color: #2c6e91;
      font-size: 1.25rem;
    }

    ul {
      padding-left: 20px;
    }

    li {
      margin-bottom: 10px;
    }

    footer {
      background-color: #2c6e91;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 0.9rem;
    }

    /* ===== Larger Screens ===== */

  </style>
</head>
<body>
  <header>
    <h1>Polar Bears – Kings of the Arctic</h1>
    <p class="subtitle">Discover the life of the world's largest land carnivore</p>
  </header>

  <main>
    <section>
      <h2>About Polar Bears</h2>
      <p>
        Polar bears are magnificent animals that live in the Arctic region. 
        They are excellent swimmers, using their large paws to paddle through icy waters 
        in search of seals, their main source of food. These bears have thick layers of 
        fat and dense fur to keep them warm in extreme cold.
      </p>
    </section>

    <section>
      <h2>Interesting Facts</h2>
      <ul>
        <li>Polar bears can weigh up to 700 kg (1,500 lbs).</li>
        <li>They have black skin under their white fur to absorb heat.</li>
        <li>Polar bears can swim for days without resting.</li>
        <li>They are listed as vulnerable due to climate change.</li>
      </ul>
    </section>

    <section>
      <h2>Protecting Polar Bears</h2>
      <p>
        Climate change and melting sea ice threaten polar bear habitats. 
        Protecting these amazing creatures requires global efforts to 
        reduce greenhouse gas emissions and preserve their Arctic environment.
      </p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Arctic Wildlife. All rights reserved.</p>
  </footer>
</body>
</html>