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

質問編集履歴

1

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

2020/09/04 06:44

投稿

takawork
takawork

スコア95

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  こちらのサイトの以下の部分を模写しようとしたのですが、「>」がうまく表示出来ませんでした。
4
4
  どうしたら出てきますか?
5
- ![イメージ説明](4ec09fcf0691f66540470f19eb851769.png)
5
+ ![イメージ説明](50761e1f351b12bef296e1860f82172a.png)
6
6
  ![イメージ説明](4a12a590f93d032d66e47a1430ae7aa5.png)
7
7
  ```
8
8
  <div class="c-grid pa-top-guilde-list" >
@@ -197,4 +197,35 @@
197
197
  }
198
198
  }
199
199
  }
200
+ ```
201
+
202
+ 【追記】
203
+ fontawsomeを使ってみたのですが、矢印が上の方に行ってしまい、例のような位置に移動できません。
204
+ どうしたらうまく表示できますか?
205
+ ![イメージ説明](4ec09fcf0691f66540470f19eb851769.png)
206
+ ![イメージ説明](c0e8dfe05242f71c0c691d7e995a3845.png)
207
+
208
+ ```
209
+ <div class="c-grid__item--12 pa-top-guilde-list__item">
210
+ <a href="/guide/type/" data-ga-category="top_201802_facility-guide" data-ga-label="type">
211
+ <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
212
+ <dl class="js-match-height">
213
+ <dt>代理店の選び方</dt>
214
+ <dd>代理店に広告運用を任せるメリット・デメリットを知れば、選ぶポイントが身につきます。</dd>
215
+ </dl>
216
+ <p class="pa-top-guilde-list__img fas"><i class="fas fa-angle-right"></i></p>
217
+ </a>
218
+ </div>
219
+ ```
220
+ ```
221
+ .fas fa-angle-right.fas {
222
+ position: absolute;
223
+ right: 8px;
224
+ top:50%;
225
+ transform:translateY(-50%);
226
+ color: #aaa;
227
+ content:"\f101";
228
+ font-size: 18px;
229
+ }
230
+
200
231
  ```