スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法

スマホでも問題なく見れたのですが、小さくて見にくいので、スマホで見た場合に1カラムになるなど若干スマホに対応しました。

その際にリンクであることを表す矢印をCSSだけで作りました。スマホはマウスを乗せるという行為がないので、リンクであるということがすぐに分かるようにするのは大切ですね。

Webフォントでもいいのですが、矢印１つのためにWebフォントを読み込むのはパフォーマンス的にどうなのかと思うのでCSSにしました。

他のサイトでもよく紹介されていますが、とても便利なので解説します。

サンプルを用意していますのでご覧ください。

では解説していきます。

HTML

まず、HTMLです。

<ul id="menu01">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
</ul>

普通のリストメニューです。

CSS

続いてCSSです。

#menu01{
  list-style: none;
  width: 300px;
  padding: 0;
  margin: 0 auto;
}
#menu01 li{
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #879c18;
}
#menu01 li:last-child{
  border-bottom: 0px;
}
#menu01 li a{
  position: relative;
  display: block;
  margin: 0;
  padding: 10px;
  background: #a1b91d;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
#menu01 li a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 35px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #fff;
}
#menu01 li a:after{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 40px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #a1b91d;
}

スマホ用なのでリスト全体をクリックできるようにしています。ボーダーを2本重ねてもよかったのですが、最近はフラットなデザインが流行っているでやめました。

念のためボーダーの2本重ねについてはこちらを参考に。

で擬似要素を使ってひし形を２つ表示しています。ひとつは白で、ひとつは背景と同じ色です。背景と同じ色じゃなくすれば分かりやすいと思います。

この黒い部分は背景と同じ色になれば白の矢印だけ残ります。

最後に上下中央に表示するコツを紹介しておきます。ポイントは「top: 50%;」と「margin-top: -5px;」です。

まず、「top: 50%;」で表示場所の基準が真ん中になります。そして、「margin-top: -5px;」で全体の高さ（10px）の半分だけ上に表示すると真ん中に表示されることになります。

正方形を例に画像で解説してみます。

アイコンを真ん中に表示するときなんかにも使えるテクニックですので知っておいて損はないと思います。

さいごに

ということで、スマホ用サイトに使えそうなリンクを表す矢印をCSSだけで作る方法を紹介しました。

この方法自体昔から使われているものですが、擬似要素や真ん中への表示方法など抑えておきたいテクニックを使っていますので解説しました。お役に立てればうれしいです。