質問編集履歴

2

コメント入れて下さった方ありがとうございました。コード追記と、入れ直しいたしました。

2021/07/18 23:06

投稿

mo-n
mo-n

スコア8

test CHANGED
File without changes
test CHANGED
@@ -38,99 +38,323 @@
38
38
 
39
39
 
40
40
 
41
+
42
+
41
- HTML
43
+ ```
44
+
42
-
45
+ <main>
46
+
43
-
47
+ <div id="main-visual">
48
+
49
+
50
+
51
+
52
+
44
-
53
+ <img src="img/bicycle-789648_1920.jpg" alt="bicycle">
54
+
55
+
56
+
57
+ </div>
58
+
59
+
60
+
61
+ <section id="About">
62
+
63
+ <h2 class="section-title">ABOUT</h2>
64
+
65
+ <div class="content">
66
+
67
+ <img src="img/bicycle-1868162_640.jpg" alt="自己紹介">
68
+
69
+ <div class="text">
70
+
71
+ <h3>KAKERU MIYAICHI</h3>
72
+
45
- ソースコード
73
+ <p>
74
+
75
+ "テキストテキストテキストテキストテキスト"
76
+
77
+ <br>
78
+
79
+ "テキストテキストテキストテキストテキスト"
80
+
81
+ <br>
82
+
83
+ "テキストテキストテキストテキストテキスト"
84
+
85
+ </p>
86
+
87
+ </div>
88
+
89
+
90
+
91
+
92
+
93
+ </div>
94
+
95
+ </section>
96
+
97
+
98
+
99
+ <section id="Bicycle" class="wrapper">
100
+
101
+ <h2 class="section-title">Bicycle</h2>
102
+
103
+ <ul>
104
+
105
+ <li><img src="img/bicycle-1872682_1920.jpg" alt="写真1">
106
+
107
+ <h3>タイトル・タイトル</h3>
108
+
109
+ <p>テキストテキストテキストテキスト</p>
110
+
111
+ </li>
112
+
113
+ <li><img src="img/sign-741813_1920.jpg" alt="写真1">
114
+
115
+ <h3>タイトル・タイトル</h3>
116
+
117
+ <p>テキストテキストテキストテキスト</p>
118
+
119
+ </li>
120
+
121
+ <li><img src="img/architecture-2562316_1920.jpg" alt="写真1">
122
+
123
+ <h3>タイトル・タイトル</h3>
124
+
125
+ <p>テキストテキストテキストテキスト</p>
126
+
127
+ </li>
128
+
129
+ </ul>
130
+
131
+ </section>
132
+
133
+
134
+
135
+
136
+
137
+ </main>
138
+
139
+
46
140
 
47
141
  ```
48
142
 
