レスポンシブCSS：スマートフォンからPCまで読みやすいサイトにする
モバイルを基準にメディアクエリーで列数を変更。viewport、clamp、文字拡大、横のはみ出しを確認し、レスポンシブなサイトへ育てます。
第7回では、前回の横並びレイアウトを狭い画面でも読めるようにします。目標は特定のスマートフォンの機種に合わせることではなく、内容が無理なく収まる幅に応じて配置を変えることです。端末の向きを変えたり、文字を大きくしたりして確認します。
狭い画面を基準に組み立てる
viewportとCSSの役割
HTMLのheadにある<meta name="viewport" content="width=device-width, initial-scale=1">で、端末幅を基準にページを表示する設定にしています。この指定だけでレイアウトが自動的に整うわけではなく、CSS側でも要素の幅や列数を調整します。拡大を禁止する指定は加えません。
モバイルでは1列、広い画面で複数列
まずカードと紹介部分を1列にします。幅が十分ある場合だけ、メディアクエリーで3列・2列へ変更します。これを狭い画面から段階的に広げる考え方として使います。「PC版を縮める」だけだと文字や操作部品まで小さくなりやすいため、内容の配置を変えます。
レスポンシブのCSSを追加する
styles.cssの末尾へ追加するコード
第6回のCSSの末尾へ次を追加してください。既存の3列指定を1列へ上書きし、48rem以上で複数列に戻します。
.cards, .hero-grid, .about-grid { grid-template-columns: 1fr; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-grid, .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}ブレークポイントを選ぶ理由
48remはこのサンプルでカードの文章が読みやすく並ぶ幅として選んだ条件です。一般的な初期文字サイズ16pxの環境では約768pxですが、メディアクエリーの相対単位はページ内で変更したルート文字サイズと同じ基準になるとは限りません。端末名から固定で決めるのではなく、実際の内容を見ながら調整します。
CSSの切り替え境界では、直前と直後の両方を確認します。たとえば767pxと768pxで、カードやナビゲーションが突然はみ出さないかを見ます。サイトの表示倍率やブラウザー設定によって見え方が変わることにも注意してください。
文字と画像を伸縮させる
clampで文字サイズに範囲を付ける
clamp(2rem, 5vw, 3.4rem)は、最小値、幅に応じた希望値、最大値を指定します。見出しが際限なく大きくなったり、小さくなったりすることを防ぎます。ただし、この指定を入れただけで文字拡大への対応が保証されるわけではありません。ブラウザーの拡大や大きな文字設定でも確かめます。
横にはみ出したときに調べる
固定幅の要素、折り返さない長いURL、white-space: nowrap、余白を含めて計算していない幅などが原因になります。ページ全体へoverflow-x: hiddenを付けて隠す前に、どの要素がはみ出したかを調べます。隠すだけでは情報やフォーカス位置まで見えなくなる場合があります。
操作しやすさもレスポンシブの一部
ホバーだけに依存しない
スマートフォンにはマウスを重ねる操作がない場合があります。重要な説明や操作をホバー時だけ表示しないようにします。リンクやボタンには十分な余白を持たせ、隣の操作と押し間違えにくい距離を確保します。最終CSSでは操作部品の高さを最低44pxとしていますが、実際の押しやすさも確認します。
文字拡大とキーボード操作
390px程度の幅とPC幅で確認し、さらにブラウザーを200%に拡大します。ページが大きくなっても内容が重ならないか、フォームのラベルが読めるかを調べます。Tabキーで移動したときにフォーカスが見えることも必要です。
練習と確認表
複数の幅で確認する
- 320px：本文・画像・フォームがページ全体を横にはみ出さない。
- 390px：カードが1列で、文章を無理なく読める。
- 767px・768px：列が切り替わる前後で重なりがない。
- 1440px：本文の横幅が広がりすぎず、カードが3列になる。
文章を増やしても成り立つか
一番長いカードの説明を2倍にして、隣のカードとの関係を確認します。短いダミーテキストだけで設計せず、本番に近い内容量で試すことが大切です。次回は、このレイアウトを保ちながら色と部品の設計を整理します。
参考資料
この回の完成版と学習の続き
第7回の見本をブラウザーで開く · 第7回の完成コードをダウンロード
ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。