回答編集履歴
5
誤字修正
test
CHANGED
|
@@ -90,11 +90,11 @@
|
|
|
90
90
|
|
|
91
91
|
# おまけ: CSSのフレームワーク
|
|
92
92
|
|
|
93
|
-
CSSのレスポンシブデザイン
|
|
93
|
+
CSSのレスポンシブデザインといえば、Web界隈ではよく知られているTwitter発の`Bootstrap`というフレームワークがあります。JavaScriptとCSSがあり、両方合わせてブートストラップと呼ばれています。
|
|
94
94
|
|
|
95
95
|
|
|
96
96
|
|
|
97
|
-
ブートストラップのCSSに関して、もっと分かりやすく言えば、「Bootstrap.cssという名の、レスポンシブ表示
|
|
97
|
+
ブートストラップのCSSに関して、もっと分かりやすく言えば、「Bootstrap.cssという名の、レスポンシブ表示に対応して書かれたCSSがあり、HTMLを書くときにBootstrap.cssで定義されたクラス名(`.abc`等)を利用する事により、簡単にレスポンシブ表示が実現できるよ」というものです。
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
4
a
test
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
...
|
|
44
44
|
|
|
45
|
-
height:
|
|
45
|
+
height: 700px; /* !imoortant は付けないで。後のCSSの変更にかなり作用するので、
|
|
46
46
|
|
|
47
47
|
!importantを完全に理解するまでは、極力使用は避けてください。
|
|
48
48
|
|
3
追記
test
CHANGED
|
@@ -30,11 +30,29 @@
|
|
|
30
30
|
|
|
31
31
|
# 解決コード
|
|
32
32
|
|
|
33
|
-
**スマホので観覧した場合のCSS(背景画像
|
|
33
|
+
**スマホので観覧した場合のCSS(.warp1の高さ・背景画像サイズの修正)を、メディアクエリを使って書く**
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
```css
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
.warp1{
|
|
42
|
+
|
|
43
|
+
...
|
|
44
|
+
|
|
45
|
+
height: 900px; /* !imoortant は付けないで。後のCSSの変更にかなり作用するので、
|
|
46
|
+
|
|
47
|
+
!importantを完全に理解するまでは、極力使用は避けてください。
|
|
48
|
+
|
|
49
|
+
後のCSSの変更が適用されなくなったりします。 */
|
|
50
|
+
|
|
51
|
+
...
|
|
52
|
+
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
38
56
|
|
|
39
57
|
/* 画面サイズが414px以下 の時、以下のCSSが"追加"される *
|
|
40
58
|
|
|
@@ -47,6 +65,8 @@
|
|
|
47
65
|
@media (max-width: 414px){
|
|
48
66
|
|
|
49
67
|
.wrap1{
|
|
68
|
+
|
|
69
|
+
height: 300px; /* お好みの高さにして下さい。 */
|
|
50
70
|
|
|
51
71
|
/* background-size: 横 縦 ; */
|
|
52
72
|
|
2
コード修正
test
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
```css
|
|
38
38
|
|
|
39
|
-
/* 画面サイズが4
|
|
39
|
+
/* 画面サイズが414px以下 の時、以下のCSSが"追加"される *
|
|
40
40
|
|
|
41
41
|
/* (Apple iPhone 6+, 6s+, 7+, 8+ を最大値としています) *
|
|
42
42
|
|
1
リンク修正
test
CHANGED
|
@@ -60,11 +60,11 @@
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
### 各デバイスの画面サイズのpx(CSS)
|
|
63
|
+
### 各デバイス(機器)の画面サイズのpx(CSS)
|
|
64
64
|
|
|
65
65
|
- [mydevice.io](https://www.mydevice.io/)
|
|
66
66
|
|
|
67
|
-
- [スマホ一覧](https://www.mydevice.io/#compare-devices)
|
|
67
|
+
- [スマホ一覧 -mydevice.io-](https://www.mydevice.io/#compare-devices)
|
|
68
68
|
|
|
69
69
|
|
|
70
70
|
|