クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > CSS > リンクでよくある「＞」アイコンを画像じゃなくてCSSだけで作る

リンクでよくある「＞」アイコンを画像じゃなくてCSSだけで作る

CSS

リンクや更新一覧などでタイトルの右側に「＞」アイコンをつけることがよくあると思う。
imgファイルを配置してもいいのだけど、修正のたびに画像編集ソフトを立ち上げる必要がある。
テキストの「＞」を配置してもいいけど見た目はイマイチ…。あとシステムフォントによって形が変わる。
アイコンフォントFont Awesomeは色やサイズを調整できるが、太さを調整できないのが惜しい。
ということで、単純な図形なのでCSSだけで完結する方法を検討した。

目次

※参考：CSSの基本についてはこちら
【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3

リンクの「＞」完成見本

リンクの「＞」ってこーいうやつね。（これはなんと読んだらいいんだろう？）

HTML

HTMLの構成は下記です。

<h1>リンクでよくある「>」</h1>
<ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
  <li><a href="">メニュー4</a></li>
  <li><a href="">メニュー5</a></li>
</ul>

ごく普通の<ul>のリストですね。
これは<ol>（番号付き）でも<dl>（項目付き）でもリスト以外（<div>や<p>）でも無問題です。

CSS原型

CSSの原型は下記です。まあ見た目は各自のお好みで。

h1{
  text-align: center;
}

ul {
  border: 1px solid #ccc;
  width: 300px;
  margin: 0 auto;
  padding: 0;
}

li {
  list-style: none;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

li a {
  display: block;
  text-decoration: none;
  color: #333;
  background: #f6f6f6;
}

li a:hover {
  opacity: 0.7;
}

やっていること。

  • <h1>はtext-align、<ul>はmarginでひとまず画面の中央寄せに配置。
  • <ul>のborderで外枠線を設定。widthで幅を設定。
  • <li>のlist-styleをnoneに（お好みで）。borderで下線を設定。
  • <a>のdisplayをblock（リンク範囲をブロックに）。文字色、背景色を設定。
  • <a>に擬似クラスhoverでカーソル置くと透明度0.7（お好みで）。

CSSで「＞」アイコン追加

まず<li>の最後に1行追記します。

li {
  list-style: none;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  position: relative;  /*←追記！*/
}

position: relativeでこの<li>をアイコンを配置する際の基準位置にします。

次に<li>に擬似クラスafterでアイコンを加えます。

li:after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  position: absolute;
  top: 15px;
  right: 10px;
  transform:rotate(45deg)
}

やっていること

  • contentの中身は空
  • displayをbolckにしてブロック化
  • width、heightでサイズを設定
  • boderを上と右側だけに設定
  • position: absolute でlistを基準に配置できるようにする
  • top、rightで右上からの位置を調整
  • transformのrotate(45deg) で45度回転する。

まとめ

これでリンクの「＞」のサイズ、位置、色、太さ、角度などが全てCSSのみで調整できます。
作業時にいろんなソフトを立ち上げて、切り替えて…は昔は当たり前でしたが、いまはテキストエディタだけでかなりのことができるようになってきたので、できるだけ絞りたいですね。
拡大縮小に耐えられるのもCSSの強みなので、また何かあれば書いていきます。

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com