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

質問編集履歴

2

コードの追加

2021/11/11 11:47

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -24,6 +24,30 @@
24
24
  });
25
25
  });
26
26
  });
27
+
28
+ // スライドショーの挙動
29
+ const swiperVoice = new Swiper('.swiperVoice', {
30
+ slidesPerView: 'auto',
31
+ loop: true,
32
+ grabCursor: true,
33
+ spaceBetween: 8,
34
+
35
+ // If we need pagination
36
+ pagination: {
37
+ el: '.swiper-pagination',
38
+ },
39
+
40
+ // Navigation arrows
41
+ navigation: {
42
+ nextEl: '.swiper-button-next',
43
+ prevEl: '.swiper-button-prev',
44
+ },
45
+
46
+ // And if we need scrollbar
47
+ scrollbar: {
48
+ el: '.swiper-scrollbar',
49
+ },
50
+ });
27
51
  コード
28
52
  ```
29
53
 

1

css追加

2021/11/11 11:47

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -118,6 +118,134 @@
118
118
 
119
119
  css 実際はsassで書いております。
120
120
  ```
121
+ .secVoice {
122
+ background-color: #EFEEEB;
123
+ }
124
+
125
+ .secVoice .commonInner {
126
+ width: 100%;
127
+ }
128
+
129
+ .secVoice .commonInner .commonTitleBlock {
130
+ width: 1000px;
131
+ margin: 0 auto 64px;
132
+ }
133
+
134
+ .secVoice .commonInner .swiperVoice .swiper-wrapper {
135
+ width: 1000px;
136
+ margin: 0 auto;
137
+ }
138
+
139
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide {
140
+ width: 660px;
141
+ height: 578px;
142
+ background-color: #fff;
143
+ }
144
+
145
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner {
146
+ padding: 48px 48px 0px 48px;
147
+ }
148
+
149
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember {
150
+ display: -webkit-box;
151
+ display: -ms-flexbox;
152
+ display: flex;
153
+ -webkit-box-pack: justify;
154
+ -ms-flex-pack: justify;
155
+ justify-content: space-between;
156
+ }
157
+
158
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember img {
159
+ display: block;
160
+ width: 248px;
161
+ height: 248px;
162
+ -o-object-fit: cover;
163
+ object-fit: cover;
164
+ }
165
+
166
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div {
167
+ width: 296px;
168
+ display: -webkit-box;
169
+ display: -ms-flexbox;
170
+ display: flex;
171
+ -webkit-box-orient: vertical;
172
+ -webkit-box-direction: normal;
173
+ -ms-flex-direction: column;
174
+ flex-direction: column;
175
+ -webkit-box-pack: justify;
176
+ -ms-flex-pack: justify;
177
+ justify-content: space-between;
178
+ }
179
+
180
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div h3 {
181
+ font-size: 1.8rem;
182
+ letter-spacing: 0.01em;
183
+ line-height: 1.7;
184
+ }
185
+
186
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberJob {
187
+ font-size: 1.4rem;
188
+ line-height: 1.7;
189
+ }
190
+
191
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberHistory {
192
+ font-size: 1.3rem;
193
+ line-height: 1.7;
194
+ letter-spacing: 0.01em;
195
+ }
196
+
197
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberMessage {
198
+ margin-top: 28px;
199
+ letter-spacing: 0.01em;
200
+ }
201
+
202
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberMessage .messageMargin {
203
+ margin-bottom: 28px;
204
+ }
205
+ @media screen and (max-width: 640px) {
206
+ .secVoice .commonInner .commonTitleBlock {
207
+ width: 80%;
208
+ margin: 0 auto 64px;
209
+ }
210
+ .secVoice .commonInner .swiperVoice .swiper-wrapper {
211
+ width: 80%;
212
+ margin: 0 auto;
213
+ }
214
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide {
215
+ width: 100%;
216
+ height: auto;
217
+ }
218
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner {
219
+ padding: 24px 24px 40px;
220
+ }
221
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember {
222
+ display: -webkit-box;
223
+ display: -ms-flexbox;
224
+ display: flex;
225
+ -webkit-box-orient: vertical;
226
+ -webkit-box-direction: normal;
227
+ -ms-flex-direction: column;
228
+ flex-direction: column;
229
+ }
230
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember img {
231
+ width: 100%;
232
+ height: auto;
233
+ margin-right: 0px;
234
+ margin-bottom: 20px;
235
+ }
236
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div {
237
+ width: 100%;
238
+ }
239
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div h3 {
240
+ font-size: 1.8rem;
241
+ }
242
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberJob {
243
+ font-size: 1.4rem;
244
+ margin-bottom: 24px;
245
+ }
246
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .VoiceMember div .MemberHistory {
247
+ font-size: 1.3rem;
248
+ }
121
249
  .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberSlideArrow {
122
250
  position: absolute;
123
251
  left: 50%;
@@ -134,5 +262,8 @@
134
262
  display: none;
135
263
  font-size: 1.4rem;
136
264
  }
265
+ .secVoice .commonInner .swiperVoice .swiper-wrapper .swiper-slide .slideInner .MemberMessage .messageMargin {
266
+ margin-bottom: 24px;
137
- コード
267
+ }
268
+ }
138
269
  ```