質問編集履歴
2
指摘があったから
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
レスポンシブ対応について教えてほしいことがあります
|
body
CHANGED
|
@@ -1,21 +1,2 @@
|
|
|
1
|
-
###前提・実現したいこと
|
|
2
|
-
|
|
1
|
+
画像を４つ風車みたいに真ん中が重なるものを作りたいのですが、ブラウザサイズが大きかったりするとずれてしまいます。
|
|
3
|
-
|
|
2
|
+
position以外のやり方でなにかいい方法はないでしょうか？
|
|
4
|
-
■■な機能を実装中に以下のエラーメッセージが発生しました。
|
|
5
|
-
|
|
6
|
-
###発生している問題・エラーメッセージ
|
|
7
|
-
|
|
8
|
-
```
|
|
9
|
-
エラーメッセージ
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
###該当のソースコード
|
|
13
|
-
```ここに言語を入力
|
|
14
|
-
ここにご自身が実行したソースコードを書いてください
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
###試したこと
|
|
18
|
-
課題に対してアプローチしたことを記載してください
|
|
19
|
-
|
|
20
|
-
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
21
|
-
より詳細な情報
|
1
誤字
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
テスト
|
body
CHANGED
|
@@ -1,71 +1,21 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
|
+
ここに質問したいことを詳細に書いてください
|
|
3
|
+
(例)PHP(CakePHP)で●●なシステムを作っています。
|
|
4
|
+
■■な機能を実装中に以下のエラーメッセージが発生しました。
|
|
2
5
|
|
|
3
|
-
画像を下記のように配置したいです。
|
|
4
|
-
レスポンシブ対応なのでタブレットサイズまでこの形が維持されつつ、タブレットサイズになったら一列にしたいのですが、ブラウザ幅を縮めたときうまく画像が縮んでくれないのと、やはりposition:absoluteで指定しているのでずれてしまいます。
|
|
5
|
-
|
|
6
|
+
###発生している問題・エラーメッセージ
|
|
6
7
|
|
|
8
|
+
```
|
|
7
|
-
|
|
9
|
+
エラーメッセージ
|
|
10
|
+
```
|
|
8
11
|
|
|
9
12
|
###該当のソースコード
|
|
10
|
-
html
|
|
11
13
|
```ここに言語を入力
|
|
12
|
-
<div class="img-area">
|
|
13
|
-
|
|
14
|
+
ここにご自身が実行したソースコードを書いてください
|
|
14
|
-
<img src="灰色" alt="">
|
|
15
|
-
</div>
|
|
16
|
-
<div class="box2">
|
|
17
|
-
<div class="bg-area">
|
|
18
|
-
<img src="黒ピンク" alt="">
|
|
19
|
-
<div class="bg-btn">
|
|
20
|
-
<p class="btn"><a href="#">リンクボタン</a></p>
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
<div class="box3">
|
|
25
|
-
<div class="bg-area">
|
|
26
|
-
<img src="薄緑" alt="">
|
|
27
|
-
<div class="bg-btn">
|
|
28
|
-
<p class="btn"><a href="#">リンクボタン</a></p>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="box4">
|
|
33
|
-
<img src="赤" alt="">
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
15
|
```
|
|
37
16
|
|
|
38
|
-
css
|
|
39
|
-
```ここに言語を入力
|
|
40
|
-
|
|
17
|
+
###試したこと
|
|
41
|
-
position:relative;
|
|
42
|
-
width:100%;
|
|
43
|
-
max-width:1400px;
|
|
44
|
-
width:100%;
|
|
45
|
-
margin:100px auto 0;
|
|
46
|
-
}
|
|
47
|
-
|
|
18
|
+
課題に対してアプローチしたことを記載してください
|
|
19
|
+
|
|
48
|
-
|
|
20
|
+
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
49
|
-
}
|
|
50
|
-
.box{
|
|
51
|
-
top:0;
|
|
52
|
-
z-index:8;
|
|
53
|
-
|
|
21
|
+
より詳細な情報
|
|
54
|
-
}
|
|
55
|
-
.box2{
|
|
56
|
-
top:-6%;
|
|
57
|
-
right:10%;
|
|
58
|
-
z-index:0;
|
|
59
|
-
}
|
|
60
|
-
.box3{
|
|
61
|
-
bottom:-80%;
|
|
62
|
-
z-index:10;
|
|
63
|
-
left:15%;
|
|
64
|
-
}
|
|
65
|
-
.box4{
|
|
66
|
-
right:0;
|
|
67
|
-
z-index:9;
|
|
68
|
-
bottom:-75%;
|
|
69
|
-
}
|
|
70
|
-
.bg-area{position: relative;}
|
|
71
|
-
```
|