質問編集履歴

1

下の方に質問の追記をしました。よろしくお願いします。

2020/09/04 06:44

投稿

takawork
takawork

スコア95

test CHANGED
File without changes
test CHANGED
@@ -6,325 +6,439 @@
6
6
 
7
7
  どうしたら出てきますか?
8
8
 
9
+ ![イメージ説明](50761e1f351b12bef296e1860f82172a.png)
10
+
11
+ ![イメージ説明](4a12a590f93d032d66e47a1430ae7aa5.png)
12
+
13
+ ```
14
+
15
+ <div class="c-grid pa-top-guilde-list" >
16
+
17
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
18
+
19
+ <a href="/guide/type/" data-ga-category="top_201802_facility-guide" data-ga-label="type">
20
+
21
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/type.png" alt=""></p>
22
+
23
+ <dl class="js-match-height">
24
+
25
+ <dt>老人ホームの種類</dt>
26
+
27
+ <dd>有料老人ホームや介護施設の種類、入居にあたってのメリット・デメリットを知れば、施設選びのポイントがわかります。</dd>
28
+
29
+ </dl>
30
+
31
+ </a>
32
+
33
+ </div>
34
+
35
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
36
+
37
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="cost">
38
+
39
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/cost.png" alt=""></p>
40
+
41
+ <dl class="js-match-height">
42
+
43
+ <dt>老人ホームの費用</dt>
44
+
45
+ <dd>費用や料金の相場をわかりやすく解説。入居一時金や月額利用料の複雑な料金形態もこれで納得。</dd>
46
+
47
+ </dl>
48
+
49
+ </a>
50
+
51
+ </div>
52
+
53
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
54
+
55
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="how-to-choose">
56
+
57
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/how-to-choose.png" alt=""></p>
58
+
59
+ <dl class="js-match-height">
60
+
61
+ <dt>老人ホームの選び方</dt>
62
+
63
+ <dd>老人ホームの正しい選び方・探し方について。理想の老人ホームを探しだすコツをご説明します。<br><br></dd>
64
+
65
+ </dl>
66
+
67
+ </a>
68
+
69
+ </div>
70
+
71
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
72
+
73
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-insurance">
74
+
75
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-insurance.png" alt=""></p>
76
+
77
+ <dl class="js-match-height">
78
+
79
+ <dt>介護保険制度とは</dt>
80
+
81
+ <dd>介護施設や在宅介護サービスの利用時に活用。介護保険の仕組みや要介護認定の申請などを解説します。</dd>
82
+
83
+ </dl>
84
+
85
+ </a>
86
+
87
+ </div>
88
+
89
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
90
+
91
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="dementia">
92
+
93
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/dementia.png" alt=""></p>
94
+
95
+ <dl class="js-match-height">
96
+
97
+ <dt>認知症まるわかり</dt>
98
+
99
+ <dd style="height: 44px;">認知症の種類や原因、初期症状、徘徊や物忘れ。認知症の対応についてご説明します。</dd>
100
+
101
+ </dl>
102
+
103
+ </a>
104
+
105
+ </div>
106
+
107
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
108
+
109
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="rougo-money">
110
+
111
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/rougo-money.png" alt=""></p>
112
+
113
+ <dl class="js-match-height">
114
+
115
+ <dt>老後のお金・年金</dt>
116
+
117
+ <dd style="height: 44px;">「介護難民」にならないために、老後のお金についての資産運用方法などについてご説明します。</dd>
118
+
119
+ </dl>
120
+
121
+ </a>
122
+
123
+ </div>
124
+
125
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
126
+
127
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="homecare">
128
+
129
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/homecare.png" alt=""></p>
130
+
131
+ <dl class="js-match-height">
132
+
133
+ <dt>在宅介護について</dt>
134
+
135
+ <dd>訪問介護や通所介護(デイサービス)、訪問看護など、在宅介護に関連する各種サービスの内容について解説します。</dd>
136
+
137
+ </dl>
138
+
139
+ </a>
140
+
141
+ </div>
142
+
143
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
144
+
145
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="recreation">
146
+
147
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/recreation.png" alt=""></p>
148
+
149
+ <dl class="js-match-height">
150
+
151
+ <dt>レクリエーション</dt>
152
+
153
+ <dd>高齢者の方が楽しみながら身体や脳を動かすことのできるレクリエーション。様々なジャンルにわけてご紹介します。</dd>
154
+
155
+ </dl>
156
+
157
+ </a>
158
+
159
+ </div>
160
+
161
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
162
+
163
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-trouble">
164
+
165
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-trouble.png" alt=""></p>
166
+
167
+ <dl class="js-match-height">
168
+
169
+ <dt>介護の問題・トラブル</dt>
170
+
171
+ <dd>介護が始まると予期しない問題やトラブルが起こるもの。それらの事例や解決法についてご紹介します。</dd>
172
+
173
+ </dl>
174
+
175
+ </a>
176
+
177
+ </div>
178
+
179
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
180
+
181
+ <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-case-studies">
182
+
183
+ <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-case-studies.png" alt=""></p>
184
+
185
+ <dl class="js-match-height">
186
+
187
+ <dt>介護事例集</dt>
188
+
189
+ <dd>要介護度別に介護サービス・費用についての事例をシミュレーション。ご自身にあてはめて参考にしてみてください。</dd>
190
+
191
+ </dl>
192
+
193
+ </a>
194
+
195
+ </div>
196
+
197
+ </div>
198
+
199
+ </div>
200
+
201
+ ```
202
+
203
+ ```
204
+
205
+ .pa-top-guilde-list {
206
+
207
+ margin-top: 4px;
208
+
209
+ }
210
+
211
+ .c-grid {
212
+
213
+ display:flex;
214
+
215
+ flex-wrap: wrap;
216
+
217
+ margin:-16px -8px 0;
218
+
219
+ box-sizing: border-box;
220
+
221
+ }
222
+
223
+ .pa-top-guilde-list__item {
224
+
225
+ min-height:125px;
226
+
227
+ }
228
+
229
+ .c-grid__item--12 {
230
+
231
+ width:50%;
232
+
233
+ flex-shrink:0;
234
+
235
+ padding:16px 8px 0;
236
+
237
+ box-sizing:border-box;
238
+
239
+ }
240
+
241
+ .pa-top-guilde-list__item>a {
242
+
243
+ display: flex;
244
+
245
+ background: #fff;
246
+
247
+ border-radius:8px;
248
+
249
+ box-shadow:0 2px 4px rgba(0,0,0,.28);
250
+
251
+ text-decoration:none;
252
+
253
+ overflow: hidden;
254
+
255
+ padding:7px;
256
+
257
+ height:100%;
258
+
259
+ }
260
+
261
+ .pa-top-guilde-list__item a:hover {
262
+
263
+ color:#f60;
264
+
265
+ }
266
+
267
+ .pa-top-guilde-list__item a {
268
+
269
+ color: #0038ef;
270
+
271
+ text-decoration:underline;
272
+
273
+ }
274
+
275
+ .pa-top-guilde-list__img {
276
+
277
+ width:130px;
278
+
279
+ }
280
+
281
+ .c-grid img {
282
+
283
+ width: 100%;
284
+
285
+ box-sizing: border-box;
286
+
287
+ }
288
+
289
+ element.style {
290
+
291
+ height:97.5px;
292
+
293
+ }
294
+
295
+ .pa-top-guilde-list__item dl {
296
+
297
+ position: relative;
298
+
299
+ padding-right: 30px;
300
+
301
+ display: flex;
302
+
303
+ flex-wrap:wrap;
304
+
305
+ width: calc(100% - 140px);
306
+
307
+ }
308
+
309
+ .pa-top-guilde-list__item dl>dt {
310
+
311
+ font-weight: 700;
312
+
313
+ }
314
+
315
+ .pa-top-guilde-list__item dl dd {
316
+
317
+ color:#2a2a2a;
318
+
319
+ font-size: 14px;
320
+
321
+ margin-top: 5px;
322
+
323
+ line-height: 1.5;
324
+
325
+ }
326
+
327
+ .pa-top-guilde-list__item dl:after {
328
+
329
+ position: absolute;
330
+
331
+ right: 8px;
332
+
333
+ top:50%;
334
+
335
+ transform:translateY(-50%);
336
+
337
+ color: #aaa;
338
+
339
+ content:"\e900";
340
+
341
+ font-size: 18px;
342
+
343
+ }
344
+
345
+ /* フッター */
346
+
347
+ .footer {
348
+
349
+ height: 40px;
350
+
351
+ background-color:gray;
352
+
353
+ transition: all 0.8s;
354
+
355
+ &-item {
356
+
357
+ max-width: 1140px;
358
+
359
+ margin:0 auto;
360
+
361
+ ul{
362
+
363
+ display: flex;
364
+
365
+ list-style: none;
366
+
367
+ justify-content: center;
368
+
369
+ line-height: 40px;
370
+
371
+ }
372
+
373
+ li{
374
+
375
+ margin:0 auto;
376
+
377
+ padding:0 10px;
378
+
379
+ font-weight: bold;
380
+
381
+ color:#fff;
382
+
383
+ cursor: pointer;
384
+
385
+ display:block;
386
+
387
+ &:hover{
388
+
389
+ background-color: rgba(255, 255, 255, 0.5);
390
+
391
+ }
392
+
393
+ }
394
+
395
+ }
396
+
397
+ }
398
+
399
+ ```
400
+
401
+
402
+
403
+ 【追記】
404
+
405
+ fontawsomeを使ってみたのですが、矢印が上の方に行ってしまい、例のような位置に移動できません。
406
+
407
+ どうしたらうまく表示できますか?
408
+
9
409
  ![イメージ説明](4ec09fcf0691f66540470f19eb851769.png)
