Webサイトの主役「文字」も、画面に合わせてお着替え！

みんながWebサイトを見るとき、一番たくさん触れるのは何かな？そう、やっぱり「文字」だよね！どんなにカッコイイデザインでも、どんなに素敵な写真があっても、文字が読みにくかったら、伝えたいことが伝わらないし、すぐにページを閉じたくなっちゃうかもしれない。

レスポンシブデザインでは、この「文字の読みやすさ」（これを専門用語で「タイポグラフィ」って言うよ）を、画面の大きさが変わっても保つことが、とーっても大切なんだ。文字が小さすぎて目が疲れたり、逆に大きすぎてスクロールばっかりだったり、行と行の間がギューッと詰まって息苦しかったり…。そんな問題を解決する「文字の魔法」を一緒に見ていこう！

技その１：基本はコレ！メディアクエリで「文字サイズの衣替え」

一番確実で、細かくコントロールしやすい方法は、やっぱり「メディアクエリ」を使うこと！前のページで覚えたメディアクエリを使って、画面の幅（ブレークポイント）ごとに、文字の大きさを変えてあげるんだ。まるで、季節ごとに服を着替えるみたいにね。

文字の大きさを指定するときは、rem (ルートエム) という単位を使うのがおすすめだよ。<html> タグの文字サイズを基準にするから、サイト全体の文字サイズのバランスを調整しやすくなるんだ。

/* 基本のフォントサイズ (モバイルファーストで考えるのがオススメ！) */
html {
  font-size: 16px; /* これが1remの基準になるよ */
}
body {
  font-size: 1rem;    /* つまり16px */
  line-height: 1.6; /* 行の高さは文字の1.6倍くらいが読みやすいよ */
}
h1 {
  font-size: 1.8rem;  /* 16px * 1.8 = 28.8px くらい */
}

/* タブレットサイズくらいになったら (例: 画面幅が600px以上) */
@media (min-width: 600px) {
  html {
    font-size: 17px; /* 基準を少し大きくする */
  }
  /* bodyのfont-sizeは1remのままなので、自動的に17pxになる */
  h1 {
    font-size: 2rem;   /* 17px * 2 = 34px くらい */
  }
}

/* パソコンサイズくらいになったら (例: 画面幅が992px以上) */
@media (min-width: 992px) {
  html {
    font-size: 18px; /* さらに基準を大きくする */
  }
  h1 {
    font-size: 2.5rem; /* 18px * 2.5 = 45px くらい */
  }
}

デモ：メディアクエリで文字サイズが変わる様子

ウィンドウの幅を変えてみて！下の見出しや文章の文字サイズが、ある幅を境に変わるのが分かるかな？これは、このサイト全体のスタイル (style.css) に設定されたメディアクエリが効いているんだ。

見出しレベル1だよ

この文章は段落のテキストです。画面の幅が広くなると、文字が少し大きくなって読みやすくなるはずです。逆に狭い画面では、文字が大きすぎないように調整されています。これは、レスポンシブタイポグラフィの基本的なテクニックです。

見出しレベル2だよ

適切な文字の大きさは、ウェブサイトを快適に読むためにとても大切なんだ。

このデモの文字サイズは、この学習サイト全体のstyle.cssに書かれているメディアクエリによって変化しているよ。君が作っている他のページでも、同じように文字サイズが変わっているはずだ！

技その２：滑らかに変化！ビューポート単位(`vw`)の「文字サイズ自動スケーラー」

メディアクエリを使うと、ブレークポイントで文字サイズが「カクッ」と変わるよね。もっと滑らかに、画面の幅に合わせて文字サイズがジワーッと変わるようにしたいな…って思うことない？そんなときに使えるのが、前に「相対単位」のところで少し触れたvw (ビューポート幅) 単位だ！

font-size: 3vw; みたいに書くと、文字の大きさは画面幅の3%になる。画面が大きくなれば文字も大きく、小さくなれば文字も小さくなる「自動スケーラー」みたいだね。

でも、このvwだけを使うと、ちょっと困ったことが…

画面がすごく小さいと、文字も小さくなりすぎて読めない！
画面がすごく大きいと、文字もバカでかくなってバランスが悪い！

そこで、もっと賢く使うためのテクニックがあるんだ！

calc() と組み合わせる: font-size: calc(1em + 1vw); みたいに書くと、「基本の大きさ(1em) + 画面幅に応じた追加分(1vw)」となって、極端な大きさになりにくいよ。
clamp() で安全装置を付ける (超オススメ！): font-size: clamp(最小サイズ, 推奨サイズ, 最大サイズ); という魔法の呪文があるんだ！例: font-size: clamp(1rem, 2.5vw, 1.8rem); これは「文字サイズは基本2.5vwで変わるけど、どんなに小さくても1remよりは小さくならないし、どんなに大きくても1.8remよりは大きくならないでね！」という意味。まさに「安全装置付きスケーラー」だね！

