質問編集履歴

1

説明の改善

2019/04/14 00:06

投稿

dogfood
dogfood

スコア19

test CHANGED
File without changes
test CHANGED
@@ -19,3 +19,171 @@
19
19
 
20
20
 
21
21
  よろしくお願い申し上げます。
22
+
23
+
24
+
25
+ ---
26
+
27
+ ```HTML
28
+
29
+ <div class="img-wrapper">
30
+
31
+ <div class="img1">
32
+
33
+ <img class="img" src="img/1.jpg" alt="" width="100%">
34
+
35
+ <div class="desc one">
36
+
37
+ <h1>多彩な表現を楽しめる</h1>
38
+
39
+ <p>アートフィルターやアドバンストフォトモードといった機能を搭載するE-PL9なら、多彩な表現の写真撮影を手軽に楽しむことができます。</p>
40
+
41
+ <a href="#">▶︎詳細を見る</a>
42
+
43
+ </div>
44
+
45
+ </div>
46
+
47
+ <div class="img2">
48
+
49
+ <img src="img/2.jpg" alt="" width="100%">
50
+
51
+ <div class="desc two">
52
+
53
+ <h1>スマートフォンで簡単シェア</h1>
54
+
55
+ <p>Bluetooth®やWi-Fi®でスマートフォンと連携できるE-PL9。スマートフォンへの画像転送がより簡単・快適になりました。</p>
56
+
57
+ <a href="#">▶︎詳細を見る</a>
58
+
59
+ </div>
60
+
61
+ </div>
62
+
63
+ <div class="img3">
64
+
65
+ <img src="img/3.jpg" alt="" width="100%">
66
+
67
+ <div class="desc three">
68
+
69
+ <h1>操作性にもこだわった高品位デザイン</h1>
70
+
71
+ <p>使いやすさにもこだわって、PENシリーズらしい高品位なデザインに仕上げました。持ち運びのときのファッションコーディネートにマッチするアクセサリーも多数用意しています。</p>
72
+
73
+ <a href="#">▶︎詳細を見る</a>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ </div>
80
+
81
+ ```
82
+
83
+
84
+
85
+ ```CSS
86
+
87
+ .img{
88
+
89
+ width: 100vw;
90
+
91
+ position: relative;
92
+
93
+ }
94
+
95
+
96
+
97
+ .desc{
98
+
99
+ width: 40vw;
100
+
101
+ position: absolute;
102
+
103
+ box-sizing: border-box;
104
+
105
+ }
106
+
107
+
108
+
109
+ .one{
110
+
111
+ right: 8vw;
112
+
113
+ top: 47vh;
114
+
115
+ }
116
+
117
+
118
+
119
+ .two{
120
+
121
+ left: 5vw;
122
+
123
+ top: 97vh;
124
+
125
+ }
126
+
127
+
128
+
129
+ .three{
130
+
131
+ right: 8vw;
132
+
133
+ top: 155vh;
134
+
135
+ }
136
+
137
+
138
+
139
+
140
+
141
+ .desc h1{
142
+
143
+ font-size: 20px;
144
+
145
+ font-weight: normal;
146
+
147
+ }
148
+
149
+
150
+
151
+ .desc p{
152
+
153
+ font-size: 15px;
154
+
155
+ font-weight: normal;
156
+
157
+
158
+
159
+ }
160
+
161
+
162
+
163
+ .desc a{
164
+
165
+ padding:10px 80px;
166
+
167
+ background-color: #FFA500;
168
+
169
+ display: inline-block;
170
+
171
+ font-size: 12px;
172
+
173
+ border-radius: 3px;
174
+
175
+ letter-spacing: 5px;
176
+
177
+ box-shadow: 2px 2px 2px #C0C0C0;
178
+
179
+ }
180
+
181
+
182
+
183
+ .desc a:hover{
184
+
185
+ background-color: #FF5F17
186
+
187
+ }
188
+
189
+ ```