スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

去年地元のイベントのホームページを作ったのですが、Google Analyticsで調べてみると、スマホからのアクセスが全体の3/4もありました。

css-arrow0.png

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

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

Webフォントでもいいのですが、矢印1つのために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本重ねについてはこちらを参考に。

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

css-arrow.png

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

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

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

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

css-arrow2.png

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

さいごに

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
こっちのほうがスマートでは?と思いました。
#menu01 li a:before{
...
/*background: #fff;*/
border-top: 4px solid #fff;
border-right: 4px solid #fff;
}
【2014/07/10 11:38】 | - #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。