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

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 7/35。

モバイルファースト・タイポグラフィとは、小さな画面でも読みやすいテキストスタイルから始め、その後、メディアクエリを使用して大きな画面に合わせて調整することを意味します。

モバイルユーザーは、小さなディスプレイでも見やすい明瞭で読みやすいフォントを必要としているため、これを使用します。テキストが小さすぎると読みにくくなり、デスクトップで大きすぎると不自然に見えることがあります。

モバイル用のベースフォントサイズを設定します：

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

h1 {
  font-size: 1.5rem;
}

h1に使用されているrem単位に注目してください。remはroot emの略で、ルートであるbodyのフォントサイズに対する相対値です。したがって、bodyの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 に大きくします。
- 段落のフォントサイズを 20px に大きくします。

チートシート

モバイルファーストのタイポグラフィは、小さな画面に最適化されたテキストスタイルから始まり、メディアクエリを使用して大きなディスプレイに合わせて調整します。

rem 単位は、ルートの font-size（body または html に設定されたもの）を基準にします。例えば、body { font-size: 16px; } の場合、1.5rem は 24px に相当します。rem を使用することで、フォントサイズの一貫性を保ち、画面サイズに合わせたスケーリングが容易になります。

モバイル用のベースフォントサイズを設定します：

/* モバイルファーストのスタイル */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

メディアクエリを使用して、より大きな画面に合わせて調整します：

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

自分で試してみよう

<!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>