パソコパソコです！役に立ったらSNSでシェアしてもらえると嬉しいな！
レスポンシブデザイン完全ガイド - 全デバイス対応の現代的ウェブ開発
Flexboxによるレイアウトを学んだ前回に続き、今回は「レスポンシブデザイン」の実装について詳しく学んでいきます。現代のウェブサイトには欠かせない技術です。
🎯 今回学ぶこと
- レスポンシブデザインの基本概念と重要性
- メディアクエリの詳細な使い方
- ブレークポイント設計の考え方
- モバイルファーストアプローチの実践
- 実際のウェブサイトでの適用例
📱 レスポンシブデザインとは？
レスポンシブデザインとは、画面サイズやデバイスに応じて自動的にレイアウトが変化するウェブデザイン手法です。
なぜ重要なのか？
現代のウェブアクセス状況：
- スマートフォン: 全アクセスの50-70%
- タブレット: 10-20%
- デスクトップ: 30-40%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| /* レスポンシブデザインの基本概念 */
.container {
/* デスクトップ: 3カラム */
display: grid;
grid-template-columns: 300px 1fr 350px;
gap: 20px;
}
@media (max-width: 1024px) {
.container {
/* タブレット: 2カラム */
grid-template-columns: 1fr 300px;
}
}
@media (max-width: 768px) {
.container {
/* モバイル: 1カラム */
grid-template-columns: 1fr;
}
}
|
📏 メディアクエリの基本
メディアクエリの構文
1
2
3
| @media [メディアタイプ] and (条件) {
/* スタイル定義 */
}
|
メディアタイプ
1
2
3
| @media screen { /* 画面表示用 */ }
@media print { /* 印刷用 */ }
@media all { /* すべてのメディア（デフォルト） */ }
|
条件指定
画面幅による条件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| /* 最大幅: 指定幅以下の場合に適用 */
@media (max-width: 768px) {
.mobile-only { display: block; }
}
/* 最小幅: 指定幅以上の場合に適用 */
@media (min-width: 1024px) {
.desktop-only { display: block; }
}
/* 幅の範囲指定 */
@media (min-width: 768px) and (max-width: 1023px) {
.tablet-only { display: block; }
}
|
その他の条件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| /* 画面の高さ */
@media (max-height: 600px) {
.compact-header { height: 40px; }
}
/* 画面の向き */
@media (orientation: portrait) {
.portrait-layout { display: flex; }
}
@media (orientation: landscape) {
.landscape-layout { display: grid; }
}
/* 解像度・ピクセル密度 */
@media (-webkit-min-device-pixel-ratio: 2) {
.retina-image { background-image: url('image@2x.png'); }
}
/* ダークモード */
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #ffffff; }
}
/* モーション設定 */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; }
}
|
🎯 ブレークポイント設計
標準的なブレークポイント
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| /* Extra Small (xs): ~479px - スマートフォン */
@media (max-width: 479px) {
.container { padding: 10px; }
}
/* Small (sm): 480px~767px - 大型スマートフォン */
@media (min-width: 480px) and (max-width: 767px) {
.container { padding: 15px; }
}
/* Medium (md): 768px~1023px - タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
.container { padding: 20px; }
}
/* Large (lg): 1024px~1199px - 小型デスクトップ */
@media (min-width: 1024px) and (max-width: 1199px) {
.container { padding: 25px; }
}
/* Extra Large (xl): 1200px~ - デスクトップ */
@media (min-width: 1200px) {
.container { padding: 30px; }
}
|
CSS変数を活用したブレークポイント管理
1
2
3
4
5
6
7
8
9
10
11
12
| :root {
--breakpoint-xs: 480px;
--breakpoint-sm: 768px;
--breakpoint-md: 1024px;
--breakpoint-lg: 1200px;
}
/* 使用例 */
@media (max-width: 767px) {
/* var()はメディアクエリ内で直接使えないため、値を直接記述 */
.mobile-nav { display: block; }
}
|
📱 モバイルファーストアプローチ
基本的な考え方
モバイルファーストは、最初にモバイル向けのスタイルを記述し、画面サイズが大きくなるにつれて機能を追加していく手法です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| /* ❌ デスクトップファースト（非推奨） */
.navigation {
display: flex;
justify-content: space-between;
}
@media (max-width: 768px) {
.navigation {
display: block; /* デスクトップスタイルを上書き */
}
}
/* ✅ モバイルファースト（推奨） */
.navigation {
display: block; /* モバイルベース */
}
@media (min-width: 769px) {
.navigation {
display: flex; /* デスクトップで拡張 */
justify-content: space-between;
}
}
|
モバイルファーストの実装例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| /* ベース（モバイル）スタイル */
.article-grid {
display: grid;
grid-template-columns: 1fr; /* 1カラム */
gap: 15px;
padding: 10px;
}
.article-card {
padding: 15px;
font-size: 16px;
}
/* タブレット：画面幅が広くなったら2カラムに */
@media (min-width: 768px) {
.article-grid {
grid-template-columns: 1fr 1fr; /* 2カラム */
gap: 20px;
padding: 20px;
}
.article-card {
padding: 20px;
font-size: 17px;
}
}
/* デスクトップ：さらに3カラムに */
@media (min-width: 1024px) {
.article-grid {
grid-template-columns: 1fr 1fr 1fr; /* 3カラム */
gap: 25px;
padding: 30px;
}
.article-card {
padding: 25px;
font-size: 18px;
}
}
|
🏗️ 実践：ブログサイトのレスポンシブ化
実際のブログサイトを例に、包括的なレスポンシブデザインを実装してみましょう。
HTML構造
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
| <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>技術ブログサイト</title>
</head>
<body>
<!-- ヘッダー -->
<header class="site-header">
<div class="header-container">
<div class="header-brand">
<a href="/" class="brand-link">
<img src="/logo.png" alt="ロゴ" class="brand-logo">
<span class="brand-title">技術ブログ</span>
</a>
</div>
<!-- デスクトップナビゲーション -->
<nav class="header-nav desktop-nav">
<ul class="nav-list">
<li><a href="/">ホーム</a></li>
<li><a href="/tech/">技術記事</a></li>
<li><a href="/travel/">旅行記</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
<!-- モバイルメニューボタン -->
<button class="mobile-menu-button" aria-label="メニュー">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
<!-- モバイルナビゲーション -->
<nav class="mobile-nav">
<ul class="mobile-nav-list">
<li><a href="/">ホーム</a></li>
<li><a href="/tech/">技術記事</a></li>
<li><a href="/travel/">旅行記</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!-- メインコンテンツ -->
<div class="main-container">
<!-- 左サイドバー -->
<aside class="sidebar sidebar-left">
<div class="sidebar-content">
<div class="widget">
<h3 class="widget-title">📚 最新トピックス</h3>
<!-- ウィジェットコンテンツ -->
</div>
</div>
</aside>
<!-- メインコンテンツエリア -->
<main class="main-content">
<div class="article-grid">
<article class="article-card">
<h2 class="article-title">記事タイトル</h2>
<p class="article-meta">2025年9月13日 | 技術記事</p>
<p class="article-excerpt">記事の抜粋...</p>
<a href="#" class="read-more">続きを読む</a>
</article>
<!-- 他の記事カード -->
</div>
</main>
<!-- 右サイドバー -->
<aside class="sidebar sidebar-right">
<div class="sidebar-content">
<div class="widget">
<h3 class="widget-title">🏆 アクセスランキング</h3>
<!-- ウィジェットコンテンツ -->
</div>
</div>
</aside>
</div>
<!-- フッター -->
<footer class="site-footer">
<div class="footer-content">
<!-- フッター内容 -->
</div>
</footer>
</body>
</html>
|
レスポンシブCSS実装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
| /* ===== ベーススタイル（モバイル） ===== */
/* ビューポート設定の確認 */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
line-height: 1.6;
color: #333;
background: #f8f9fa;
}
/* ===== ヘッダー ===== */
.site-header {
background: #ffffff;
border-bottom: 1px solid #e1e8ed;
position: sticky;
top: 0;
z-index: 1000;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
max-width: 1200px;
margin: 0 auto;
}
/* ブランド部分 */
.header-brand {
flex: 0 0 auto;
}
.brand-link {
display: flex;
align-items: center;
text-decoration: none;
color: #2c3e50;
}
.brand-logo {
width: 28px;
height: 28px;
margin-right: 8px;
}
.brand-title {
font-size: 16px;
font-weight: 600;
}
/* デスクトップナビゲーション（モバイルでは非表示） */
.desktop-nav {
display: none;
}
/* モバイルメニューボタン */
.mobile-menu-button {
display: flex;
flex-direction: column;
width: 30px;
height: 30px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
justify-content: space-around;
}
.hamburger-line {
width: 20px;
height: 2px;
background: #333;
transition: all 0.3s ease;
}
/* モバイルナビゲーション */
.mobile-nav {
display: none; /* JavaScriptで制御 */
background: #ffffff;
border-top: 1px solid #e1e8ed;
}
.mobile-nav.open {
display: block;
}
.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-list li {
border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-list a {
display: block;
padding: 15px 20px;
text-decoration: none;
color: #333;
font-weight: 500;
}
.mobile-nav-list a:hover {
background: #f8f9fa;
}
/* ===== メインコンテナ ===== */
.main-container {
display: flex;
flex-direction: column; /* モバイルは縦並び */
max-width: 1200px;
margin: 0 auto;
padding: 15px;
gap: 20px;
}
/* サイドバー：モバイルでは下部に配置 */
.sidebar {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sidebar-content {
padding: 20px;
}
.sidebar-left {
order: 2; /* メインコンテンツの後 */
}
.sidebar-right {
order: 3; /* 最後 */
}
/* メインコンテンツ */
.main-content {
order: 1; /* 最初 */
background: #ffffff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 記事グリッド */
.article-grid {
display: grid;
grid-template-columns: 1fr; /* 1カラム */
gap: 20px;
}
.article-card {
background: #ffffff;
border: 1px solid #e1e8ed;
border-radius: 8px;
padding: 20px;
transition: all 0.2s ease;
}
.article-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
line-height: 1.3;
color: #1a202c;
}
.article-meta {
font-size: 14px;
color: #718096;
margin-bottom: 12px;
}
.article-excerpt {
font-size: 16px;
color: #4a5568;
margin-bottom: 15px;
line-height: 1.6;
}
.read-more {
color: #3182ce;
text-decoration: none;
font-weight: 500;
font-size: 14px;
}
.read-more:hover {
text-decoration: underline;
}
/* ウィジェット */
.widget {
background: #ffffff;
border-radius: 6px;
padding: 15px;
margin-bottom: 15px;
border: 1px solid #e1e8ed;
}
.widget:last-child {
margin-bottom: 0;
}
.widget-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 6px;
}
/* ===== タブレット：768px以上 ===== */
@media (min-width: 768px) {
/* ヘッダー調整 */
.header-container {
padding: 15px 20px;
}
.brand-logo {
width: 32px;
height: 32px;
margin-right: 12px;
}
.brand-title {
font-size: 18px;
}
/* メインコンテナ：2カラム */
.main-container {
flex-direction: row;
gap: 25px;
padding: 20px;
}
.main-content {
flex: 1;
order: 1;
}
.sidebar-right {
flex: 0 0 300px;
order: 2;
}
/* 左サイドバーは非表示 */
.sidebar-left {
display: none;
}
/* 記事グリッド：2カラム */
.article-grid {
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.article-card {
padding: 25px;
}
.article-title {
font-size: 19px;
}
/* ウィジェット調整 */
.widget {
padding: 18px;
margin-bottom: 18px;
}
}
/* ===== 小型デスクトップ：1024px以上 ===== */
@media (min-width: 1024px) {
/* デスクトップナビゲーション表示 */
.desktop-nav {
display: block;
}
.mobile-menu-button {
display: none;
}
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 20px;
}
.nav-list a {
text-decoration: none;
color: #4a5568;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.2s ease;
}
.nav-list a:hover {
background: #f7fafc;
color: #2d3748;
}
/* メインコンテナ：3カラム */
.main-container {
gap: 30px;
padding: 30px;
}
.sidebar-left {
display: block;
flex: 0 0 280px;
order: 1;
}
.main-content {
flex: 1;
order: 2;
}
.sidebar-right {
flex: 0 0 320px;
order: 3;
}
/* 記事グリッド：単列（メインコンテンツが狭いため） */
.article-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.article-card {
padding: 30px;
}
.article-title {
font-size: 20px;
}
/* ウィジェット調整 */
.widget {
padding: 20px;
margin-bottom: 20px;
}
.widget-title {
font-size: 17px;
}
}
/* ===== 大型デスクトップ：1200px以上 ===== */
@media (min-width: 1200px) {
/* ヘッダー調整 */
.header-container {
padding: 20px 30px;
}
.brand-title {
font-size: 20px;
}
/* メインコンテナの最大幅を拡張 */
.main-container {
max-width: 1400px;
padding: 40px;
}
/* 記事グリッド：2カラムに戻す（メインコンテンツが十分広い） */
.article-grid {
grid-template-columns: 1fr 1fr;
gap: 35px;
}
.article-title {
font-size: 21px;
}
}
/* ===== 超小型画面：480px以下 ===== */
@media (max-width: 479px) {
.header-container {
padding: 8px 10px;
}
.brand-logo {
width: 24px;
height: 24px;
}
.brand-title {
font-size: 14px;
}
.main-container {
padding: 10px;
gap: 15px;
}
.sidebar-content {
padding: 15px;
}
.main-content {
padding: 15px;
}
.article-card {
padding: 15px;
}
.article-title {
font-size: 16px;
}
.widget {
padding: 12px;
margin-bottom: 12px;
}
.widget-title {
font-size: 14px;
margin-bottom: 8px;
}
}
|
🖼️ 画像のレスポンシブ対応
レスポンシブイメージ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| /* 基本的な画像レスポンシブ */
img {
max-width: 100%;
height: auto;
}
/* より詳細な制御 */
.responsive-image {
width: 100%;
height: auto;
object-fit: cover; /* アスペクト比を保ちながらフィット */
}
/* 異なる画面サイズで異なる画像サイズ */
.hero-image {
width: 100%;
height: 200px;
object-fit: cover;
}
@media (min-width: 768px) {
.hero-image {
height: 300px;
}
}
@media (min-width: 1024px) {
.hero-image {
height: 400px;
}
}
|
HTMLでの最適化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!-- srcset属性を使用した解像度対応 -->
<img src="image.jpg"
srcset="image-small.jpg 480w,
image-medium.jpg 768w,
image-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="説明文">
<!-- picture要素を使用したブレークポイント対応 -->
<picture>
<source media="(max-width: 767px)" srcset="mobile-image.jpg">
<source media="(max-width: 1023px)" srcset="tablet-image.jpg">
<img src="desktop-image.jpg" alt="説明文">
</picture>
|
⚡ パフォーマンス最適化
効率的なCSS記述
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| /* ❌ 非効率：同じプロパティの重複 */
.element {
padding: 10px;
margin: 10px;
}
@media (min-width: 768px) {
.element {
padding: 20px;
margin: 15px;
font-size: 18px;
}
}
@media (min-width: 1024px) {
.element {
padding: 30px;
margin: 20px;
font-size: 20px;
}
}
/* ✅ 効率的：変化する部分のみ記述 */
.element {
padding: 10px;
margin: 10px;
font-size: 16px; /* ベースサイズ */
}
@media (min-width: 768px) {
.element {
padding: 20px;
margin: 15px;
font-size: 18px;
}
}
@media (min-width: 1024px) {
.element {
padding: 30px;
margin: 20px;
font-size: 20px;
}
}
|
CSS変数を活用した効率化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| :root {
--container-padding: 10px;
--font-size-base: 16px;
--card-padding: 15px;
}
@media (min-width: 768px) {
:root {
--container-padding: 20px;
--font-size-base: 17px;
--card-padding: 20px;
}
}
@media (min-width: 1024px) {
:root {
--container-padding: 30px;
--font-size-base: 18px;
--card-padding: 25px;
}
}
/* 変数を使用 */
.container {
padding: var(--container-padding);
font-size: var(--font-size-base);
}
.card {
padding: var(--card-padding);
}
|
🔧 JavaScript連携
メディアクエリのJavaScript制御
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // メディアクエリの状態監視
const mediaQuery = window.matchMedia('(max-width: 768px)');
function handleMediaQuery(e) {
if (e.matches) {
// モバイルサイズの処理
document.body.classList.add('mobile-view');
initializeMobileFeatures();
} else {
// デスクトップサイズの処理
document.body.classList.remove('mobile-view');
initializeDesktopFeatures();
}
}
// 初期実行
handleMediaQuery(mediaQuery);
// 変更時の監視
mediaQuery.addListener(handleMediaQuery);
// モバイルメニューの制御例
function initializeMobileFeatures() {
const menuButton = document.querySelector('.mobile-menu-button');
const mobileNav = document.querySelector('.mobile-nav');
menuButton.addEventListener('click', () => {
mobileNav.classList.toggle('open');
});
}
|
🚀 次回予告
次回は「JavaScript入門 - インタラクティブなウェブサイト作り」について学びます：
- JavaScript基本構文とDOM操作
- イベントハンドリングの実装
- 動的コンテンツの生成
- APIとの連携方法
- 実際のウェブサイトでの活用例
📝 今回のまとめ
- レスポンシブデザインは現代ウェブ開発の必須技術
- メディアクエリで画面サイズに応じたスタイル変更が可能
- モバイルファーストアプローチが効率的な開発手法
- ブレークポイント設計が成功の鍵
- パフォーマンス最適化も同時に考慮することが重要
レスポンシブデザインをマスターすれば、あらゆるデバイスで美しく機能的なサイトを構築できるようになります！
💡 質問やフィードバックがあれば、コメント欄やTwitter（@firebird19245）でお気軽にどうぞ！
シリーズ記事
- 【第1回】CSSの基礎知識
- 【第2回】CSSセレクタとカスケード
- 【第3回】Flexboxレイアウト入門
- 【第4回】レスポンシブデザイン完全ガイド（この記事）
- 【第5回】JavaScript入門 - インタラクティブなウェブサイト作り（次回）
- 【第6回】JavaScript検索機能実装
- 【第7回】アニメーション・トランジション実装
