回答編集履歴

2

説明追記

2020/01/19 06:45

投稿

hatena19
hatena19

スコア33722

test CHANGED
@@ -127,3 +127,7 @@
127
127
  ```
128
128
 
129
129
  [動作確認用サンプル](https://codepen.io/hatena19/pen/wvBYbrB?editors=0100)
130
+
131
+
132
+
133
+ 『waku』内すべて埋め尽くすならCSS Flexbox か CSS Grid を使うのがいいかも。

1

サンプルコードの追記

2020/01/19 06:45

投稿

hatena19
hatena19

スコア33722

test CHANGED
@@ -27,3 +27,103 @@
27
27
  ```
28
28
 
29
29
  `top:` `left:` の数値は適宜変更してください。
30
+
31
+
32
+
33
+ 追記
34
+
35
+ ---
36
+
37
+ 『waku』画像のサイズが固定でいいなら、下記のようなCSSで。
38
+
39
+ ```css
40
+
41
+ .main{
42
+
43
+ /* height: 1350px; */
44
+
45
+ width: 800px; /*『waku』画像の幅*/
46
+
47
+ position: relative;
48
+
49
+ margin-left: auto;
50
+
51
+ margin-right: auto;
52
+
53
+ }
54
+
55
+
56
+
57
+ .waku{
58
+
59
+ display: block;
60
+
61
+ height: 1250px;
62
+
63
+ width: 100%;
64
+
65
+ }
66
+
67
+ .shop{
68
+
69
+ display: block;
70
+
71
+ position: absolute;
72
+
73
+ height: 279px;
74
+
75
+ width: 103px;
76
+
77
+ }
78
+
79
+ .logo{
80
+
81
+ top: 10px;
82
+
83
+ left: 10px;
84
+
85
+ }
86
+
87
+ .logo2{
88
+
89
+ top: 290px;
90
+
91
+ left: 10px;
92
+
93
+ }
94
+
95
+ .logo3{
96
+
97
+ top: 10px;
98
+
99
+ left: 114px;
100
+
101
+ }
102
+
103
+ .logo4{
104
+
105
+ top: 570px;
106
+
107
+ left: 10px;
108
+
109
+ }
110
+
111
+ .logo5{
112
+
113
+ top:10px;
114
+
115
+ left: 218px;
116
+
117
+ }
118
+
119
+ .logo6{
120
+
121
+ top:290px;
122
+
123
+ left: 114px;
124
+
125
+ }
126
+
127
+ ```
128
+
129
+ [動作確認用サンプル](https://codepen.io/hatena19/pen/wvBYbrB?editors=0100)