質問編集履歴

2

コードの貼り付け、画像の添付の修正

2021/06/03 05:35

投稿

hiro4040
hiro4040

スコア4

test CHANGED
File without changes
test CHANGED
@@ -108,9 +108,11 @@
108
108
 
109
109
 
110
110
 
111
-
111
+ ```ここに言語を入力
112
+
112
-
113
+ コード
114
+
113
-
115
+ ```
114
116
 
115
117
  ```ここに言語を入力 css
116
118
 
@@ -262,6 +264,8 @@
262
264
 
263
265
  }
264
266
 
267
+
268
+
265
269
  ```
266
270
 
267
271
  ```

1

コードの貼り付け、画像の添付

2021/06/03 05:34

投稿

hiro4040
hiro4040

スコア4

test CHANGED
File without changes
test CHANGED
@@ -16,18 +16,258 @@
16
16
 
17
17
  ```HTML,CSS
18
18
 
19
+ ```ここに言語を入力 HTML
20
+
21
+ コード
22
+
23
+ <!DOCTYPE html>
24
+
25
+ <html>
26
+
27
+ <head>
28
+
29
+ <meta charset="UTF-8">
30
+
31
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
32
+
33
+ <link rel="stylesheet" href="css/sanitize.css">
34
+
35
+ <link rel="stylesheet" href="css/style.css">
36
+
37
+
38
+
39
+ <title>イヤホンジャックの向こう側</title>
40
+
41
+ </head>
42
+
43
+ <body>
44
+
45
+ <div class="container">
46
+
47
+ <header>
48
+
49
+ <h1>COCOA</h1>
50
+
51
+ </header>
52
+
19
- ![![イメージ説明](09f1e3739d99edaec0a83e7d0324c7f9.png)
53
+ <div class="main-container">
20
-
54
+
21
- ![![メー説明](3c3cedc3345f926f7aee0726961b09c2.png)4aeef6a1b877fec5b903acfd0c.png)43fd6c966954a2817a467ee17e87f993.png)
55
+ <h1>ヤホンャックの向こう側</h1>
22
-
56
+
23
- ![![イメージ説明](080c5c16b1a3901a669f9cfb016260a3.png)
57
+ <p class="album">Album</p>
58
+
24
-
59
+ <div class="about-contents">
60
+
61
+ <img src="/Users//Downloads/Chapter02/img/jacket.png" alt="イヤホンジャックの向こう側">
62
+
63
+ <p>COCOA 4枚目のアルバムとなる今作。ジャケットデザインに色鉛筆画家の「カタヒラ
64
+
65
+ シュンシ」氏を迎え、音楽と絵のコラボを実現させた一枚。</p>
66
+
67
+ <p>HONDA CARS 静岡CM タイアップの「キミのうた」をはじめ、完全書き下ろしの新曲3曲を含む全6曲を収録。<br>
68
+
25
- ![![メー説明](242677d7bedc6c37d0b03e9207b9b5d0.png)
69
+ ヤホンャックの向こう側に広がる世界を、ぜひご堪能ください。</p>
70
+
26
-
71
+ </div>
72
+
73
+ <div class="music-list">
74
+
75
+ <h2>収録曲</h2>
76
+
77
+ <ol class="songs">
78
+
79
+ <li><a href="#">C#</a></li>
80
+
81
+ <li><a href="#">ルームファッションショー</a></li>
82
+
83
+ <li><a href="#">ハッピータイム</a></li>
84
+
85
+ <li><a href="#">シャンディガフ</a></li>
86
+
87
+ <li><a href="#">僕は知らない</a></li>
88
+
89
+ <li><a href="#">キミのうた</a></li>
90
+
91
+ </ol>
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+ <footer>
98
+
99
+ &copy;2020
100
+
101
+ </footer>
102
+
103
+ </div>
104
+
105
+ </body>
106
+
107
+ </html>
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+ ```ここに言語を入力 css
116
+
117
+ コード
118
+
119
+ body {
120
+
121
+ background-color:#ccc1c1;
122
+
123
+ font-size: 14px;
124
+
125
+ color: #666;
126
+
127
+ }
128
+
129
+
130
+
131
+ .container{
132
+
133
+ margin: 0 auto;
134
+
135
+ background-color:white;
136
+
137
+ width:780px;
138
+
27
- ![![イメージ説明](65d1962921258b2d057e41bdf7dce57f.png)
139
+ box-shadow: 0 0 8px rgba(0,0,0,.5);
140
+
141
+ }
142
+
143
+
144
+
145
+ header{
146
+
147
+ text-align: center;
148
+
149
+ background-color:#330000;
150
+
151
+ color: white;
152
+
153
+ }
154
+
155
+ header h1 {
156
+
157
+ font-size: 15px;
158
+
159
+ padding: 15px;
160
+
161
+ }
162
+
163
+
164
+
165
+ .main-container {
166
+
167
+ padding: 15px;
168
+
169
+ }
170
+
171
+
172
+
173
+ .main-container h1 {
174
+
175
+ float: left;
176
+
177
+ margin: 0 10px 10px 0;
178
+
179
+ font-size: 18px;
180
+
181
+ }
182
+
183
+
184
+
185
+ .album {
186
+
187
+ background-color: #FF0461;
188
+
189
+ color: white;
190
+
191
+ display: inline;
192
+
193
+ padding: 3px 5px;
194
+
195
+ font-size: 13px;
196
+
197
+ }
198
+
199
+
200
+
201
+ .about-contents {
202
+
203
+ clear: left;
204
+
205
+ }
206
+
207
+
208
+
209
+ .about-contents img {
210
+
211
+ float: left;
212
+
213
+ margin: 0 10px 10px 10px;
214
+
215
+
216
+
217
+ }
218
+
219
+
220
+
221
+ .music-list {
222
+
223
+ margin-bottom: 15px;
224
+
225
+ clear: left;
226
+
227
+ }
228
+
229
+
230
+
231
+ .music-list h2 {
232
+
233
+ background-color: #ccc1c1;
234
+
235
+ font-size: 16px;
236
+
237
+ padding: 3px 10px;
238
+
239
+ }
240
+
241
+
242
+
243
+ .music-list li {
244
+
245
+ float: left;
246
+
247
+ width: 50%;
248
+
249
+ padding: 0 5px 5px;
250
+
251
+ border-bottom: 1px solid #ccc1c1;
252
+
253
+ }
254
+
255
+
256
+
257
+ footer {
258
+
259
+ clear: left;
260
+
261
+
262
+
263
+ }
28
264
 
29
265
  ```
30
266
 
267
+ ```
268
+
269
+ ```
270
+
31
271
 
32
272
 
33
273
  ### 試したこと
@@ -39,3 +279,5 @@
39
279
 
40
280
 
41
281
  ### 補足情報(FW/ツールのバージョンなど)
282
+
283
+ ![イメージ説明](1ee64acf836d114a5deecdd2de953407.png)