回答編集履歴
1
解説の追加
test
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
画像の横幅は1000px、高さは画像そのものの高さ
|
|
5
|
+
0. 画像の横幅は1000px、高さは画像そのものの高さ
|
|
6
6
|
|
|
7
|
-
画像はブラウザの幅に対してセンタリング
|
|
7
|
+
0. 画像はブラウザの幅に対してセンタリング
|
|
8
8
|
|
|
9
|
-
画像の左右にブラウザの幅いっぱいに背景色
|
|
9
|
+
0. 画像の左右にブラウザの幅いっぱいに背景色
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -60,6 +60,24 @@
|
|
|
60
60
|
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
+
**解説**
|
|
64
|
+
|
|
65
|
+
背景色は、上位ブロック（sample）に設定。
|
|
66
|
+
|
|
67
|
+
下位ブロック(photo)で横幅を設定、margin: 0 auto; でセンタリング。
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
これだけでは、画像の下に余白で出ます。
|
|
72
|
+
|
|
73
|
+
これは、画像(img)がインライン要素のため、ベースラインに配置されるためです。
|
|
74
|
+
|
|
75
|
+
display: block; でブロック要素にすることで、余白は出なくなります。
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
HTML の img で、width="100%" とすることで、cssで指定した横幅に合わせます。
|
|
80
|
+
|
|
63
81
|
|
|
64
82
|
|
|
65
83
|
|