質問編集履歴

3

修正

2020/11/04 02:15

投稿

MH00214
MH00214

スコア53

test CHANGED
File without changes
test CHANGED
@@ -1,283 +1 @@
1
- ## 解決したい問題
2
-
3
-
4
-
5
- よくある3列横並びのカードUIを作っています。
6
-
7
- カードの構成としては
8
-
9
-
10
-
11
- ```
12
-
13
- ------- ------- -------
14
-
15
- | | | | | |
16
-
17
- | | | | | |
18
-
19
- | | | | | |
20
-
21
- ------- ------- -------
22
-
23
-
24
-
25
- ```
26
-
27
- のようになっていて、カードの中に上から
28
-
29
- * 画像
30
-
31
- * タイトル
32
-
33
- * カテゴリ名
34
-
35
- が入っています。
36
-
37
- カードの横並びは `display:flex`を使って実現しています。
38
-
39
-
40
-
41
- タイトルが長くなった時に
42
-
43
-
44
-
45
- 画像    画像
46
-
47
-            
48
-
49
- タイトル  タイトル
50
-
51
- タイトル  タイトル
52
-
53
- タイトル  
54
-
55
-      カテゴリ 
56
-
57
- カテゴリ
58
-
59
-
60
-
61
- のように位置がずれてしまいます。(カードそのものの高さは `display:flex` を使っているので揃っています。・
62
-
63
- タイトルのmax行を決めれば問題はなくなる気がするのですが、運用上それだとダメかもしれないので、位置がずれないようにするにはどうしたらいいかご指導いただけると幸いです。
64
-
65
-
66
-
67
- Railsのコードも混ざているんですが、HTMLとSCSSも載せおきます。
1
+ 一部不具合を含んだコードや誤た記述あったため質問を削除しました。再度調べ直し投稿します。
68
-
69
-
70
-
71
- ```HTML
72
-
73
- <div class="news-content-cards">
74
-
75
- <% articles.each do |article| %>
76
-
77
- <%= link_to article.url(relative: true), class: "news-content-card" do %>
78
-
79
- <% if cms_fragment_content(:hero_image, article).present? %>
80
-
81
- <%= image_tag cms_fragment_content(:hero_image, article).first.variant(resize: '480x270').processed, class: "news-content-card-image", alt: "#{cms_fragment_content(:title, article)}>" %>
82
-
83
- <% else %>
84
-
85
- <%= image_tag "pages/cms/news/image.png", class: "news-content-card-image" %>
86
-
87
- <% end %>
88
-
89
- <div class="news-content-card-info">
90
-
91
- <p class="news-date"><%= cms_fragment_content(:publish_date, article) %></p>
92
-
93
- <h3 class="news-title"><%= cms_fragment_content(:title, article) %></h3>
94
-
95
- <p class="news-category">
96
-
97
- <% article.categories.each do |article_category| %>
98
-
99
- <%= article_category.label %>
100
-
101
- <% end %>
102
-
103
- </p>
104
-
105
- </div>
106
-
107
- <% end %>
108
-
109
- <% end %>
110
-
111
- </div>
112
-
113
- ```
114
-
115
-
116
-
117
- ```SCSS
118
-
119
- .news-content-cards {
120
-
121
- display: flex;
122
-
123
- flex-wrap: wrap;
124
-
125
-
126
-
127
- @media screen and (max-width: 767px) {
128
-
129
- display: block;
130
-
131
- }
132
-
133
- }
134
-
135
-
136
-
137
- .news-content-card {
138
-
139
- background: $WHITE;
140
-
141
- border-radius: 12px;
142
-
143
- max-width: 330px;
144
-
145
- margin: 0 32px 32px 0;
146
-
147
- box-shadow: 0px 4px 24px rgba($RICH_BLACK, 0.15);
148
-
149
- transition: all 0.2s;
150
-
151
- display: block;
152
-
153
-
154
-
155
- @media screen and (max-width: 1200px) {
156
-
157
- width: calc((100% - 64px) / 3);
158
-
159
- }
160
-
161
-
162
-
163
- @media screen and (max-width: 767px) {
164
-
165
- max-width: 350px;
166
-
167
- margin: 0 0 32px;
168
-
169
- width: auto;
170
-
171
- }
172
-
173
-
174
-
175
- @media screen and (max-width: 414px) {
176
-
177
- margin: 0 auto 32px;
178
-
179
- }
180
-
181
-
182
-
183
- &:hover,
184
-
185
- &:focus {
186
-
187
- box-shadow: 0px 4px 36px rgba($RICH_BLACK, 0.3);
188
-
189
- }
190
-
191
-
192
-
193
- &:active {
194
-
195
- box-shadow: 0px 4px 16px rgba($RICH_BLACK, 0.3);
196
-
197
- }
198
-
199
-
200
-
201
- &:nth-of-type(3n) {
202
-
203
- margin: 0 0 32px;
204
-
205
-
206
-
207
- @media screen and (max-width: 414px) {
208
-
209
- margin: 0 auto 32px;
210
-
211
- }
212
-
213
- }
214
-
215
- }
216
-
217
-
218
-
219
- .news-content-card-image {
220
-
221
- border-radius: 12px 12px 0 0;
222
-
223
- }
224
-
225
-
226
-
227
- .news-content-card-info {
228
-
229
- padding: 24px;
230
-
231
- }
232
-
233
-
234
-
235
- .news-date {
236
-
237
- font-size: 16px;
238
-
239
- line-height: 16px;
240
-
241
- margin-bottom: 8px;
242
-
243
- color: $DARK_GRAY;
244
-
245
- letter-spacing: 0.03em;
246
-
247
- }
248
-
249
-
250
-
251
- .news-title {
252
-
253
- font-weight: bold;
254
-
255
- font-size: 18px;
256
-
257
- line-height: 24px;
258
-
259
- color: $DARK_GRAY;
260
-
261
- margin-bottom: 24px;
262
-
263
- letter-spacing: 0.05em;
264
-
265
- }
266
-
267
-
268
-
269
- .news-category {
270
-
271
- font-weight: bold;
272
-
273
- font-size: 16px;
274
-
275
- line-height: 16px;
276
-
277
- color: $SPANISH_GRAY;
278
-
279
- }
280
-
281
-
282
-
283
- ```

2

コード追記

2020/11/04 02:15

投稿

MH00214
MH00214

スコア53

test CHANGED
File without changes
test CHANGED
@@ -61,3 +61,223 @@
61
61
  のように位置がずれてしまいます。(カードそのものの高さは `display:flex` を使っているので揃っています。・
62
62
 
63
63
  タイトルのmax行を決めれば問題はなくなる気がするのですが、運用上それだとダメかもしれないので、位置がずれないようにするにはどうしたらいいかご指導いただけると幸いです。
64
+
65
+
66
+
67
+ Railsのコードも混ざっているんですが、HTMLとSCSSも載せておきます。
68
+
69
+
70
+
71
+ ```HTML
72
+
73
+ <div class="news-content-cards">
74
+
75
+ <% articles.each do |article| %>
76
+
77
+ <%= link_to article.url(relative: true), class: "news-content-card" do %>
78
+
79
+ <% if cms_fragment_content(:hero_image, article).present? %>
80
+
81
+ <%= image_tag cms_fragment_content(:hero_image, article).first.variant(resize: '480x270').processed, class: "news-content-card-image", alt: "#{cms_fragment_content(:title, article)}>" %>
82
+
83
+ <% else %>
84
+
85
+ <%= image_tag "pages/cms/news/image.png", class: "news-content-card-image" %>
86
+
87
+ <% end %>
88
+
89
+ <div class="news-content-card-info">
90
+
91
+ <p class="news-date"><%= cms_fragment_content(:publish_date, article) %></p>
92
+
93
+ <h3 class="news-title"><%= cms_fragment_content(:title, article) %></h3>
94
+
95
+ <p class="news-category">
96
+
97
+ <% article.categories.each do |article_category| %>
98
+
99
+ <%= article_category.label %>
100
+
101
+ <% end %>
102
+
103
+ </p>
104
+
105
+ </div>
106
+
107
+ <% end %>
108
+
109
+ <% end %>
110
+
111
+ </div>
112
+
113
+ ```
114
+
115
+
116
+
117
+ ```SCSS
118
+
119
+ .news-content-cards {
120
+
121
+ display: flex;
122
+
123
+ flex-wrap: wrap;
124
+
125
+
126
+
127
+ @media screen and (max-width: 767px) {
128
+
129
+ display: block;
130
+
131
+ }
132
+
133
+ }
134
+
135
+
136
+
137
+ .news-content-card {
138
+
139
+ background: $WHITE;
140
+
141
+ border-radius: 12px;
142
+
143
+ max-width: 330px;
144
+
145
+ margin: 0 32px 32px 0;
146
+
147
+ box-shadow: 0px 4px 24px rgba($RICH_BLACK, 0.15);
148
+
149
+ transition: all 0.2s;
150
+
151
+ display: block;
152
+
153
+
154
+
155
+ @media screen and (max-width: 1200px) {
156
+
157
+ width: calc((100% - 64px) / 3);
158
+
159
+ }
160
+
161
+
162
+
163
+ @media screen and (max-width: 767px) {
164
+
165
+ max-width: 350px;
166
+
167
+ margin: 0 0 32px;
168
+
169
+ width: auto;
170
+
171
+ }
172
+
173
+
174
+
175
+ @media screen and (max-width: 414px) {
176
+
177
+ margin: 0 auto 32px;
178
+
179
+ }
180
+
181
+
182
+
183
+ &:hover,
184
+
185
+ &:focus {
186
+
187
+ box-shadow: 0px 4px 36px rgba($RICH_BLACK, 0.3);
188
+
189
+ }
190
+
191
+
192
+
193
+ &:active {
194
+
195
+ box-shadow: 0px 4px 16px rgba($RICH_BLACK, 0.3);
196
+
197
+ }
198
+
199
+
200
+
201
+ &:nth-of-type(3n) {
202
+
203
+ margin: 0 0 32px;
204
+
205
+
206
+
207
+ @media screen and (max-width: 414px) {
208
+
209
+ margin: 0 auto 32px;
210
+
211
+ }
212
+
213
+ }
214
+
215
+ }
216
+
217
+
218
+
219
+ .news-content-card-image {
220
+
221
+ border-radius: 12px 12px 0 0;
222
+
223
+ }
224
+
225
+
226
+
227
+ .news-content-card-info {
228
+
229
+ padding: 24px;
230
+
231
+ }
232
+
233
+
234
+
235
+ .news-date {
236
+
237
+ font-size: 16px;
238
+
239
+ line-height: 16px;
240
+
241
+ margin-bottom: 8px;
242
+
243
+ color: $DARK_GRAY;
244
+
245
+ letter-spacing: 0.03em;
246
+
247
+ }
248
+
249
+
250
+
251
+ .news-title {
252
+
253
+ font-weight: bold;
254
+
255
+ font-size: 18px;
256
+
257
+ line-height: 24px;
258
+
259
+ color: $DARK_GRAY;
260
+
261
+ margin-bottom: 24px;
262
+
263
+ letter-spacing: 0.05em;
264
+
265
+ }
266
+
267
+
268
+
269
+ .news-category {
270
+
271
+ font-weight: bold;
272
+
273
+ font-size: 16px;
274
+
275
+ line-height: 16px;
276
+
277
+ color: $SPANISH_GRAY;
278
+
279
+ }
280
+
281
+
282
+
283
+ ```

1

修正

2020/09/17 11:47

投稿

MH00214
MH00214

スコア53

test CHANGED
@@ -1 +1 @@
1
- カードの中身の位置を揃えたい
1
+ 【CSS】カードの中身の位置を揃えたい
test CHANGED
File without changes