回答編集履歴
5
誤字修正
answer
CHANGED
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
- [スマホ一覧 -mydevice.io-](https://www.mydevice.io/#compare-devices)
|
|
45
45
|
|
|
46
46
|
# おまけ: CSSのフレームワーク
|
|
47
|
-
CSSのレスポンシブデザイン
|
|
47
|
+
CSSのレスポンシブデザインといえば、Web界隈ではよく知られているTwitter発の`Bootstrap`というフレームワークがあります。JavaScriptとCSSがあり、両方合わせてブートストラップと呼ばれています。
|
|
48
48
|
|
|
49
|
-
ブートストラップのCSSに関して、もっと分かりやすく言えば、「Bootstrap.cssという名の、レスポンシブ表示
|
|
49
|
+
ブートストラップのCSSに関して、もっと分かりやすく言えば、「Bootstrap.cssという名の、レスポンシブ表示に対応して書かれたCSSがあり、HTMLを書くときにBootstrap.cssで定義されたクラス名(`.abc`等)を利用する事により、簡単にレスポンシブ表示が実現できるよ」というものです。
|
|
50
50
|
|
|
51
51
|
フレームワークを一度使ってみるのも、レスポンシブ表示のための良い学習になるかと思います。
|
4
a
answer
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
.warp1{
|
|
22
22
|
...
|
|
23
|
-
height:
|
|
23
|
+
height: 700px; /* !imoortant は付けないで。後のCSSの変更にかなり作用するので、
|
|
24
24
|
!importantを完全に理解するまでは、極力使用は避けてください。
|
|
25
25
|
後のCSSの変更が適用されなくなったりします。 */
|
|
26
26
|
...
|
3
追記
answer
CHANGED
|
@@ -14,15 +14,25 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
# 解決コード
|
|
17
|
-
**スマホので観覧した場合のCSS(背景画像
|
|
17
|
+
**スマホので観覧した場合のCSS(.warp1の高さ・背景画像サイズの修正)を、メディアクエリを使って書く**
|
|
18
18
|
|
|
19
19
|
```css
|
|
20
|
+
|
|
21
|
+
.warp1{
|
|
22
|
+
...
|
|
23
|
+
height: 900px; /* !imoortant は付けないで。後のCSSの変更にかなり作用するので、
|
|
24
|
+
!importantを完全に理解するまでは、極力使用は避けてください。
|
|
25
|
+
後のCSSの変更が適用されなくなったりします。 */
|
|
26
|
+
...
|
|
27
|
+
}
|
|
28
|
+
|
|
20
29
|
/* 画面サイズが414px以下 の時、以下のCSSが"追加"される *
|
|
21
30
|
/* (Apple iPhone 6+, 6s+, 7+, 8+ を最大値としています) *
|
|
22
31
|
* ソース: [mydevice.io](https://www.mydevice.io/#compare-devices) *
|
|
23
32
|
* */
|
|
24
33
|
@media (max-width: 414px){
|
|
25
34
|
.wrap1{
|
|
35
|
+
height: 300px; /* お好みの高さにして下さい。 */
|
|
26
36
|
/* background-size: 横 縦 ; */
|
|
27
37
|
background-size: auto 100%;
|
|
28
38
|
}
|
2
コード修正
answer
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
**スマホので観覧した場合のCSS(背景画像のサイズの修正)を、メディアクエリを使って書く**
|
|
18
18
|
|
|
19
19
|
```css
|
|
20
|
-
/* 画面サイズが
|
|
20
|
+
/* 画面サイズが414px以下 の時、以下のCSSが"追加"される *
|
|
21
21
|
/* (Apple iPhone 6+, 6s+, 7+, 8+ を最大値としています) *
|
|
22
22
|
* ソース: [mydevice.io](https://www.mydevice.io/#compare-devices) *
|
|
23
23
|
* */
|
1
リンク修正
answer
CHANGED
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
}
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
### 各デバイスの画面サイズのpx(CSS)
|
|
32
|
+
### 各デバイス(機器)の画面サイズのpx(CSS)
|
|
33
33
|
- [mydevice.io](https://www.mydevice.io/)
|
|
34
|
-
- [スマホ一覧](https://www.mydevice.io/#compare-devices)
|
|
34
|
+
- [スマホ一覧 -mydevice.io-](https://www.mydevice.io/#compare-devices)
|
|
35
35
|
|
|
36
36
|
# おまけ: CSSのフレームワーク
|
|
37
37
|
CSSのレスポンシブデザインの言えば、Web界隈ではよく知られているTwitter発の`Bootstrap`というフレームワークがあります。JavaScriptとCSSがあり、両方合わせてブートストラップと呼ばれています。
|