CSSで円形の上下左右矢印アイコンを描く例
以前、「CSSで左右／上下の両矢印を描画し、幅も自動調整する」という記事ではCSSを使い、幅やサイズの解説などに便利な両端に矢印が付いた線の描画をしましたが、今回はそういう矢印ではなく、クリックしたくなるような円形の矢印アイコンのお話です。
円で囲まれた矢印を描く
矢印というか、こういう「＞」大なり小なり記号なんですけどね。
表示例を見たほうがてっとり早いと思うのでさっそくサンプルです。
表示例
上矢印
下矢印
左矢印
右矢印
こういうアイコン、よく見かけますよね。
マウスカーソルを載せると色が反転するようにもなっていますが、クリックイベントは付けていないので、クリックしても何も起こりません。
HTMLとCSS
<p><span class="arrow up"></span>上矢印</p>
<p><span class="arrow down"></span>下矢印</p>
<p><span class="arrow left"></span>左矢印</p>
<p><span class="arrow right"></span>右矢印</p>
<style>
.arrow {
display:inline-block;
position:relative;
border-radius:50%;
width:1em;
height:1em;
cursor:pointer;
border:1px solid #808080;
vertical-align:middle;
margin-bottom:4px;
}
.arrow:before {
content:'';
position:absolute;
width:0.4em;
height:0.4em;
border-left:1px solid #808080;
border-bottom:1px solid #808080;
}
.up:before {
top:40%;
left:28%;
transform:rotate(135deg);
}
.down:before {
top:20%;
left:28%;
transform:rotate(-45deg);
}
.left:before {
top:28%;
left:35%;
transform:rotate(45deg);
}
.right:before {
top:28%;
left:20%;
transform:rotate(-135deg);
}
.arrow:hover {
background-color:#808080;
}
.arrow:hover:before {
border-color:white;
}
</style>解説
なるべくシンプルにしたつもりですが、上下左右と4つ分用意したので、そこそこ長くなりましたかね。
以前の記事で両矢印を描いた際は大きさが0の要素に太いborderを用意して、それぞれの四隅のうち3箇所をtransparentで透明化することで、1箇所だけ三角形を残して矢印を作る、というなかなかややこしいことをしていました。
今回は大なり小なり記号なのでもっと簡単です。…といっても実際に文字で「＞」を書くわけじゃありません。フォントによって形違うし、角度も付いていてカッチョ悪いので、90度きっかりの「＞」を描きたいのです。
そのため、border-left:1px solid #808080;とborder-bottom:1px solid #808080;で、左側と下側にだけ線を引いています。要するにＬ字ですね。このＬの形を右に45度傾けたら「＜」になりますよね？
そう、左矢印の場合はtransform:rotate(45deg);を指定することで、このＬ字を＜にしているのです。
そして、矢印を囲む円形については「CSSで円形の画像と吹き出しを並べて表示する」で少し触れていますが、border-radius:50%;です。borderの角を丸める指定ですが、四隅を50%ずつ丸めればそれは円になります。
しかし、ここでひとつ問題が…
Ｌ字の描画も円の描画もどちらもborderを使うため、ひとつの要素に複数のborderを指定することになります。これではどちらか片方しか描画できないことになるため、Ｌ字の描画については疑似要素:beforeを使いました。
本体の要素で円形を描き、before疑似要素でＬ字を描画するわけです。
基本はこれだけなのですが、上下左右の4つ矢印が欲しかったので、疑似要素も合わせて4×2＝8個のクラスを用意して、同じプロパティをつらつらつらつらと書くのもちょっとなぁ…ということで、共通部分を用意してメンテナンス性を高めてみました。
.arrow {
display:inline-block;
position:relative;
border-radius:50%;
width:1em;
height:1em;
cursor:pointer;
border:1px solid #808080;
vertical-align:middle;
margin-bottom:4px;
}このarrowクラスでは円形の描画、大きさの指定(1em)、マウスカーソルの指定など全ての矢印アイコンに共通の指定をしています。
.arrow:before {
content:'';
position:absolute;
width:0.4em;
height:0.4em;
border-left:1px solid #808080;
border-bottom:1px solid #808080;
}次にarrow:beforeではＬ字の描画で、これも全矢印アイコン共通の指定ですね。矢印の色が変えたくなったらここをいじるだけで上下左右すべてに反映されます。
.up:before {
top:40%;
left:28%;
transform:rotate(135deg);
}
.down:before {
top:20%;
left:28%;
transform:rotate(-45deg);
}
.left:before {
top:28%;
left:35%;
transform:rotate(45deg);
}
.right:before {
top:28%;
left:20%;
transform:rotate(-135deg);
}最後にup/down/left/rightで、それぞれＬ字の角度を指定し、位置調整をしています。
<p><span class="arrow up"></span>上矢印</p>あとはHTML側でこんなふうにarrowクラスとupクラスの両方を指定してあげれば上矢印のアイコンが描画されます。
尚、Ｌ字の位置調整は％指定だし、arrowの大きさはemで指定しているので、親要素のfont-size次第で、矢印アイコンの大きさも適宜変更されるハズです。
えーと、:hoverについては詳しく説明する必要ないですよね。マウスカーソルが載っかったときに色を変えているだけです。
まとめ
矢印アイコンを画像で作っても良かったのですが、色を変えたり大きさを変えたりして汎用的に使いたかったので、CSSで円形の矢印アイコンを作ってみました。画像に比べてサイズも小さくなりますし。
厳密には矢印ではなく「＞」記号なんですけど、このタイプのアイコンってよく使われてますから馴染み深いですよね。
例えば左右の矢印ならページ切り替えの「前ページ／次ページ」の移動アイコンに使われるし、下矢印は「もっと見る」みたいな使い方をされるし、上矢印は「トップへ戻る」で使われることが多いかと思います。
たぶん、同じようなサンプルは山ほどあると思うのですが、ググり方が悪いのか、これだー！っていうのが見つからなかったので、自作してみた感じです。
ぼくと同じような悩みで迷い込んだ方のお役に立てば幸いです。
