どうも、7noteです。今回は矢印（>）を作る５つの方法を解説。
ホームページの制作時に、ボタンやアイコンなどを再現する際に>←こんな形の矢印を作る場面が多くあります。
この矢印を作る方法がいくつかあるので、メリットデメリットも合わせて作り方を解説していきたいと思います。
矢印（>）の作り方
① 文字で書く
一番手っ取り早くてシンプルな方法です
<divclass="button">ボタンです<span>></span></div>メリット
- 簡単で手っ取り早い
- 色が変更できる（作成後も色を変えやすい）
- 大きさの調整ができる（font-size）
デメリット
- くの字の角度の調整ができない
- 太さの調整ができない
- デザイン的にカッコ感が強くて美しくない
② 画像にしてしまう
cssでの再現が難しそうな場合はこれ
<divclass="button">ボタンです<imgsrc="arrow.gif"></div>メリット
- 大きさや色や形などを自由にデザインできる
デメリット
- 画像を作成する手間がある
- デザイン変更や色変更がある度、画像を作成しなければならない
③ 画像にしてしまう（疑似要素Ver）
同じく、cssでの再現が難しそうな場合、かつソースを綺麗に書きたい人向け
<divclass="button">ボタンです</div>.button::after{content:"";width:10px;height:15px;background:url(arrow.gif);background-repeat:no-repeat;display:inline-block;}※レスポンシブを想定し、大きさを変更できるよう背景画像に指定しています。
メリット
- 大きさや色や形などを自由にデザインできる
- ソースが綺麗にかける
デメリット
- 画像を作成する手間がある
- デザイン変更や色変更がある度、画像を作成しなければならない
④ borderで再現する（疑似要素Ver）
画像を使わず、cssだけで書きたい人向け
<divclass="button">ボタンです</div>.button::after{content:"";width:10px;height:10px;border-right:1pxsolid#000;border-top:1pxsolid#000;display:inline-block;transform:rotate(45deg);}メリット
- 大きさや色を後で自由に変えられる
- ソースが綺麗にかける
デメリット
- 角度が90度の三角しか作れない
- 自由度は低い
⑤ アイコンフォントを使う（疑似要素Ver）
FontAwesome(フォントオーサム)の使い方さえ知っていれば便利な方法
FontAwesomeの公式サイトはこちら
（使えるアイコン一覧→https://fontawesome.com/icons?d=gallery）
<divclass="button">ボタンです</div>.button::after{content:"¥f054";font-family:FontAwesome;}メリット
- 大きさや色を後で自由に変えられる
- ソースが綺麗にかける
デメリット
- FontAwesomeにあるアイコンの形でしか表現できない
- 角度や太さの調節ができない
- 自由度は低い
まとめ
ここまで5種類の方法を解説していきました。今回はあくまで表現方法だけなので、矢印の位置などはposition:absolute;などを使って調節する必要があります！！
デザインによってどの方法を使うべきか変わってくるので、「>←この矢印がきたら毎回この書き方で大丈夫！」というわけにはいきません。
ざっくりですが、予めデザイナーとFontAwesome使うところ使っていきますなど事前に打ち合わせしていればFontAwesomeでいいかなと思いますし、90度の三角形であればcssだけで書ける方法が一番読み込みも早いと思うのでcssで書く方法がいいと思います。
その都度その都度デザインを見て、コーディングする人が的確な判断をできるのが一番理想的かなと！
疑似要素の使い方については過去の記事を参考にどうぞ。
→【初心者でもわかる】擬似要素（::before,::after）でサンドイッチを作る方法
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）