回答編集履歴
2
説明文を足しました。
answer
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
main要素は明示的にdisplay: block;を指定しなければ、ブラウザによってmax-width: 768px;が効かないことがある。
|
|
2
|
+
|
|
3
|
+
クラス名がmedia-section__imagesの下位階層にimgを包括するmedia-section__imageを追加してます。
|
|
4
|
+
これは、img要素に直接スタイルを入れるとブラウザによって比率が保たれずつぶれる問題を回避するためです。
|
|
5
|
+
|
|
1
6
|
```HTML
|
|
2
7
|
<!DOCTYPE html>
|
|
3
8
|
<html lang="ja">
|
1
まず、main要素はブラウザによって明示的にdisplay:block;を指定しなければ、max-widthが効かないことがあります。
answer
CHANGED
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
/* ここから、オリジナルのスタイルを定義
|
|
41
41
|
----------------------------------------------------------------- */
|
|
42
42
|
main {
|
|
43
|
+
display: block;
|
|
43
44
|
margin: 0 auto;
|
|
44
45
|
padding-top: 24px;
|
|
45
46
|
padding-right: 4px;
|
|
@@ -61,10 +62,11 @@
|
|
|
61
62
|
flex: 1;
|
|
62
63
|
width: calc(100%/2 - 4px);
|
|
63
64
|
}
|
|
64
|
-
.media-section__images >
|
|
65
|
+
.media-section__images > .media-section__image {
|
|
65
66
|
padding: 4px;
|
|
66
67
|
flex: 1;
|
|
67
68
|
width: calc(100%/2 - 4px);
|
|
69
|
+
text-align: center;
|
|
68
70
|
}
|
|
69
71
|
</style>
|
|
70
72
|
</head>
|
|
@@ -76,7 +78,9 @@
|
|
|
76
78
|
<p class="media-section__text">あ・い・う・え・お、か・き・く・け・こ、さ・し・す・せ・そ、た・ち・つ・て・と、な・に・ぬ・ね・の、は・ひ・ふ・へ・ほ、ま・み・む・め・も、や・ゆ・よ、ら・り・る・れ・ろ、わ・を・ん。</p>
|
|
77
79
|
</div>
|
|
78
80
|
<div class="media-section__images">
|
|
81
|
+
<div class="media-section__image">
|
|
79
|
-
|
|
82
|
+
<img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
|
|
83
|
+
</div>
|
|
80
84
|
</div>
|
|
81
85
|
</div>
|
|
82
86
|
<div class="media-section">
|
|
@@ -85,8 +89,12 @@
|
|
|
85
89
|
<p class="media-section__text">あ・い・う・え・お、か・き・く・け・こ、さ・し・す・せ・そ、た・ち・つ・て・と、な・に・ぬ・ね・の、は・ひ・ふ・へ・ほ、ま・み・む・め・も、や・ゆ・よ、ら・り・る・れ・ろ、わ・を・ん。</p>
|
|
86
90
|
</div>
|
|
87
91
|
<div class="media-section__images">
|
|
92
|
+
<div class="media-section__image">
|
|
88
|
-
|
|
93
|
+
<img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
|
|
94
|
+
</div>
|
|
95
|
+
<div class="media-section__image">
|
|
89
|
-
|
|
96
|
+
<img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
|
|
97
|
+
</div>
|
|
90
98
|
</div>
|
|
91
99
|
</div>
|
|
92
100
|
</main>
|