画像の＞みたいなものってどうやって出せば良いのですか？

https://www.minnanokaigo.com/

こちらのサイトの以下の部分を模写しようとしたのですが、「＞」がうまく表示出来ませんでした。
どうしたら出てきますか？

<div class="c-grid pa-top-guilde-list" >
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="/guide/type/" data-ga-category="top_201802_facility-guide" data-ga-label="type">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>老人ホームの種類</dt>
                    <dd>有料老人ホームや介護施設の種類、入居にあたってのメリット・デメリットを知れば、施設選びのポイントがわかります。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="cost">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/cost.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>老人ホームの費用</dt>
                    <dd>費用や料金の相場をわかりやすく解説。入居一時金や月額利用料の複雑な料金形態もこれで納得。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="how-to-choose">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/how-to-choose.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>老人ホームの選び方</dt>
                    <dd>老人ホームの正しい選び方・探し方について。理想の老人ホームを探しだすコツをご説明します。<br><br></dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-insurance">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-insurance.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>介護保険制度とは</dt>
                    <dd>介護施設や在宅介護サービスの利用時に活用。介護保険の仕組みや要介護認定の申請などを解説します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="dementia">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/dementia.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>認知症まるわかり</dt>
                    <dd style="height: 44px;">認知症の種類や原因、初期症状、徘徊や物忘れ。認知症の対応についてご説明します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="rougo-money">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/rougo-money.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>老後のお金・年金</dt>
                    <dd style="height: 44px;">「介護難民」にならないために、老後のお金についての資産運用方法などについてご説明します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="homecare">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/homecare.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>在宅介護について</dt>
                    <dd>訪問介護や通所介護（デイサービス）、訪問看護など、在宅介護に関連する各種サービスの内容について解説します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="recreation">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/recreation.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>レクリエーション</dt>
                    <dd>高齢者の方が楽しみながら身体や脳を動かすことのできるレクリエーション。様々なジャンルにわけてご紹介します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-trouble">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-trouble.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>介護の問題・トラブル</dt>
                    <dd>介護が始まると予期しない問題やトラブルが起こるもの。それらの事例や解決法についてご紹介します。</dd>
                </dl>
            </a>
        </div>
        <div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="" data-ga-category="top_201802_facility-guide" data-ga-label="care-case-studies">
                <p class="pa-top-guilde-list__img"><img src="/img/top/guide/care-case-studies.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>介護事例集</dt>
                    <dd>要介護度別に介護サービス・費用についての事例をシミュレーション。ご自身にあてはめて参考にしてみてください。</dd>
                </dl>
            </a>
        </div>
    </div>
    </div>

