Zenn
🔰

📱文字サイズをレスポンシブにする方法！hタグやpタグの例付き【CSS入門】

に公開
CSS
CSS 3
HTML 5
CSS設計
レスポンシブ
tech

こんにちは！
今日は「スマホでもパソコンでも見やすい文字サイズ」＝レスポンシブな文字サイズの設定方法について、わかりやすく解説します。

そもそも「レスポンシブ」って何？

「レスポンシブ」とは、スマホ・タブレット・パソコンなど、画面サイズに合わせて表示を変えることをいいます。
📱 ➡ 🖥 スマホで小さく
🖥 ➡ 📱 パソコンで大きく

文字も同じで、画面の広さに合わせて文字の大きさが自動で変わるようにしたい！というのが今回のテーマです。

📏 最適な文字サイズの単位は？

文字サイズの設定にはいろんな単位がありますが、レスポンシブに最適なのはこの2つ！

単位 特徴
rem ルートの文字サイズ（htmlタグのfont-size）を基準に拡大縮小できる
clamp() 最小サイズ〜最大サイズの間で、画面幅に合わせて自動でサイズが変わる

文字サイズのレスポンシブ対応：基本の書き方

css
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

これでどうなる？

  • 小さい画面では1.5rem（小さめ）
  • 大きな画面では3rem（大きめ）
  • その中間は5vw（画面の幅の5%）で調整！

🎨 見た目が変わる！文字サイズの例

ここからは、h1〜h6、pタグそれぞれでレスポンシブ文字サイズを使ったスタイル例を紹介します！

css
h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h2 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

h3 {
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

h4 {
  font-size: clamp(1.25rem, 4vw, 2rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
}

h5 {
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
}

h6 {
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: normal;
}

p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.8;
  letter-spacing: 0.01em;
}

line-heightとletter-spacingってなに？

line-height（行間）

  • 行と行のすき間のこと！
  • 数字が大きいほど、文字の行間が広くなる

例：

css
line-height: 1.2; /* 狭い行間 */
line-height: 1.8; /* ゆったり行間（読みやすい！） */

letter-spacing（文字の間隔）

  • 文字と文字の間を広げたり、狭めたりできる

例：

css
letter-spacing: 0.01em;  /* 少し広め */
letter-spacing: -0.01em; /* 少し狭め */

おすすめのスタイルまとめ

初心者のうちは、以下のように設定するとバランスがよくなります。

css
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

✅ まとめ

設定 意味
clamp() 画面サイズに合わせて文字の大きさを変える
line-height 行と行の間のすき間を調整
letter-spacing 文字と文字のすき間を調整

文字のサイズだけでなく、行間や文字の間隔も含めて整えると、読みやすくて美しいデザインになります！

Discussion