はじめに
Webサイトを公開すると、多くのユーザーはスマホやタブレットからアクセスします。
そのため レスポンシブデザイン（Responsive Design） は、今や「できたら良い」ではなく 必須スキル です。
本記事では、レスポンシブデザイン入門として、
- レスポンシブの基本概念
- viewport とメディアクエリ（media query）
- 画像・レイアウトの調整ポイント
- 実際に作って学ぶハンズオン
を、初心者にも分かるように解説します。
レスポンシブデザインとは？
レスポンシブデザインとは、画面サイズに応じてレイアウトや表示を切り替える設計のことです。
- PC：横幅が広い → 2カラム、余白多め
- スマホ：横幅が狭い → 1カラム、文字大きめ
同じHTMLを使い、主に CSSで見た目を切り替えるのが特徴です。
レスポンシブ対応が必要な理由（SEOにも影響）
ユーザー体験（UX）の改善
- スマホで文字が小さい
- ボタンが押しづらい
- 横スクロールが発生する
こうした状態は離脱につながります。
SEO（検索順位）への影響
Googleはモバイルでの見やすさを重視します。
レスポンシブ対応は、検索評価の土台になります。
レスポンシブの基本はこの3つ
- viewportの設定（最重要）
- メディアクエリで幅に応じてCSSを切り替える
- 固定値より 相対値（% / rem / vw） を使う
viewport を必ず設定する
スマホで正しく表示させるために、HTMLに以下を入れます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これが無いと、スマホでも「PC幅のページ」として表示され、
文字が極小になったりレイアウトが崩れやすくなります。
メディアクエリ（media query）とは？
画面の幅に応じてCSSを切り替える仕組みです。
例：幅が768px以下なら（タブレット〜スマホ想定）適用する
@media (max-width: 768px) {
.container {
padding: 12px;
}
}
ブレイクポイントの目安（初心者向け）
よく使われる目安です（プロジェクトで調整してください）。
- 1024px：小さめPC / 大きめタブレット
- 768px：タブレット
- 480px：スマホ
※「デバイス名」で決めすぎず、デザインが崩れる幅で区切るのが本来の考え方です。
【ハンズオン】レスポンシブな2カラム → 1カラムを作る
ゴール
PCでは2カラム、スマホでは1カラムに切り替わるレイアウトを作ります。
ステップ1：ファイル構成
responsive-sample/
├─ index.html
└─ style.css
ステップ2：HTMLを作成
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブデザイン入門｜ハンズオン</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1 class="site-title">レスポンシブデザイン入門</h1>
</header>
<main class="container">
<article class="content">
<h2>記事エリア</h2>
<p>
ここに本文が入ります。PCでは左側に表示され、スマホでは上に表示されます。
</p>
</article>
<aside class="sidebar">
<h2>サイドバー</h2>
<ul>
<li>リンク1</li>
<li>リンク2</li>
<li>リンク3</li>
</ul>
</aside>
</main>
<footer class="footer">
<small>© Responsive Sample</small>
</footer>
</body>
</html>
ステップ3：CSSを作成（PC基準 → スマホで上書き）
style.css
/* 共通 */
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.header {
padding: 16px;
background: #f5f5f5;
}
.site-title {
margin: 0;
font-size: 24px;
}
.container {
display: flex;
gap: 16px;
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.content {
flex: 2;
padding: 16px;
border: 1px solid #ddd;
background: #fff;
}
.sidebar {
flex: 1;
padding: 16px;
border: 1px solid #ddd;
background: #fff;
}
.footer {
padding: 16px;
background: #f5f5f5;
text-align: center;
}
/* ▼ここからレスポンシブ（スマホ対応） */
@media (max-width: 768px) {
.site-title {
font-size: 20px;
}
.container {
flex-direction: column;
padding: 12px;
}
.content,
.sidebar {
padding: 12px;
}
}
ステップ4：表示を確認する（超重要）
方法1：ブラウザの開発者ツールで確認
- Chromeで
F12 - デバイス切り替え（スマホアイコン）
- iPhone風の表示で確認
方法2：ウィンドウ幅を縮める
- 幅を狭くしていくと、768px以下で1カラムに切り替わります
よくあるハマりポイント
1. viewport を入れていない
スマホで崩れる原因No.1です。
2. 固定幅を使いすぎる
例：width: 1000px; のように固定するとスマホで横スクロールが出やすいです。max-width を使うと安全です。
3. 画像がはみ出す
レスポンシブでは、画像にこれを入れておくと安定します。
img {
max-width: 100%;
height: auto;
}
SEOを意識したレスポンシブ設計のポイント
- 1ページ1URLでPC/スマホ両方に対応できる（管理が楽）
- モバイルで読みにくいサイトは離脱しやすく、評価も落ちやすい
- タップ可能要素（リンク・ボタン）は十分なサイズと余白を確保する
まとめ
本記事では、レスポンシブデザイン入門として以下を解説しました。
- viewport の重要性
- メディアクエリの基本
- 2カラム → 1カラムの実装ハンズオン
- よくあるミスと対処法
レスポンシブ対応は、CSS学習の中でも「実戦で必須」な領域です。
コメントを残す