現代のWebサイトでは、
スマホでもPCでもきれいに見える「レスポンシブデザイン」 が必須です。
Google検索の評価（SEO）にも影響するので、
Web制作において最重要スキルの一つです。
この記事では、レスポンシブの基本である
メディアクエリ（@media） を使って、
スマホ・タブレット・PCでレイアウトを切り替える方法を
わかりやすく解説します。
レスポンシブデザインとは？
画面サイズによってレイアウトを自動で変えるデザイン手法。
例：
- PC → 横3列
- タブレット → 横2列
- スマホ → 1列に変更
ページの要素を自在に切り替えます。
必須：viewport の設定
HTML <head> に入れるお決まりの1行です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">これが無いとスマホ表示が正しく行われません。
レスポンシブの基本：メディアクエリ（@media）
画面幅によって CSS を分岐させる書き方です。
@media (max-width: 600px) {
/* 600px以下のスマホ画面にだけ適用 */
}スマホで文字サイズを調整する例
h1 {
font-size: 32px;
}
/* スマホ */
@media (max-width: 600px) {
h1 {
font-size: 24px;
}
}→ スマホだと見出しが大きすぎないように調整
横並びを縦並びに変更する（Flexbox）
PCでは横並び、スマホでは縦並び。
.boxes {
display: flex;
gap: 20px;
}
/* スマホ */
@media (max-width: 600px) {
.boxes {
flex-direction: column;
}
}→ よく使うレイアウトパターン
カードを1列にする（Grid）
PC → 3列
スマホ → 1列
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* スマホ */
@media (max-width: 600px) {
.cards {
grid-template-columns: 1fr;
}
}→ 商品一覧・ブログカードで必ず使う
画像サイズを調整する
img {
width: 100%;
height: auto;
}→ “はみ出し防止” の鉄板スタイル
スマホだけメニューを折りたたむ（簡易版）
.nav {
display: flex;
gap: 20px;
}
/* スマホ */
@media (max-width: 600px) {
.nav {
flex-direction: column;
align-items: center;
}
}レスポンシブのよくあるブレークポイント
| デバイス | 幅(px) |
|---|---|
| スマホ | 0〜600px |
| タブレット | 600〜1024px |
| PC | 1024px〜 |
以下のように書くことが多い：
/* スマホ */
@media (max-width: 600px) {}
/* タブレット */
@media (max-width: 1024px) {}レスポンシブ対応のコツ（初心者向け）
まずPCデザインを作って、スマホで上書きする
「モバイルファースト」もあるが、初心者はPC → スマホの方が楽。
大きい順 → 小さい順 にコードを書くと読みやすい
細かい部分から調整するのではなく、まずは大枠からきちんと作成していく！
例えば、まずは「header、main、footer」→「div、p、sectionなど」→「input、button、aなど」
このように親要素から整えていくといいかもしれません。
余白（padding）の調整を忘れない
スマホは縦長なので余白が大きすぎると読みにくい
横スクロールが発生したら画像・幅指定を疑う
→ width:100% が効いているか確認
総合例：PCは3列、スマホは1列
HTML：
<div class="cards">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
</div>CSS：
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* スマホ */
@media (max-width: 600px) {
.cards {
grid-template-columns: 1fr;
}
}→ この書き方はよく使います！
レスポンシブを実感しよう（デモ用CSSまとめ）
/* 基本 */
.box {
background: #eee;
padding: 20px;
}
/* PC */
.wrapper {
display: flex;
gap: 20px;
}
/* スマホ */
@media (max-width: 600px) {
.wrapper {
flex-direction: column;
}
}→ 自分で試しながら覚えるのが一番早い！
この記事のまとめ
- レスポンシブデザインは現代のWeb制作で必須
- メディアクエリ（@media）で画面幅ごとにCSSを切り替える
- PC → スマホへ「縦並び化」「1列化」が基本
- 画像は width:100% で“はみ出し事故”を防ぐ
- Grid や Flexbox と組み合わせると強力
ではでは！次回！：HTML/CSS入門⑮ トップページの総仕上げ
コメント