回答編集履歴
2
追記しました。
answer
CHANGED
|
@@ -53,12 +53,20 @@
|
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
---
|
|
56
|
-
[4] 画像がはみ出ないようにする
|
|
56
|
+
[4] 画像や動画がはみ出ないようにする + 中央配置
|
|
57
57
|
```CSS
|
|
58
|
-
img
|
|
58
|
+
img,
|
|
59
|
+
iframe {
|
|
59
|
-
|
|
60
|
+
max-width: 100%; /* 画像がはみ出ないようにする (=画像の横幅が親要素の横幅を上回らないようにする) */
|
|
61
|
+
|
|
62
|
+
/* 以下は、中央配置するための記述です。最終的にはそれぞれの箇所に汎用的なクラス名をつける、などして指定してください。 */
|
|
63
|
+
margin-left: auto;
|
|
64
|
+
margin-right: auto;
|
|
65
|
+
display: block;
|
|
60
66
|
}
|
|
61
67
|
```
|
|
68
|
+
|
|
69
|
+
---
|
|
62
70
|
[5] とりあえずすべての「`<ul>`と`</ul>`を「`<p>`と`</p>`」にする
|
|
63
71
|
`<ul>`を使う場合は子要素に必ず`<li>`が必要です。理解できなければ、とりあえず`<ul>`を`<p>`に置換してください。
|
|
64
72
|
|
1
5つめを追記しました。
answer
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
指摘する箇所を厳選すると、まずは以下の
|
|
1
|
+
指摘する箇所を厳選すると、まずは以下の5点だと思います。
|
|
2
|
-
以下の
|
|
2
|
+
以下の5点だけで参考サイトを再現できるわけではないですが、致命的な間違いはとりあえずなくなると思います。
|
|
3
3
|
|
|
4
4
|
---
|
|
5
5
|
[1] とりあえず`position: absolute;`は、今回の実装では不要なのですべて削除してください。
|
|
@@ -58,4 +58,8 @@
|
|
|
58
58
|
img {
|
|
59
59
|
max-width: 100%; /* 画像がはみ出ないようにする (=画像の横幅が親要素の横幅を上回らないようにする) */
|
|
60
60
|
}
|
|
61
|
-
```
|
|
61
|
+
```
|
|
62
|
+
[5] とりあえずすべての「`<ul>`と`</ul>`を「`<p>`と`</p>`」にする
|
|
63
|
+
`<ul>`を使う場合は子要素に必ず`<li>`が必要です。理解できなければ、とりあえず`<ul>`を`<p>`に置換してください。
|
|
64
|
+
|
|
65
|
+
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul](https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul)
|