回答編集履歴
1
説明追記
answer
CHANGED
|
@@ -22,4 +22,59 @@
|
|
|
22
22
|
`position: absolute;`を設定した要素は通常フローから外れるので他の要素からないものとして扱われます。
|
|
23
23
|
.topからみると中身がなにもないので、高さ0になります。
|
|
24
24
|
|
|
25
|
+
---
|
|
26
|
+
以下、投稿したつもりが反映されてなかったので再投稿です。
|
|
27
|
+
|
|
28
|
+
> ②画面のwidthが１０００px以上になったら下記の参考サイトのように
|
|
29
|
+
画像がその分比率を変えずに大きくなって欲しいのですが.sample1にどのように記述すればなりますか？
|
|
30
|
+
|
|
31
|
+
画像の幅は相対指定（%）にして、高さは height: auto; にして縦横比が維持されるようにすればいいでしょう。
|
|
32
|
+
|
|
33
|
+
> ②一つ一つの画像を指定した位置に設置するのに適しているやり方として
|
|
34
|
+
gridlayoutも途中まで作成したのですがブラウザによっては対応していないなどで
|
|
35
|
+
|
|
25
|
-
`position: absolute;`は
|
|
36
|
+
`position: absolute;`はレスポンシプ対応させようとすると面倒なので、避けたほうがいいでしょう。
|
|
37
|
+
gridlayoutでもいいですが、今回のように２つぐらいなら、
|
|
38
|
+
FlexBoxで横並びにして、後はmargin で位置調整するのがいいかと思います。
|
|
39
|
+
|
|
40
|
+
下記はFlexBoxでレイアウトしたコード例ですので、これを参考にしてください。
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
body {
|
|
44
|
+
width: 100vw;
|
|
45
|
+
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
|
|
46
|
+
"MS PGothic", sans-serif;
|
|
47
|
+
color: #262626;
|
|
48
|
+
font-size: 1.4em; /* -> 14px; */
|
|
49
|
+
font-weight: 100;
|
|
50
|
+
letter-spacing: 0.1em;
|
|
51
|
+
margin: 0;
|
|
52
|
+
}
|
|
53
|
+
.top{
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: flex-start;
|
|
56
|
+
width: 1000px;
|
|
57
|
+
background: rgb(204, 250, 218);
|
|
58
|
+
}
|
|
59
|
+
.sample1{
|
|
60
|
+
width: 50.9%;;
|
|
61
|
+
height: auto;
|
|
62
|
+
left: 0px;
|
|
63
|
+
margin-top: 36px;
|
|
64
|
+
}
|
|
65
|
+
.sample2{
|
|
66
|
+
width: 33.5%;
|
|
67
|
+
height: auto;
|
|
68
|
+
margin-left: 60px;
|
|
69
|
+
margin-top: 223px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@media only screen and (min-width: 1001px) {
|
|
73
|
+
.top {
|
|
74
|
+
background: purple;
|
|
75
|
+
width: 100vw;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/XWpEezW)
|