.pa-top-guilde-list {
  margin-top: 4px;
}
.c-grid {
  display:flex;
  flex-wrap: wrap;
  margin:-16px -8px 0;
  box-sizing: border-box;
}
.pa-top-guilde-list__item {
  min-height:125px;
}
.c-grid__item--12 {
  width:50%;
  flex-shrink:0;
  padding:16px 8px 0;
  box-sizing:border-box;
}
.pa-top-guilde-list__item>a {
  display: flex;
  background: #fff;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.28);
  text-decoration:none;
  overflow: hidden;
  padding:7px;
  height:100%;
}
.pa-top-guilde-list__item a:hover {
  color:#f60;
}
.pa-top-guilde-list__item a {
  color: #0038ef;
  text-decoration:underline;
}
.pa-top-guilde-list__img {
  width:130px;
}
.c-grid img {
  width: 100%;
  box-sizing: border-box;
}
element.style {
  height:97.5px;
}
.pa-top-guilde-list__item dl {
  position: relative;
  padding-right: 30px;
  display: flex;
  flex-wrap:wrap;
  width: calc(100% - 140px);
}
.pa-top-guilde-list__item dl>dt {
  font-weight: 700;
}
.pa-top-guilde-list__item dl dd {
  color:#2a2a2a;
  font-size: 14px;
  margin-top: 5px;
  line-height: 1.5;
}
.pa-top-guilde-list__item dl:after {
  position: absolute;
  right: 8px;
  top:50%;
  transform:translateY(-50%);
  color: #aaa;
  content:"\e900";
  font-size: 18px;
}
/* フッター */
.footer {
  height: 40px;
  background-color:gray;
  transition: all 0.8s;
  &-item {
    max-width: 1140px;
    margin:0 auto;
    ul{
      display: flex;
      list-style: none;
      justify-content: center;
      line-height: 40px;
    }
    li{
      margin:0 auto;
      padding:0 10px;
      font-weight: bold;
      color:#fff;
      cursor: pointer;
      display:block;
      &:hover{
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}

【追記】
fontawsomeを使ってみたのですが、矢印が上の方に行ってしまい、例のような位置に移動できません。
どうしたらうまく表示できますか？

<div class="c-grid__item--12 pa-top-guilde-list__item">
            <a href="/guide/type/" data-ga-category="top_201802_facility-guide" data-ga-label="type">
                <p class="pa-top-guilde-list__img"><img src="/img/type.png" alt=""></p>
                <dl class="js-match-height">
                    <dt>代理店の選び方</dt>
                    <dd>代理店に広告運用を任せるメリット・デメリットを知れば、選ぶポイントが身につきます。</dd>
                </dl>
                <p class="pa-top-guilde-list__img fas"><i class="fas fa-angle-right"></i></p>
            </a>
        </div>

.fas fa-angle-right.fas {
  position: absolute;
  right: 8px;
  top:50%;
  transform:translateY(-50%);
  color: #aaa;
  content:"\f101";
  font-size: 18px;
}

行動規範の内容に同意します

回答2件

ベストアンサー

アンコンフォントの Font Awesome を使っているようです。

下記を参考にしてください。

Font Awesome 5 の使い方 / Web Design Leaves

疑似要素で表示させる場合
下記で表示できるようです。
font-weight: 900; が必要。

css
1.pa-top-guilde-list__item dl:after {
2  position: absolute;
3  right: 8px;
4  top:50%;
5  transform:translateY(-50%);
6  color: #aaa;
7  content: "\f105";
8  font-family: "Font Awesome 5 Free";
9  font-weight: 900;
10  font-size: 18px;
11}

 で表示させる場合

html
1<p class="pa-top-guilde-list__img fas">
2  <i class="fas fa-angle-right"></i>
3</p>

css
1.pa-top-guilde-list__img {
2  position: relative;
3}
4.pa-top-guilde-list__img > i.fa-angle-right {
5  position: absolute;
6  right: 8px;
7  top:50%;
8  transform:translateY(-50%);
9  color: #aaa;
10  content:"\f101";
11  font-size: 18px;
12}

投稿2020/09/03 12:38

編集2020/09/04 08:22

hatena19

総合スコア34017

takawork

2020/09/03 13:23

なるほど、ありがとうございます。検証モードのどこからフォントオウサムを使ってるのかを判断出来ますか？検証モードを確認したのですが、見つかりませんでした。

takawork

2020/09/03 13:42

を入れれば良いことはわかったのですが、htmlのどこに記述すればよいのでしょうか？(fontawesomeのheadに入れるコードは既に入れております。)

hatena19

2020/09/03 20:46

head内に、 <link type="text/css" rel="stylesheet" href="/css/lib/font-awesome/css/font-awesome.min.css?1492077198"> というタグがあるのから判断しました。 はHTMLの表示したい位置に記述すればOKです。なお参考先では疑似要素として表示させているようですが、これは上で紹介したリンク先の最後の方に方法が載ってます。

takawork

2020/09/04 06:08

ありがとうございます。 https://fontawesome.com/icons/angle-double-right?style=solid このPro版ではないアイコンを擬似要素として/f101で載せようとしたのですが、表示されませんでした。なにが問題なのでしょうか？

takawork

2020/09/04 06:45

fontawesomeは擬似要素が使えなくなったらしいので、 で載せてっみましたが、うまく位置とサイズが調整できません。質問の下の方に追記したのでよろしければ解説をお願いしmす。

hatena19

2020/09/04 08:23

回答に追記しましたので、ご参考に。

takawork

2020/09/04 09:23

ありがとうございます。無事に出現させることが出来ました。ちなみにfontweightを300にしたり、font-sizeを30pxとかにしたら表示されないようになりました。この理由を知りたいです。あと font-weight: 900; font-size: 18px; の900と18pxはどこから予想を立てて拾ってきたのかも知りたいです。よろしくお願いします。

hatena19

2020/09/05 05:43

サンプルコードを拾ってきて貼り付けたらたまたま表示されただけですので、意味は分かりません。 Font Awesome を使うにはユーザー登録が必要なようですが、登録せずにテストしたので、それが影響しているのかも。 [2020年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ | コリス](https://coliss.com/articles/build-websites/operation/work/font-awesome-guide-and-useful-tricks.html)

Lhankor_Mhy

2020/09/05 06:26

横からすみません。 @font-face は表示するグリフに対応する font-weight を指定できます。 https://developer.mozilla.org/ja/docs/Web/CSS/@font-face font awesome の CSSに @font-face { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; とありますから、それが原因です。 --- 一方、font-size は変更できるはずですから、何かの勘違いではないでしょうか。

takawork

2020/09/07 15:37

うまくいきましたありがとうございます。

行動規範の内容に同意します