teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

ご連絡ありがとうございます。HTML、CSSどちらも追加しました。よろしくお願いいたします。

2021/07/24 08:23

投稿

mo-n
mo-n

スコア8

title CHANGED
File without changes
body CHANGED
@@ -80,6 +80,174 @@
80
80
  </div>
81
81
 
82
82
  <div id="container" class="wrapper">
83
+
84
+ <main>
85
+ <article>
86
+ <h2 class="article-title">タイトル:テキストテキストテキストテキストテキスト</h2>
87
+ <ul>
88
+ <li>2020/01/01</li>
89
+ <li>カテゴリ1</li>
90
+ </ul>
91
+ <a href="#">
92
+ <img src="img/main1.jpg" alt="1">
93
+ </a>
94
+ <p>本文:テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
95
+ </p>
96
+ <div class="readmore">
97
+ <a href="#">READ MORE</a>
98
+ </div>
99
+ </article>
100
+
101
+ <article>
102
+ <h2 class="article-title">タイトル:テキストテキストテキストテキストテキスト</h2>
103
+ <ul>
104
+ <li>2020/01/01</li>
105
+ <li>カテゴリ1</li>
106
+ </ul>
107
+ <a href="#">
108
+ <img src="img/main2.jpg" alt="1">
109
+ </a>
110
+ <p>本文:テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
111
+ </p>
112
+ <div class="readmore">
113
+ <a href="#">READ MORE</a>
114
+ </div>
115
+ </article>
116
+
117
+
118
+ <article id="article-main">
119
+ <h2 class="article-title">タイトル:テキストテキストテキストテキストテキスト</h2>
120
+ <ul>
121
+ <li>2020/01/01</li>
122
+ <li>カテゴリ1</li>
123
+ </ul>
124
+ <a href="#">
125
+ <img src="img/main3.jpg" alt="1">
126
+ </a>
127
+ <p>本文:テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
128
+ </p>
129
+ <div class="readmore">
130
+ <a href="#">READ MORE</a>
131
+ </div>
132
+
133
+ </article>
134
+ </main>
135
+
136
+ <aside id="aside">
137
+ <section class="section-author">
138
+ <a href="#">
139
+ <img src="img/author.jpg" alt="author">
140
+ </a>
141
+ <h3 class="authorname">NAME NAME</h3>
142
+ <p class="prf">プロフィール:テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
143
+ </section>
144
+
145
+ <section class="ranking">
146
+ <h3>Ranking</h3>
147
+ <article>
148
+ <a href="#">
149
+ <img src="img/ranking1.jpg" alt="1">
150
+ </a>
151
+ <h4>タイトル:テキストテキストテキストテキストテキストテキストテキストテキスト</h4>
152
+ </article>
153
+
154
+ <article>
155
+ <a href="#">
156
+ <img src="img/ranking2.jpg" alt="1">
157
+ </a>
158
+ <h4>タイトル:テキストテキストテキストテキストテキストテキストテキストテキスト</h4>
159
+ </article>
160
+
161
+ <article>
162
+ <a href="#">
163
+ <img src="img/ranking3.jpg" alt="1">
164
+ </a>
165
+ <h4>タイトル:テキストテキストテキストテキストテキストテキストテキストテキスト</h4>
166
+ </article>
167
+ </section>
168
+
169
+
170
+ <section class="archive">
171
+ <h3 class="archive">Archive</h3>
172
+ <ul>
173
+ <li>
174
+ <a href="#">××××年××月(××)</a>
175
+ </li>
176
+ <li>
177
+ <a href="#">××××年××月(××)</a>
178
+ </li>
179
+ <li>
180
+ <a href="#">××××年××月(××)</a>
181
+ </li>
182
+ <li>
183
+ <a href="#">××××年××月(××)</a>
184
+ </li>
185
+ <li>
186
+ <a href="#">××××年××月(××)</a>
187
+ </li>
188
+ <li>
189
+ <a href="#">××××年××月(××)</a>
190
+ </li>
191
+ <li>
192
+ <a href="#">××××年××月(××)</a>
193
+ </li>
194
+ <li>
195
+ <a href="#">××××年××月(××)</a>
196
+ </li>
197
+ <li>
198
+ <a href="#">××××年××月(××)</a>
199
+ </li>
200
+ <li>
201
+ <a href="#">××××年××月(××)</a>
202
+ </li>
203
+ <li>
204
+ <a href="#">××××年××月(××)</a>
205
+ </li>
206
+ </ul>
207
+ </section>
208
+ </aside>
209
+ </div>
210
+
211
+ <footer id="footer">
212
+ <div class="content wrapper">
213
+ <section class="item">
214
+ <h3>About</h3>
215
+ <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
216
+ <br>
217
+ ▶︎プロフィール詳細<br>
218
+ ▶︎お仕事の依頼<br>
219
+ ▶︎お問い合わせ<br>
220
+ </p>
221
+ </section>
222
+
223
+ <section class="item">
224
+ <h3>Menu</h3>
225
+ <ul>
226
+ <li><a href="#">NEW</a></li>
227
+ <li><a href="#">CATEGORY</a></li>
228
+ <li><a href="#">COLUMN</a></li>
229
+ <li><a href="#">SERIES</a></li>
230
+ <li><a href="#">Q&A</a></li>
231
+ </ul>
232
+ </section>
233
+
234
+ <section class="item">
235
+ <h3>Twitter</h3>
236
+ </section>
237
+
238
+
239
+
240
+ </div>
241
+
242
+
243
+
244
+ </footer>
245
+
246
+
247
+
248
+ </body>
249
+ </html>
250
+
83
251
  ```
84
252
 
85
253
  ```css
