teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問CSSで画像を複数枚、並べて表示したい

編集履歴

質問編集履歴

8

再度修正をしてみました

2018/12/11 07:48

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -23,12 +23,6 @@
23
23
 
24
24
 
25
25
  試しにheightをpxではなく100%などと変えてはみるのですがそうすると画像が表示されなくなってしまいます。
26
-
27
-
28
-
29
- ちなみに今このような状態です
30
-
31
- [https://jsfiddle.net/rxte57hw/6/](https://jsfiddle.net/rxte57hw/6/)
32
26
 
33
27
 
34
28
 
@@ -70,73 +64,61 @@
70
64
 
71
65
  .image {
72
66
 
73
- display: flex;
67
+ display: flex
74
68
 
75
- flex-direction: column;
69
+ flex-direction: column;
76
70
 
71
+ width: 100%;
72
+
77
- }
73
+ ;}
78
74
 
79
75
 
80
76
 
81
77
  .img-1 {
82
78
 
83
- background-image: url( 画像ファイルのURL );
79
+ width: 100%;
84
80
 
85
- width: 100%;
81
+ height: 620px;
86
82
 
87
- height: 624px;
83
+ background: url(https://placehold.jp/3d4070/ffffff/200x200.png) no-repeat top left;
88
84
 
89
- background-size: 100%;
85
+ background-size: 100%;
90
-
91
- background-repeat: no-repeat;
92
86
 
93
87
  }
94
88
 
95
-
96
-
97
89
  .img-2 {
98
90
 
99
- background-image: url( 画像ファイルのURL );
91
+ width: 100%;
100
92
 
101
- width: 100%;
93
+ height: 620px;
102
94
 
103
- height: 624px;
95
+ background: url(https://placehold.jp/200x200.png ) no-repeat top left;
104
96
 
105
- background-size: 100%;
97
+ background-size: 100%;
106
-
107
- background-repeat: no-repeat;
108
98
 
109
99
  }
110
100
 
111
-
112
-
113
101
  .img-3 {
114
102
 
115
- background-image: url( 画像ファイルのURL );
103
+ width: 100%;
116
104
 
117
- width: 100%;
105
+ height: 620px;
118
106
 
119
- height: 624px;
107
+ background: url(https://placehold.jp/3d4070/ffffff/200x200.png ) no-repeat top left;
120
108
 
121
- background-size: 100%;
109
+ background-size: 100%;
122
-
123
- background-repeat: no-repeat;
124
110
 
125
111
  }
126
112
 
127
-
128
-
129
113
  .img-4 {
130
114
 
131
- background-image: url( 画像ファイルのURL );
115
+ width: 100%;
132
116
 
133
- width: 100%;
117
+ height: 620px;
134
118
 
135
- height: 624px;
119
+ background: url(https://placehold.jp/200x200.png ) no-repeat top left;
136
120
 
137
- background-size: 100%;
121
+ background-size: 100%;
138
-
139
- background-repeat: no-repeat;
140
122
 
141
123
  }
142
124
 

7

再度修正をしてみました

2018/12/11 07:48

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  ### 発生している問題・エラーメッセージ
40
40
 
41
- サイズが自動的に変わらない、画像同士が重なる、もしくは表示されない
41
+ ブラウザの画面サイズによって、画像の縦のサイズが自動的に変わらない
42
42
 
43
43
 
44
44
 

6

再度修正をしてみました

2018/12/11 07:43

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ちなみに今このような状態です
30
30
 
31
- https://jsfiddle.net/rxte57hw/6/
31
+ [https://jsfiddle.net/rxte57hw/6/](https://jsfiddle.net/rxte57hw/6/)
32
32
 
33
33
 
34
34
 

5

再度修正をしてみました

2018/12/11 07:36

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -23,6 +23,14 @@
23
23
 
24
24
 
25
25
  試しにheightをpxではなく100%などと変えてはみるのですがそうすると画像が表示されなくなってしまいます。
26
+
27
+
28
+
29
+ ちなみに今このような状態です
30
+
31
+ https://jsfiddle.net/rxte57hw/6/
32
+
33
+
26
34
 
27
35
 
28
36
 

4

再度修正をしてみました

2018/12/11 07:35

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,14 @@
15
15
 
16
16
 
17
17
  自分でいろいろと試してはいるのですがなかなか改善されません
18
+
19
+
20
+
21
+ 画像を横並びにする場合は特に問題はないのですが、スマホ用に画像を縦並びにしてしまうと縦の画像サイズが変わってくれません
22
+
23
+
24
+
25
+ 試しにheightをpxではなく100%などと変えてはみるのですがそうすると画像が表示されなくなってしまいます。
18
26
 
19
27
 
20
28
 

3

再度修正をしてみました

2018/12/11 07:31

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -52,21 +52,77 @@
52
52
 
53
53
  ```css
54
54
 
55
+ .image {
56
+
55
- .image {display: flex;}
57
+ display: flex;
58
+
59
+ flex-direction: column;
60
+
61
+ }
56
62
 
57
63
 
58
64
 
59
- .img-1 {background-image: url( 画像ファイルのURL );}
65
+ .img-1 {
60
66
 
61
- .img-2 {background-image: url( 画像ファイルのURL );}
67
+ background-image: url( 画像ファイルのURL );
62
68
 
63
- .img-3 {background-image: url( 画像ファイルのURL );}
69
+ width: 100%;
64
70
 
65
- .img-4 {background-image: url( 画像ファイルのURL );}
71
+ height: 624px;
66
72
 
67
- .img-5 {background-image: url( 画像ファイルのURL );}
73
+ background-size: 100%;
68
74
 
75
+ background-repeat: no-repeat;
76
+
77
+ }
78
+
79
+
80
+
81
+ .img-2 {
82
+
69
- .img-6 {background-image: url( 画像ファイルのURL );}
83
+ background-image: url( 画像ファイルのURL );
84
+
85
+ width: 100%;
86
+
87
+ height: 624px;
88
+
89
+ background-size: 100%;
90
+
91
+ background-repeat: no-repeat;
92
+
93
+ }
94
+
95
+
96
+
97
+ .img-3 {
98
+
99
+ background-image: url( 画像ファイルのURL );
100
+
101
+ width: 100%;
102
+
103
+ height: 624px;
104
+
105
+ background-size: 100%;
106
+
107
+ background-repeat: no-repeat;
108
+
109
+ }
110
+
111
+
112
+
113
+ .img-4 {
114
+
115
+ background-image: url( 画像ファイルのURL );
116
+
117
+ width: 100%;
118
+
119
+ height: 624px;
120
+
121
+ background-size: 100%;
122
+
123
+ background-repeat: no-repeat;
124
+
125
+ }
70
126
 
71
127
  ```
72
128
 

2

修正をしてみました

2018/12/11 07:29

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -50,11 +50,11 @@
50
50
 
51
51
 
52
52
 
53
+ ```css
54
+
53
55
  .image {display: flex;}
54
56
 
55
57
 
56
-
57
- ```css
58
58
 
59
59
  .img-1 {background-image: url( 画像ファイルのURL );}
60
60
 

1

修正をしてみました

2018/12/11 05:06

投稿

yokoyama_takuzo
yokoyama_takuzo

スコア19

test CHANGED
File without changes
test CHANGED
@@ -32,9 +32,9 @@
32
32
 
33
33
 
34
34
 
35
- #### HTML
35
+ ```html
36
36
 
37
- <div class="image">
37
+ <div class="image">
38
38
 
39
39
  <div class="img-1"></div>
40
40
 
@@ -44,15 +44,17 @@
44
44
 
45
45
  <div class="img-4"></div>
46
46
 
47
- </div>
47
+ </div>
48
+
49
+ ```
48
50
 
49
51
 
50
-
51
- #### CSS
52
52
 
53
53
  .image {display: flex;}
54
54
 
55
55
 
56
+
57
+ ```css
56
58
 
57
59
  .img-1 {background-image: url( 画像ファイルのURL );}
58
60
 
@@ -66,6 +68,8 @@
66
68
 
67
69
  .img-6 {background-image: url( 画像ファイルのURL );}
68
70
 
71
+ ```
72
+
69
73
 
70
74
 
71
75