回答編集履歴
2
説明追記
test
CHANGED
|
@@ -93,3 +93,65 @@
|
|
|
93
93
|
|
|
94
94
|
|
|
95
95
|
設定どおりに反映されてます。
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
追記
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
レスポンシブ対応のメディアクエリの記述法は大きく分けてモバイルファーストとPCファーストの2種類あります。
|
|
104
|
+
|
|
105
|
+
最近は、モバイルファーストが主流のようです。
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
下記は、それぞれの場合のCSSの記述例です。
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
**モバイルファーストのメディアクエリの記述法(min-widthを使用)**
|
|
114
|
+
|
|
115
|
+
```css
|
|
116
|
+
|
|
117
|
+
/* 全てに共通の設定 */
|
|
118
|
+
|
|
119
|
+
/* スマホ用の設定 */
|
|
120
|
+
|
|
121
|
+
@media (min-width: 640px) {
|
|
122
|
+
|
|
123
|
+
/* タブレット用の設定 */
|
|
124
|
+
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@media (min-width: 1024px) {
|
|
128
|
+
|
|
129
|
+
/* PC用の設定 */
|
|
130
|
+
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
**PCファーストのメディアクエリの記述法(maxn-widthを使用)**
|
|
138
|
+
|
|
139
|
+
```css
|
|
140
|
+
|
|
141
|
+
/* 全てに共通の設定 */
|
|
142
|
+
|
|
143
|
+
/* PC用の設定 */
|
|
144
|
+
|
|
145
|
+
@media (max-width: 1024px) {
|
|
146
|
+
|
|
147
|
+
/* モバイル用の設定 */
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
@media (max-width: 640px) {
|
|
152
|
+
|
|
153
|
+
/* スマホ用の設定 */
|
|
154
|
+
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
```
|
1
コード修正
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
/* すべて画面サイズに共通の設定 */
|
|
10
10
|
|
|
11
|
-
/* 640px未満のみの設定 */
|
|
11
|
+
/* 640px未満のみの設定(後で上書きされ場合) */
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
/* 640px以上に共通の設定 */
|
|
28
28
|
|
|
29
|
-
/* 640px以上768未満のみの設定 */
|
|
29
|
+
/* 640px以上768未満のみの設定(後で上書きされ場合) */
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
/* 768px以上に共通の設定 */
|
|
46
46
|
|
|
47
|
-
/* 768px以上1024未満のみの設定 */
|
|
47
|
+
/* 768px以上1024未満のみの設定(後ろで上書きされ場合) */
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
/* 1024px以上に共通の設定 */
|
|
56
56
|
|
|
57
|
-
/* 1024px以上1280未満のみの設定 */
|
|
57
|
+
/* 1024px以上1280未満のみの設定(後ろで上書きされ場合) */
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
/* 1280px以上に共通の設定 */
|
|
66
66
|
|
|
67
|
-
/* 1280px以上1536px未満のみの設定 */
|
|
67
|
+
/* 1280px以上1536px未満のみの設定(後ろで上書きされ場合) */
|
|
68
68
|
|
|
69
69
|
|
|
70
70
|
|