49
- <section id="About">
50
-
51
- <h2 class="section-title">ABOUT</h2>
52
-
53
- <div class="content">
54
-
55
- <img src="img/bicycle-1868162_640.jpg" alt="自己紹介">
56
-
57
- <div class="text">
58
-
59
- <h3>tanaka tanaka</h3>
60
-
61
- <p>
62
-
63
- "テキストテキストテキストテキストテキスト"
64
-
65
- <br>
66
-
67
- "テキストテキストテキストテキストテキスト"
68
-
69
- <br>
70
-
71
- "テキストテキストテキストテキストテキスト"
72
-
73
- </p>
74
-
75
- </div>
76
-
77
-
78
-
79
-
80
-
81
- </div>
82
-
83
- </section>
84
-
85
-
86
-
87
- <section id="Bicycle" class="wrapper">
88
-
89
- <h2 class="section-title">Bicycle</h2>
90
-
91
- <ul>
92
-
93
- <li><img src="img/bicycle-1872682_1920.jpg" alt="写真1">
94
-
95
- <h3>タイトル・タイトル</h3>
96
-
97
- <p>テキストテキストテキストテキスト</p>
98
-
99
- </li>
100
-
101
- <li><img src="img/sign-741813_1920.jpg" alt="写真1">
102
-
103
- <h3>タイトル・タイトル</h3>
104
-
105
- <p>テキストテキストテキストテキスト</p>
106
-
107
- </li>
108
-
109
- <li><img src="img/architecture-2562316_1920.jpg" alt="写真1">
110
-
111
- <h3>タイトル・タイトル</h3>
112
-
113
- <p>テキストテキストテキストテキスト</p>
114
-
115
- </li>
116
-
117
- </ul>
118
-
119
- </section>
120
-
121
-
122
-
123
-
124
-
125
- </main>
126
-
127
-
128
-
129
-
130
-
131
- css
132
-
133
- ソースコード
143
+
144
+
145
+
146
+
147
+ ```css
148
+
149
+ コード
150
+
151
+
152
+
153
+ @charset "UTF-8";
154
+
155
+ html {
156
+
157
+ font-size: 100%;
158
+
159
+ }
160
+
161
+
162
+
163
+ body{
164
+
165
+ font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
166
+
167
+ line-height: 1.7;
168
+
169
+ color: #432;
170
+
171
+ }
172
+
173
+ a {
174
+
175
+ text-decoration: none;
176
+
177
+ }
178
+
179
+ img {
180
+
181
+ max-width: 100%;
182
+
183
+ }
184
+
185
+
186
+
187
+ body {
188
+
189
+ color: #383e45;
190
+
191
+ font-size: 0.9rem;
192
+
193
+ }
194
+
195
+
196
+
197
+ #main-visual img{
198
+
199
+ height: 600px;
200
+
201
+ width: 100%;
202
+
203
+ object-fit: cover;
204
+
205
+ max-width: 1920px;
206
+
207
+
208
+
209
+ }
210
+
211
+
212
+
213
+ .logo {
214
+
215
+ width: 120px;
216
+
217
+ margin-top: 10px;
218
+
219
+ }
220
+
221
+
222
+
223
+ .main-nav {
224
+
225
+ display: flex;
226
+
227
+ font-size: 14.4px;
228
+
229
+ padding: 10px 0;
230
+
231
+
232
+
233
+
234
+
235
+ list-style: none;
236
+
237
+
238
+
239
+ }
240
+
241
+
242
+
243
+ .main-nav li {
244
+
245
+ margin-left :30px;
246
+
247
+
248
+
249
+ }
250
+
251
+
252
+
253
+ .main-nav a {
254
+
255
+ color: #24292e
256
+
257
+ }
258
+
259
+
260
+
261
+ .main-nav a:hover {
262
+
263
+ color: #432;
264
+
265
+
266
+
267
+ }
268
+
269
+
270
+
271
+ .page-header {
272
+
273
+ display: flex;
274
+
275
+ justify-content: space-between;
276
+
277
+ align-items: center;
278
+
279
+ margin: 0 auto;
280
+
281
+ height: 60px;
282
+
283
+ }
284
+
285
+
286
+
287
+ .wrapper {
288
+
289
+ max-width: 960px;
290
+
291
+ margin: 0 auto;
292
+
293
+ padding:0 4%;
294
+
295
+ text-align: center;
296
+
297
+
298
+
299
+ }
300
+
301
+
302
+
303
+
304
+
305
+
306
+
307
+ .content {
308
+
309
+ display: flex;
310
+
311
+ justify-content: center;
312
+
313
+
314
+
315
+ }
316
+
317
+
318
+
319
+
320
+
321
+
322
+
323
+ .content img {
324
+
325
+ width:100px;
326
+
327
+ height:100px;
328
+
329
+ object-fit:cover;
330
+
331
+ border-radius:50%;
332
+
333
+ margin-right: 30px;
334
+
335
+ }
336
+
337
+
338
+
339
+ section ul li img {
340
+
341
+ width: 270px;
342
+
343
+ height:170px;
344
+
345
+ }
346
+
347
+
348
+
349
+
350
+
351
+ #Bicycle ul {
352
+
353
+ display: flex;
354
+
355
+ justify-content: space-between;
356
+
357
+ }
134
358
 
135
359
 
136
360
 
@@ -140,7 +364,7 @@
140
364
 
141
365
  border-bottom: solid 1px #383e45;
142
366
 
143
-    display: inline-block;
367
+  display: inline-block;
144
368
 
145
369
  text-align: center;
146
370
 
@@ -148,6 +372,10 @@
148
372
 
149
373
 
150
374
 
375
+ ```
376
+
377
+
378
+
151
379
 
152
380
 
153
381
 

1

コメント入れて下さった方ありがとうございます。 コード追記いたしました。

2021/07/18 23:06

投稿

mo-n
mo-n

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,10 @@
1
1
  ### 前提・実現したいこと
2
+
3
+
4
+
5
+
6
+
7
+
2
8
 
3
9
 
4
10