回答編集履歴
3
表示例を追加
answer
CHANGED
|
@@ -36,4 +36,6 @@
|
|
|
36
36
|
- object-fit: contain;
|
|
37
37
|
+ width: 25vw;
|
|
38
38
|
}
|
|
39
|
-
```
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
|
2
画像の幅を揃えるように変更
answer
CHANGED
|
@@ -26,4 +26,14 @@
|
|
|
26
26
|
+ padding-left: 0;
|
|
27
27
|
+ justify-content: space-evenly;
|
|
28
28
|
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
さらに追加:
|
|
32
|
+
画像の実サイズが「2200x1900」「1472x1664」「1000x1100」と、画面サイズに対してかなり大きいことが判明したので、実サイズによらず画面の幅に対して一定の割合で表示するようにする。
|
|
33
|
+
|
|
34
|
+
```diff
|
|
35
|
+
.gallery img {
|
|
36
|
+
- object-fit: contain;
|
|
37
|
+
+ width: 25vw;
|
|
38
|
+
}
|
|
29
39
|
```
|
1
コメントに基づいて修正
answer
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
左に寄っているのは、li要素の内容(画像と見出し)ですから、`text-align: center;`を付けてやればいいのでは。
|
|
2
|
+
修正分: `width: 100%;`を削除。h1要素の見出しより画像の幅が広ければ、これでli要素の幅は画像とほぼ一致するようになる。
|
|
2
3
|
|
|
3
4
|
```diff
|
|
4
5
|
.gallery li {
|
|
5
6
|
display: block;
|
|
6
|
-
|
|
7
|
+
- width: 100%;
|
|
7
8
|
font-size: 2vw;
|
|
8
9
|
color: rgb(255, 255, 255);
|
|
9
10
|
+ text-align: center;
|
|
@@ -13,6 +14,7 @@
|
|
|
13
14
|
```
|
|
14
15
|
|
|
15
16
|
もし、質問文に書かれていない部分でマージンやパディングのリセットを行なっていないのであれば、ul要素の左側のパディングも0にしてください。
|
|
17
|
+
修正分: li要素の横幅を狭くしたことで生まれる隙間を、`justify-content: space-evenly;`で均等に配置。これで、左端、中央左、中央右、右端の4箇所の隙間がすべて同じ幅になる。もし、中央左と中央右の隙間を左右端の隙間の2倍取りたいのであれば、値を`space-around`に変更すること。
|
|
16
18
|
|
|
17
19
|
```diff
|
|
18
20
|
.gallery ul {
|
|
@@ -22,5 +24,6 @@
|
|
|
22
24
|
width: 100%;
|
|
23
25
|
padding-top: 120px;
|
|
24
26
|
+ padding-left: 0;
|
|
27
|
+
+ justify-content: space-evenly;
|
|
25
28
|
}
|
|
26
29
|
```
|