@@ -154,4 +322,103 @@
154
322
  color: #fff;
155
323
  font-size: 14px;
156
324
  }
325
+
326
+
327
+
328
+ #container {
329
+ display: flex;
330
+ justify-content: space-between;
331
+ margin-bottom: 60px;
332
+ }
333
+
334
+ main {
335
+ width: 65%;
336
+ }
337
+
338
+ #aside {
339
+ width: 30%;
340
+ }
341
+
342
+ .article-title {
343
+ font-size: 24px;
344
+ }
345
+
346
+ article ul {
347
+ display: flex;
348
+ margin: 10px 10px 0 0;
349
+ }
350
+
351
+ article li {
352
+ font-size: 14px;
353
+ list-style: none;
354
+ display: flex;
355
+ margin-right: 10px;
356
+ margin-bottom: 10px;
357
+ }
358
+
359
+ article p {
360
+ margin-top: 20px;
361
+ padding: 10px 40px 30px 40px;
362
+ }
363
+
364
+ article {
365
+ margin-bottom: 60px;
366
+
367
+ }
368
+
369
+ #aside .section-author {
370
+ height: auto;
371
+ text-align: center;
372
+ }
373
+
374
+
375
+ #aside .section-author a img {
376
+ width: 130px;
377
+ height: 130px;
378
+ object-fit: cover;
379
+ border-radius: 50%;
380
+ margin-bottom: 30px;
381
+
382
+ }
383
+
384
+ h3 {
385
+ font-size: 18px;
386
+ margin-bottom: 20px;
387
+ }
388
+
389
+ .prf {
390
+ font-size: 14px;
391
+ text-align: left;
392
+ }
393
+
394
+ h4 {
395
+ font-size: 14px;
396
+ text-align: left;
397
+ }
398
+
399
+ .section-author {
400
+ margin-bottom: 60px;
401
+ text-align: center;
402
+ }
403
+
404
+ .ranking,
405
+ .archive {
406
+ text-align: center;
407
+ }
408
+
409
+ .archive ul {
410
+ border-top: 1px solid #333;
411
+
412
+ }
413
+ .archive li {
414
+ padding: 10px;
415
+ border-bottom: 1px solid #333;
416
+ text-align: left;
417
+ }
418
+
419
+ .content {
420
+ display: flex;
421
+ justify-content: space-between;
422
+ }
423
+
157
424
  ```