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

回答編集履歴

3

表示例を追加

2021/08/31 05:52

投稿

Daregada
Daregada

スコア11990

answer CHANGED
@@ -36,4 +36,6 @@
36
36
  - object-fit: contain;
37
37
  + width: 25vw;
38
38
  }
39
- ```
39
+ ```
40
+
41
+ ![サンプル画像](194e7419b869110abfdfe0ffb87874ff.png)

2

画像の幅を揃えるように変更

2021/08/31 05:52

投稿

Daregada
Daregada

スコア11990

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

コメントに基づいて修正

2021/08/31 05:48

投稿

Daregada
Daregada

スコア11990

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
- width: 100%;
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
  ```