質問編集履歴

1

修正

2020/11/04 02:16

投稿

MH00214
MH00214

スコア53

test CHANGED
File without changes
test CHANGED
@@ -49,117 +49,3 @@
49
49
  問題を起こしているのは下記のコードにもある
50
50
 
51
51
  `nth-of-type(3n) {...}` の部分であることは明白なのですが、どのようにその問題を回避したら良いかわかりません。。
52
-
53
-
54
-
55
-
56
-
57
- ## ソースコード
58
-
59
-
60
-
61
- ```HTML
62
-
63
- <div class="news-content-cards">
64
-
65
- <% news.each do |article| %>
66
-
67
- <%= link_to article.url(relative: true), class: "news-content-card news-content-#{cms_fragment_content(:category_en, article)} active" do %>
68
-
69
- <% if cms_fragment_content(:hero_image, article).present? %>
70
-
71
- <%= image_tag cms_fragment_content(:hero_image, article).first.variant(resize: '480x287').processed, class: "news-content-card-image", alt: "#{cms_fragment_content(:title, article)}>" %>
72
-
73
- <% else %>
74
-
75
- <%= image_tag "pages/cms/news/image.png", class: "news-content-card-image" %>
76
-
77
- <% end %>
78
-
79
- <div class="news-content-card-info">
80
-
81
- <p class="news-date"><%= cms_fragment_content(:publish_date, article) %></p>
82
-
83
- <h3 class="news-title"><%= cms_fragment_content(:title, article) %></h3>
84
-
85
- <p class="news-category"><%= cms_fragment_content(:category_jp, article) %></p>
86
-
87
- </div>
88
-
89
- <% end %>
90
-
91
- <% end %>
92
-
93
- </div>
94
-
95
- ```
96
-
97
-
98
-
99
- 下記の3nの時にmargin-right:0 となっていることが原因で、optionタグを切り替えた時にもそれが残ってしまい、本来32px開けたい右側のマージンが残ってしまっている状況です。
100
-
101
-
102
-
103
- ```CSS
104
-
105
- .news-content-cards .active:nth-of-type(3n) {
106
-
107
- margin-right: 0;
108
-
109
-
110
-
111
- @media screen and (max-width: 767px) {
112
-
113
- margin: 0 0 32px;
114
-
115
- }
116
-
117
-
118
-
119
- @media screen and (max-width: 414px) {
120
-
121
- margin: 0 auto 32px;
122
-
123
- }
124
-
125
- }
126
-
127
-
128
-
129
- ```
130
-
131
-
132
-
133
-
134
-
135
- ```javascript
136
-
137
- $(function () {
138
-
139
- $(".news-category-select-box").change(function () {
140
-
141
- const $selectBoxValue = $(this).val();
142
-
143
- $(".news-content-card").removeClass("active");
144
-
145
- if ($selectBoxValue === "all") {
146
-
147
- $(".news-content-card").addClass("active");
148
-
149
- }
150
-
151
- $(".news-content-" + $selectBoxValue).addClass("active");
152
-
153
- })
154
-
155
- });
156
-
157
- ```
158
-
159
-
160
-
161
- いまはjQueryを使って実装していますが、いま開発しているプロダクトはVue.jsでもかけるようにになっているので、そちらの解決方法でも構いません。
162
-
163
-
164
-
165
- よろしくお願いいたします!