10
410
 
11
- ![イメージ説明](4a12a590f93d032d66e47a1430ae7aa5.png)
411
+ ![イメージ説明](c0e8dfe05242f71c0c691d7e995a3845.png)
12
-
412
+
413
+
414
+
13
- ```
415
+ ```
14
-
15
- <div class="c-grid pa-top-guilde-list" >
416
+
16
-
17
- <div class="c-grid__item--12 pa-top-guilde-list__item">
417
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
18
418
 
19
419
  <a href="/guide/type/" data-ga-category="top_201802_facility-guide" data-ga-label="type">
20
420
 
21
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/type.png" alt=""></p>
22
-
23
- <dl class="js-match-height">
24
-
25
- <dt>老人ホーム種類</dt>
26
-
27
- <dd>有料老人ホームや介護施設の種類、入居あたってのメリット・デメリットを知れば、施設びのポイントがわかります。</dd>
28
-
29
- </dl>
30
-
31
- </a>
32
-
33
- </div>
34
-
35
- <div class="c-grid__item--12 pa-top-guilde-list__item">
36
-
37
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="cost">
38
-
39
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/cost.png" alt=""></p>
40
-
41
- <dl class="js-match-height">
42
-
43
- <dt>老人ホームの費用</dt>
44
-
45
- <dd>費用や料金の相場をわかりやすく解説。入居一時金や月額利用料の複雑な料金形態もこれで納得。</dd>
46
-
47
- </dl>
48
-
49
- </a>
50
-
51
- </div>
52
-
53
- <div class="c-grid__item--12 pa-top-guilde-list__item">
54
-
55
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="how-to-choose">
56
-
57
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/how-to-choose.png" alt=""></p>
58
-
59
- <dl class="js-match-height">
60
-
61
- <dt>老人ホームの選び方</dt>
62
-
63
- <dd>老人ホームの正しい選び方・探し方について。理想の老人ホームを探しだすコツをご説明します。<br><br></dd>
64
-
65
- </dl>
66
-
67
- </a>
68
-
69
- </div>
70
-
71
- <div class="c-grid__item--12 pa-top-guilde-list__item">
72
-
73
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-insurance">
74
-
75
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-insurance.png" alt=""></p>
76
-
77
- <dl class="js-match-height">
78
-
79
- <dt>介護保険制度とは</dt>
80
-
81
- <dd>介護施設や在宅介護サービスの利用時に活用。介護保険の仕組みや要介護認定の申請などを解説します。</dd>
82
-
83
- </dl>
84
-
85
- </a>
86
-
87
- </div>
88
-
89
- <div class="c-grid__item--12 pa-top-guilde-list__item">
90
-
91
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="dementia">
92
-
93
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/dementia.png" alt=""></p>
94
-
95
- <dl class="js-match-height">
96
-
97
- <dt>認知症まるわかり</dt>
98
-
99
- <dd style="height: 44px;">認知症の種類や原因、初期症状、徘徊や物忘れ。認知症の対応についてご説明します。</dd>
100
-
101
- </dl>
102
-
103
- </a>
104
-
105
- </div>
106
-
107
- <div class="c-grid__item--12 pa-top-guilde-list__item">
108
-
109
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="rougo-money">
110
-
111
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/rougo-money.png" alt=""></p>
112
-
113
- <dl class="js-match-height">
114
-
115
- <dt>老後のお金・年金</dt>
116
-
117
- <dd style="height: 44px;">「介護難民」にならないために、老後のお金についての資産運用方法などについてご説明します。</dd>
118
-
119
- </dl>
120
-
121
- </a>
122
-
123
- </div>
124
-
125
- <div class="c-grid__item--12 pa-top-guilde-list__item">
126
-
127
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="homecare">
128
-
129
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/homecare.png" alt=""></p>
130
-
131
- <dl class="js-match-height">
132
-
133
- <dt>在宅介護について</dt>
134
-
135
- <dd>訪問介護や通所介護(デイサービス)、訪問看護など、在宅介護に関連する各種サービスの内容について解説します。</dd>
136
-
137
- </dl>
138
-
139
- </a>
140
-
141
- </div>
142
-
143
- <div class="c-grid__item--12 pa-top-guilde-list__item">
144
-
145
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="recreation">
146
-
147
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/recreation.png" alt=""></p>
148
-
149
- <dl class="js-match-height">
150
-
151
- <dt>レクリエーション</dt>
152
-
153
- <dd>高齢者の方が楽しみながら身体や脳を動かすことのできるレクリエーション。様々なジャンルにわけてご紹介します。</dd>
154
-
155
- </dl>
156
-
157
- </a>
158
-
159
- </div>
160
-
161
- <div class="c-grid__item--12 pa-top-guilde-list__item">
162
-
163
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-trouble">
164
-
165
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-trouble.png" alt=""></p>
166
-
167
- <dl class="js-match-height">
168
-
169
- <dt>介護の問題・トラブル</dt>
170
-
171
- <dd>介護が始まると予期しない問題やトラブルが起こるもの。それらの事例や解決法についてご紹介します。</dd>
172
-
173
- </dl>
174
-
175
- </a>
176
-
177
- </div>
178
-
179
- <div class="c-grid__item--12 pa-top-guilde-list__item">
180
-
181
- <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-case-studies">
182
-
183
- <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-case-studies.png" alt=""></p>
184
-
185
- <dl class="js-match-height">
186
-
187
- <dt>介護事例集</dt>
188
-
189
- <dd>要介護度別に介護サービス・費用についての事例をシミュレーション。ご自身にあてはめて参考にしてみてください。</dd>
190
-
191
- </dl>
192
-
193
- </a>
194
-
195
- </div>
196
-
197
- </div>
198
-
199
- </div>
200
-
201
- ```
202
-
203
- ```
204
-
205
- .pa-top-guilde-list {
206
-
207
- margin-top: 4px;
208
-
209
- }
210
-
211
- .c-grid {
212
-
213
- display:flex;
214
-
215
- flex-wrap: wrap;
216
-
217
- margin:-16px -8px 0;
218
-
219
- box-sizing: border-box;
220
-
221
- }
222
-
223
- .pa-top-guilde-list__item {
224
-
225
- min-height:125px;
226
-
227
- }
228
-
229
- .c-grid__item--12 {
230
-
231
- width:50%;
232
-
233
- flex-shrink:0;
234
-
235
- padding:16px 8px 0;
236
-
237
- box-sizing:border-box;
238
-
239
- }
240
-
241
- .pa-top-guilde-list__item>a {
242
-
243
- display: flex;
244
-
245
- background: #fff;
246
-
247
- border-radius:8px;
248
-
249
- box-shadow:0 2px 4px rgba(0,0,0,.28);
250
-
251
- text-decoration:none;
252
-
253
- overflow: hidden;
254
-
255
- padding:7px;
256
-
257
- height:100%;
258
-
259
- }
260
-
261
- .pa-top-guilde-list__item a:hover {
262
-
263
- color:#f60;
264
-
265
- }
266
-
267
- .pa-top-guilde-list__item a {
268
-
269
- color: #0038ef;
270
-
271
- text-decoration:underline;
272
-
273
- }
274
-
275
- .pa-top-guilde-list__img {
276
-
277
- width:130px;
278
-
279
- }
280
-
281
- .c-grid img {
282
-
283
- width: 100%;
284
-
285
- box-sizing: border-box;
286
-
287
- }
288
-
289
- element.style {
290
-
291
- height:97.5px;
292
-
293
- }
294
-
295
- .pa-top-guilde-list__item dl {
296
-
297
- position: relative;
298
-
299
- padding-right: 30px;
300
-
301
- display: flex;
302
-
303
- flex-wrap:wrap;
304
-
305
- width: calc(100% - 140px);
306
-
307
- }
308
-
309
- .pa-top-guilde-list__item dl>dt {
310
-
311
- font-weight: 700;
312
-
313
- }
314
-
315
- .pa-top-guilde-list__item dl dd {
316
-
317
- color:#2a2a2a;
318
-
319
- font-size: 14px;
320
-
321
- margin-top: 5px;
322
-
323
- line-height: 1.5;
324
-
325
- }
326
-
327
- .pa-top-guilde-list__item dl:after {
421
+ <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
422
+
423
+ <dl class="js-match-height">
424
+
425
+ <dt>代理店選び方</dt>
426
+
427
+ <dd>代理店広告運用を任せるメリット・デメリットを知れば、選ポイントが身につきます。</dd>
428
+
429
+ </dl>
430
+
431
+ <p class="pa-top-guilde-list__img fas"><i class="fas fa-angle-right"></i></p>
432
+
433
+ </a>
434
+
435
+ </div>
436
+
437
+ ```
438
+
439
+ ```
440
+
441
+ .fas fa-angle-right.fas {
328
442
 
329
443
  position: absolute;
330
444
 
@@ -336,64 +450,12 @@
336
450
 
337
451
  color: #aaa;
338
452
 
339
- content:"\e900";
453
+ content:"\f101";
340
454
 
341
455
  font-size: 18px;
342
456
 
343
457
  }
344
458
 
345
- /* フッター */
459
+
346
-
347
- .footer {
460
+
348
-
349
- height: 40px;
350
-
351
- background-color:gray;
352
-
353
- transition: all 0.8s;
354
-
355
- &-item {
356
-
357
- max-width: 1140px;
358
-
359
- margin:0 auto;
360
-
361
- ul{
362
-
363
- display: flex;
364
-
365
- list-style: none;
366
-
367
- justify-content: center;
368
-
369
- line-height: 40px;
370
-
371
- }
372
-
373
- li{
374
-
375
- margin:0 auto;
376
-
377
- padding:0 10px;
378
-
379
- font-weight: bold;
380
-
381
- color:#fff;
382
-
383
- cursor: pointer;
384
-
385
- display:block;
386
-
387
- &:hover{
388
-
389
- background-color: rgba(255, 255, 255, 0.5);
390
-
391
- }
392
-
393
- }
394
-
395
- }
396
-
397
- }
398
-
399
- ```
461
+ ```