CSSでレスポンシブ対応をすると、PC・タブレット・スマホなど、どんな画面サイズでも見やすいデザインのコーディングができます。
本記事では、viewportの設定からメディアクエリの使い方まで、CSSでレスポンシブ対応をする基本を解説します。
さらに、画像やテーブルなど実務でよく使うパーツのレスポンシブ例や、デザインが崩れないためのコツも紹介します。
読み終えるころには、どんな画面にも対応しやすいレスポンシブ対応が理解できるでしょう。
CSSのレスポンシブとは？
CSSのレスポンシブとは、スマホやタブレット、PCなど、あらゆる端末でWebサイトを見やすくすることです。レスポンシブ対応やレスポンシブデザインとも呼ばれています。
画面サイズに合わせて文字の大きさや画像の配置が調整されることで、どの端末でもユーザーはスムーズに情報を受け取れるようになります。
また、Googleはモバイル版サイトを検索順位の評価基準としているため、レスポンシブ対応はSEOにも効果的です。見やすく使いやすいサイトづくりが、そのまま検索評価アップにもつながります。
レスポンシブ対応でCSSの書き方3ステップ
基本的なレスポンシブ対応の書き方は、以下の3ステップです。
- viewportをHTMLに記述する
- 書き方のアプローチを決める
- メディアクエリを指定する
レスポンシブ対応はさまざまな方法がありますが、ここでは一例を紹介します。
1.viewportをHTMLに記述する
レスポンシブ対応をするには、HTMLファイルの<head>内に以下を記述します。
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
ブラウザに対して「このページは端末の画面幅に合わせて表示してください」と指示するものです。
なお、「user-scalable=no」を指定するとユーザーによる画面拡大・縮小ができなくなります。視覚に制限のある利用者にとって不便となるため、アクセシビリティの観点からも特別な理由がない限り使用を避けましょう。
2.書き方のアプローチを決める
viewportの記述をしたら、コーディングの進め方を決めましょう。
書き方は以下の2つです。
| 書き方 | 概要 |
| モバイルファースト | スマホの表示を基準にCSSを書く方法。あとからPC用のスタイルを追加していく。 |
| PCファースト | PCでの表示を基準にCSSを書く方法。スマホ用のスタイルを上書きしていく。 |
デザインカンプに特別な指定がない場合は、シンプルなコードで管理しやすいモバイルファーストで進めるのがおすすめです。
3.メディアクエリを指定する
モバイルファーストかPCファーストのどちらで書くかを決めたら、次にメディアクエリを設定します。
まず、デザインを切り替える基準となるブレイクポイントを決めましょう。ブレイクポイントは、スマホ・タブレット・PCなど、異なる画面サイズの境界線のことです。
次にメディアクエリの記述をしますが、書き方はHTMLの構成によって異なります。デザインカンプのインナー幅が1200pxの場合、モバイルファーストでは以下のように指定します。
コピー/* タブレット：768px〜1199px */
@media screen and (min-width: 768px) {
}
/* PC：1200px〜 */
@media screen and (min-width: 1200px) {
}
PCファーストの場合は以下の通りです。
コピー/* タブレット以下：〜1199px */
@media screen and (max-width: 1199px) {
}
/* スマホ以下：〜767px */
@media screen and (max-width: 767px) {
}
スマホ・タブレット・PCごとにデザインを変えたいときは、複数のブレイクポイントを設定することもあります。
ブレイクポイントには明確な基準がないため、いくつか試してみて、自分が作業しやすい値を見つけるのがおすすめです。
レスポンシブ対応の実装例
レスポンシブ対応でよくある例を紹介します。
- コンテンツを中央に配置する
- カード型レイアウトを自動調整する
- 画像を画面サイズに合わせる
- テーブル（表）をスクロールする
ぜひ試してみてください。
コンテンツを中央に配置する
Webサイトのコンテンツは、画面全体に広がっているわけではなく、中央に適度な幅で配置しています。
この基本のレイアウトを作るのが、inner というクラスを使う方法です。セクション要素の内部をinnerで囲むことで、レイアウトを整えます。
上図のようにinnerを使うと、PCではコンテンツが広がりすぎず、スマホでは文字が画面の端に寄ってしまうのを防げます。
カード型レイアウトを自動調整する
カードのような要素を画面サイズに合わせてきれいに並べたいときは、Gridが便利です。
数行のコードで、見栄えのいいレスポンシブレイアウトができます。
親要素にdisplay: grid;を指定し、カラム構成を決めるために以下の一行を追加します。
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
上記の指定は、「1列あたりの最小幅を250pxに保ちながら、スペースが足りなくなったら自動で折り返し、余った空間は均等に分配する」というものです。
余った空間を、画面幅に応じてカード数が自動調整するため柔軟なレイアウトになります。
たとえば、PCでは3〜4列、タブレットでは2列、スマホでは1列に自動で切り替わります。メディアクエリを使わなくても自然なレスポンシブ対応が可能です。
▶CSS Gridのより詳しい使い方は「CSS Gridとは？3ステップでわかる使い方とFlexboxとの違いを解説」の記事で紹介していますので、あわせてチェックしてみてください。
画像を画面サイズに合わせる
画像サイズを画面幅に応じて自動で調整する方法を紹介します。
画像に対して、以下のCSSを適用しましょう。
コピーimg {
max-width: 100%;
height: auto;
}
max-width: 100%は、画像が親要素の幅より大きくならないようにする指定です。height: autoは、横幅に合わせて画像の縦横比を保ったまま、高さを自動調整します。
テーブル（表）をスクロールする
テーブルがスマホで崩れてしまうときは、横スクロールできるようにする方法がシンプルです。
たとえば、要素にwidth: 700px;のように固定幅を指定すると、スマホのような小さな画面ではテーブルが画面の外にはみ出してしまいます。
テーブルの調整方法は、全体をdivで囲んで、CSSでスクロールを設定すると解決できます。
コピー<div class="table-wrap">
（ここに<table>〜</table>）
</div>
コピー.table-wrap {
overflow-x: auto;
}
テーブル全体をdivで囲んでoverflow-x: auto; を指定すると、画面幅が小さくなったときに横スクロールができるようになります。
CSSで崩れないレスポンシブ対応のコツ
レスポンシブ対応をしても、画面幅によっては要素がずれてしまう場合があります。
ここでは、コーディングの際に意識したいポイントを紹介します。
- 要素ごとにすぐにレスポンシブ対応をする
- 複数の画面幅で表示チェックする
- 固定値ではなく柔軟な単位を使う
これらを意識して崩れないコーディング力を磨いていきましょう。
要素ごとにすぐにレスポンシブ対応をする
ページ全体を作り終えてからまとめて調整するよりも、セクションごとにレスポンシブを確認しながら進めると効率的です。
完成後にまとめてレスポンシブ対応をしようとすると、「どの要素が原因で崩れているのか」が分かりづらくなり、修正に時間がかかってしまいます。
たとえば、ヘッダーやカードレイアウト、フッターなどを実装した段階で、Chromeの検証ツールを使って画面幅を変えながら崩れを確認しましょう。
セクションごとにデザインのズレを直しておくことで、あとから横揺れしてしまうなどの崩れを防げます。
複数の画面幅で表示チェックする
実装が終わったら、ブレイクポイントの前後だけでなく、ブラウザの横幅をマウスでゆっくり広げたり縮めたりして、中間サイズでもデザインが崩れていないかを確認しましょう。
特定の幅では問題がなくても、少し広い・狭いサイズで要素がずれたり、余白が不自然に生まれたりすることがあります。
特に、カードレイアウトやテキスト量の多いセクションは、画面幅の変化に影響を受けやすいため注意が必要です。
実機だけではなく、Chromeの検証ツールでスマホ・タブレット・PCなど、複数のサイズを切り替えて幅広く検証しましょう。
最終的に、どの画面幅でも横スクロールが発生しなければ、安定したレスポンシブ対応ができていると判断できます。
固定値ではなく柔軟な単位を使う
要素の幅をpxで固定してしまうと、スマホなど画面の小さい端末では要素がはみ出し、横揺れの原因になります。レスポンシブ対応には%やvw、clamp()などの柔軟な単位を使うことで、画面サイズに応じて自動調整される見やすいレイアウトを実装できます。
たとえば%は「親要素に対してどのくらいの割合にするか」を相対的に指定でき、vw は「画面幅の何％」という指定が可能です。さらに clamp() を使えば、「最小値・理想値・最大値」をまとめて指定できるため、画面が広がったり狭まったりしても、自然なバランスを保てます。
以下の例では、clamp() を使ってボタンの幅を柔軟に設定しています。
コピー.button {
width: clamp(120px, 50%, 240px);
}
上記のコードの場合、親要素の幅が240px未満のときはボタンが最小幅の120pxを維持します。240px〜480pxの範囲では親要素の50％の幅になり、画面サイズに合わせて伸縮します。480pxを超えると最大幅の240pxで固定され、それ以上は広がりません。
このような単位を使えば、画面ごとに細かくCSSを書き換えなくても対応でき、見た目が崩れにくく保守性が高いコーディングができます。
余白やボーダーの分だけ幅が広がるのを防ぐために、リセットCSSに* { box-sizing: border-box; } を記載しておくのがおすすめです。書いておくと、要素の幅計算が安定し、予期せぬはみ出しを減らせます。
まとめ
レスポンシブ対応は、Web制作に欠かせない基本スキルです。
viewport設定やメディアクエリの使い分け、柔軟な単位の活用を理解すれば、どんな画面サイズでも崩れにくいレイアウトを作れます。
また、モバイルファーストで設計し、ブレイクポイントを意識して進めることで、作業効率やコードの管理がしやすくなります。
中間幅での表示崩れや固定値の使いすぎに気を配るなど、ポイントを押さえたレスポンシブ対応を取り入れましょう。
Web制作を基礎から実践的に学びたい方は、未経験からプロを目指せるデイトラWeb制作コースをチェックしてみてください。
Web制作を仕事にするならデイトラWeb制作コースがおすすめ
デイトラ情報局は、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつきで品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的に分かります。
分からないことは、実務を経験しているメンター陣がDiscordによる公式サポートの質問部屋で丁寧に指導してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
