teratail
回答率
85.48%
質問するログイン新規登録
トップRubyに関する質問CSSで画像を一列に表示する方法

編集履歴

回答編集履歴

4

Flexbox版を追記

2018/07/11 11:21

投稿

root_jp
root_jp

スコア4666

test CHANGED
@@ -69,3 +69,37 @@
69
69
  }
70
70
 
71
71
  ```
72
+
73
+
74
+
75
+ ### 追記 Flexbox版
76
+
77
+ ```CSS
78
+
79
+ #list {
80
+
81
+ display: flex;
82
+
83
+ flex-wrap: wrap;
84
+
85
+ width: 570px;
86
+
87
+ }
88
+
89
+
90
+
91
+ #list figure {
92
+
93
+ margin: 20px;
94
+
95
+ }
96
+
97
+
98
+
99
+ #list figcaption {
100
+
101
+ width: 150px;
102
+
103
+ }
104
+
105
+ ```

3

質問にある手書きの内容に近づけた

2018/07/11 11:21

投稿

root_jp
root_jp

スコア4666

test CHANGED
@@ -4,41 +4,41 @@
4
4
 
5
5
  <figure>
6
6
 
7
- <img src="https://placehold.jp/150x150.png" alt="">
7
+ <img src="https://placehold.jp/150x150.png" alt="写真１">
8
8
 
9
- <figcaption>写真１</figcaption>
9
+ <figcaption>写真１のタイトル</figcaption>
10
10
 
11
11
  </figure>
12
12
 
13
13
  <figure>
14
14
 
15
- <img src="https://placehold.jp/150x150.png" alt="">
15
+ <img src="https://placehold.jp/150x150.png" alt="写真２">
16
16
 
17
- <figcaption>写真２</figcaption>
17
+ <figcaption>写真２のタイトル</figcaption>
18
18
 
19
19
  </figure>
20
20
 
21
21
  <figure>
22
22
 
23
- <img src="https://placehold.jp/150x150.png" alt="">
23
+ <img src="https://placehold.jp/150x150.png" alt="写真３">
24
24
 
25
- <figcaption>写真３</figcaption>
25
+ <figcaption>写真３のタイトル</figcaption>
26
26
 
27
27
  </figure>
28
28
 
29
29
  <figure>
30
30
 
31
- <img src="https://placehold.jp/150x150.png" alt="">
31
+ <img src="https://placehold.jp/150x150.png" alt="写真４">
32
32
 
33
- <figcaption>写真４</figcaption>
33
+ <figcaption>写真４のタイトル</figcaption>
34
34
 
35
35
  </figure>
36
36
 
37
37
  <figure>
38
38
 
39
- <img src="https://placehold.jp/150x150.png" alt="">
39
+ <img src="https://placehold.jp/150x150.png" alt="写真５">
40
40
 
41
- <figcaption>写真５</figcaption>
41
+ <figcaption>写真５のタイトル</figcaption>
42
42
 
43
43
  </figure>
44
44
 
@@ -60,4 +60,12 @@
60
60
 
61
61
  }
62
62
 
63
+
64
+
65
+ #list figcaption {
66
+
67
+ width: 150px;
68
+
69
+ }
70
+
63
71
  ```

2

写真のタイトルの考慮が抜けてたため修正

2018/07/11 08:38

投稿

root_jp
root_jp

スコア4666

test CHANGED
@@ -1,18 +1,48 @@
1
1
  ```HTML
2
2
 
3
- <div id="list">
3
+ <article id="list">
4
4
 
5
- <img src="https://placehold.jp/150x150.png" alt="">
5
+ <figure>
6
6
 
7
- <img src="https://placehold.jp/150x150.png" alt="">
7
+ <img src="https://placehold.jp/150x150.png" alt="">
8
8
 
9
- <img src="https://placehold.jp/150x150.png" alt="">
9
+ <figcaption>写真１</figcaption>
10
10
 
11
- <img src="https://placehold.jp/150x150.png" alt="">
11
+ </figure>
12
12
 
13
- <img src="https://placehold.jp/150x150.png" alt="">
13
+ <figure>
14
14
 
15
+ <img src="https://placehold.jp/150x150.png" alt="">
16
+
17
+ <figcaption>写真２</figcaption>
18
+
15
- </div>
19
+ </figure>
20
+
21
+ <figure>
22
+
23
+ <img src="https://placehold.jp/150x150.png" alt="">
24
+
25
+ <figcaption>写真３</figcaption>
26
+
27
+ </figure>
28
+
29
+ <figure>
30
+
31
+ <img src="https://placehold.jp/150x150.png" alt="">
32
+
33
+ <figcaption>写真４</figcaption>
34
+
35
+ </figure>
36
+
37
+ <figure>
38
+
39
+ <img src="https://placehold.jp/150x150.png" alt="">
40
+
41
+ <figcaption>写真５</figcaption>
42
+
43
+ </figure>
44
+
45
+ </article>
16
46
 
17
47
  ```
18
48
 
@@ -26,7 +56,7 @@
26
56
 
27
57
  grid-template-columns: repeat(3, 150px);
28
58
 
29
- grid-gap: 20px 20px;
59
+ grid-column-gap: 20px;
30
60
 
31
61
  }
32
62
 

1

変更

2018/07/11 08:27

投稿

root_jp
root_jp

スコア4666

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  display: grid;
26
26
 
27
- grid-template-columns: 150px 150px 150px;
27
+ grid-template-columns: repeat(3, 150px);
28
28
 
29
29
  grid-gap: 20px 20px;
30
30