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

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

Mobile-First Typographyとは、小さな画面で読みやすいテキストスタイルから始め、メディアクエリを使用して大きな画面向けにそれらを調整することを意味します。

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

モバイル向けのベース font size を設定します：

/* Mobile-first styles */
body {
  font-size: 16px; /* base size for mobile */
}

h1 {
  font-size: 1.5rem;
}

h1 に使われている rem 単位に注目してください。rem は root em を意味し、root である body の font size に対する相対値となります。したがって、body の font-size: 16px の場合、1.5rem は 24px に相当します。rem を使うことで、ベースの size を変更するだけで、すべての text を一貫して簡単に拡大縮小できるようになります。

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

/* Larger screens */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

チャレンジ

簡単

タスク:

モバイルで <h1> 見出しの font size を 24px に設定します。
モバイルで <p> 段落の font size を 16px に設定します。
768px より幅の広い (wider than 768px) 画面向けの media クエリを作成し、以下を実行します:
- <h1> 見出しの font size を 36px に変更します。
- 段落の font size を 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>