デモ：`vw`を使った文字サイズの変化を比較！

ウィンドウの幅を変えて、下の3つのテキストの文字サイズがどう変わるか比べてみてね。

これは font-size: 3vw; だけを使ったテキストだよ。画面をすごく小さくしたり大きくしたりすると…？

これは font-size: calc(1rem + 0.8vw); を使ったテキスト。さっきより安定してるかな？

これは font-size: clamp(1rem, 2.5vw, 1.8rem); を使ったテキスト。最小と最大の「安全装置」が効いてるね！

clamp() は比較的新しいCSSの機能だけど、ほとんどのモダンブラウザで使えるから、レスポンシブな文字サイズ指定にはとっても便利だよ！

技その３：「文字たちの息継ぎスペース」 – 行間 (`line-height`) も大切！

文字の大きさだけじゃなく、「行間 (ぎょうかん)」、つまり行と行の間のスペースも、読みやすさに大きく影響するんだ。行間が詰まっていると、文字たちが息苦しそうで読みにくいよね。

CSSでは line-height というプロパティで行間を調整するよ。おすすめの指定方法は、line-height: 1.6; のように単位を付けない数字で指定すること。これは「その場所の文字の大きさの1.6倍を行の高さにする」という意味になるから、文字の大きさが変わっても、自動的に適切な行間を保ってくれるんだ。

一般的には、本文のような長い文章は 1.5 から 1.8 くらいの行間が読みやすいと言われているよ。これもメディアクエリで、画面サイズや文字サイズに合わせて調整することがあるんだ。

技その４：読みやすい「一行の長さ」も考えよう！

本を読むとき、一行があまりにも長ーーいと、どこまで読んだか分からなくなったり、次の行の先頭を見つけるのが大変だったりするよね。Webサイトの文章も同じなんだ。

読みやすい一行の長さは、だいたい日本語で40文字～60文字くらい、英語なら50～75文字くらいと言われているよ。これを実現するために、文章が表示されるエリアの幅を、CSSの max-width で制限することがあるんだ。

.article-body {
  max-width: 65ch; /* "ch"はだいたい半角の"0"の文字幅。65文字分くらいの幅になる */
  margin-left: auto; /* 中央揃えにするおまじない */
  margin-right: auto;
}

デモ：読みやすい行長と読みにくい行長

【ちょっと読みにくいかも？な行長】この文章は、一行の文字数がとても長くなるように設定されています。パソコンのような広い画面で見ると、右端まで視線を動かして、また左端の次の行の先頭に戻るのが少し大変に感じるかもしれません。これが何行も続くと、目が疲れてしまう原因になることもあります。読みやすい文章のためには、適切な一行の長さも重要です。

【読みやすいかも？な行長】こちらの文章は、一行の最大幅がCSSで制限されています。そのため、一行が長くなりすぎず、視線の移動がスムーズになり、内容に集中しやすくなる効果が期待できます。このように、適切な行長を保つことは、ユーザーが快適に情報を得るために役立ちます。

特にブログ記事や説明文など、長い文章を読む部分では、この「一行の長さ」を意識すると、ぐっと読みやすさがアップするよ！

おまけ：文字と背景の「コントラスト」も忘れずに！

これはレスポンシブ特有の話ではないけれど、文字の読みやすさを考える上で絶対に欠かせないのが、文字の色と背景の色の「コントラスト」（色の差）だよ。

例えば、薄い灰色の背景に白い文字とか、濃い青色の背景に黒い文字とかだと、とっても読みにくいよね。誰にとっても読みやすいWebサイトにするためには、文字と背景のコントラストを十分にとることが大切なんだ。「WCAG (ウェブ・コンテンツ・アクセシビリティ・ガイドライン)」という世界的な基準でも、推奨されるコントラスト比が決められているから、ぜひ意識してみてね！（コントラストをチェックできるツールもたくさんあるよ。）

まとめ：文字への思いやりが、最高の読みやすさを生む！

レスポンシブタイポグラフィは、ただ文字の見た目を変えるだけじゃなくて、見ている人が情報をスムーズに、そして心地よく受け取れるようにするための「思いやり」の技術なんだ。

メディアクエリとrem単位を使った段階的なフォントサイズ調整が基本。
vw単位やclamp()関数を使えば、滑らかで安全なフォントサイズ変更も可能。
読みやすい行間 (line-height) と一行の長さ (max-width) も忘れずに調整しよう。
そして、基本中の基本であるコントラストにも気を配ろう。

これらの「文字の魔法」を駆使して、どんな画面でも最高の読書体験を提供できるWebサイトを目指そうね！

さあ、これでレスポンシブデザインの主要な部品（レイアウト、画像、文字）の対応方法はバッチリだね！次のページでは、これまでの知識を活かすための、より実践的なテクニックや便利なツールについて紹介するよ。プロの技をのぞいてみよう！