スマホサイトなどでリンク文字でよく見かけるものとして、上の画像のような矢印があります。当サイトでも画像のように矢印を表示させているところがありますが、これ、CSSで矢印を書くことができます！
それではまず見本として以下のように表示させたいとします。
このように表示させることができます。
それでは、具体的にどのように書けばよいか下にまとめていきたいと思います！
1. 見本のHTMLソースとCSSを紹介
まず、見本となるソースを紹介したいと思います。
HTML
<a href="リンク先URL">ボタン</a>
CSS
a {
position: relative;
border: 1px solid #999;
padding: 10px;
width: 200px;
color: #999;
text-decoration: none;
}
a::after {
position: absolute;
content: "";
border-top: 2px solid #999; //矢印の線の設定①
border-right: 2px solid #999; //矢印の線の設定②
width: 5px; //矢印の大きさ(幅)の設定
height: 5px; //矢印の大きさ(高さ)の設定
-webkit-transform: rotate(45deg); //矢印を何度回転させるか①
transform: rotate(45deg); //矢印を何度回転させるか②
right: 10px; //矢印を右に移動させて、何px開けさせるか
top: 20px; //矢印の縦位置を決める
}
以上のように記述してあげることで矢印を表示させることが出来ます！
2. transform: rotateを使って矢印を回転させる
矢印をCSSで表記するにあたって大切になってくるのが
-webkit-transform: rotate(～deg);
transform: rotate(～deg);
という記述。これを書くことで、設定したborderを回転させて矢印のように見せることができます。イメージとしては下の画像を参考にしていただけたらと思います。
今回は右矢印を表示させたいので、CSSで
1. border-topを設定
2. border-rightを設定
この2つの線の色や太さ、線の種類を指定してあげて、
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
上のCSSを指定してあげて45°回転させて右矢印を表示させています！この45°というのは上のtransformにある“(45deg)”の設定が適応されているので、90°回転させたい時は“(90deg)”とするとOKとなります。
例外. hover時に矢印の色を変えたい時は？
矢印を表示させる書き方としては以上になりますが、もしhover時に矢印の色を変更させたい場合は以下のCSSを追記してあげると色を変えることができます！
a:hover::after {
position: absolute;
content: "";
border-top: 2px solid #999; //hover時の矢印の線の設定①
border-right: 2px solid #999; //hover時の矢印の線の設定②
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: 10px;
top: 20px
}
結局のところ、hover時のリンク文字の色を変更させたい場合はaタグのcolorを設定してあげるのと同じように、矢印の場合でも線の色を設定してあげる…ということですね。
以上がCSSで矢印を表示させる書き方になります。矢印の画像を表示させるという方法もありますが、どうしてもぼやけてしまう場合があるので、CSSで矢印を表示させてぼやけさせない方法を覚えておくと便利かと思います(*^-^)
