はじめに
スマホ・タブレット・PCなど、どんな画面でも快適に見られるサイトの裏には「レスポンシブデザイン」があります。この記事では、その仕組みと最低限の作り方（viewport設定＋メディアクエリ）を、コード付きでやさしく解説します！
レスポンシブデザインとは？
画面サイズに合わせてレイアウトを自動で調整する設計手法です。1つのHTMLでどの端末にも対応でき、ユーザー体験（UX）が向上します。
なぜ必要？
- モバイルユーザーが多数派 → どの端末でも最適表示が必要
- SEOに有利 → Googleはモバイル対応サイトを優先評価
- 管理がラク → PC版・スマホ版を別々に作らず一元管理できる
① まずviewportを設定する（最重要）
これが無いとスマホで正しく表示されません。<head> 内に必ず入れます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">② メディアクエリで画面幅ごとにスタイルを変える
/* 画面幅が768px以下のときだけ適用 */
@media (max-width: 768px) {
.container {
flex-direction: column; /* スマホでは縦並びに */
}
}@media 〜 で「この画面幅のときはこう表示」を指定できます。
よく使うブレイクポイントの目安
| 端末 | 画面幅の目安 |
|---|---|
| スマホ | 〜768px |
| タブレット | 768〜1024px |
| PC | 1024px〜 |
まとめ
- viewportの設定を忘れない（これが第一歩）
- メディアクエリで画面幅ごとにスタイルを切り替える
- まずはスマホ表示を意識して作るのがおすすめ
レスポンシブ対応はこれからのWeb制作で必須のスキルです。制作で詰まったら、ポートフォリオやココナラものぞいてみてくださいね。
