はじめに

サイト作成時、パンくずリストやリンクボタンの横に「>」を配置したい、と思った事はないでしょうか？

私はこれが必要になったら、いつも著作権フリーのサイトに素材を探しに行っていました（Photoshopで作るのも工数がかかりますし）。

しかし、必要な時になかなか発見できず、無駄な時間を使ってしまう。「>」と記号を使っても良さそうな気がしますが、角度が気に入らないですし。

それならCSSで作ったら良いじゃない！というのが今回の主旨です。

なお、この記号ですが「シェブロン」で検索すると出てくる事があります。勉強になりました。

仕上がりイメージ

これの作り方をSTEPで紹介していきます。

目次

「のような形を作る

まずは「>」の元になる形を作ります。「>」は疑似要素を使って作ります。

今回はリンク<a href="">を想定して作っていますが、もちろんそれ以外でも作成できます。

HTML

<a href="#" class="test01">　</a>

CSS

.test01 {
	position: relative;
	text-decoration: none;
}
.test01::after {
	position: absolute;　/*相対配置*/
	content: "";
	width: 10px; 　/*線の横の長さ*/
	height:10px;　/*線の縦の長さ*/
	color:#ff0000;　/*線の色*/
	border-top: solid 2px;　/*横の線の太さ*/
	border-right: solid 2px;　/*縦の線の太さ*/
}

できあがったもの

それっぽい形ができました。次はこれを回転させて>にします。

「を回転させて>にする

STEP1で作った図形を回転させるにはtransform:rotate(45deg);を追記して45度回転させます。

HTMLに変更は無いため割愛します。

CSS

.test01 {
	position: relative;
	text-decoration: none;
}
.test01::after {
	position: absolute;
	content: "";
	width: 10px;
	height:10px;
	color:#ff0000;
	border-top: solid 2px;
	border-right: solid 2px;
	transform: rotate(45deg); /*対象を45度回転させる*/
}

できあがったもの

これで基本の形はできました。

>のサイズや表示される位置を調整することで、リンクボタンやパンくずリスト等に使用できます。

>の位置を調整する

例えばパンくずリストを想定してulliで「>」を表示させる場合は、以下のように記述します。

リストを横並びにしたいので、display: flex;を使っています。

HTML

<ul class="test02">
	<li>メニュー1</li>
	<li>メニュー2</li>
	<li>メニュー3</li>
</ul>

CSS

.test02 {
	list-style:none;
	display: flex;
}
.test02 li {
	position:relative;
}
.test02 li::after {
	oposition:absolute;
	content:"";
	width:5px;
	height:5px;
	color:#ff0000;
	border-top: solid 2px;
	border-right: solid 2px;
	transform: rotate(45deg);
}

できあがったもの

リストの右側に「>」ができましたが位置がずれています。

パンくずリストを作る場合、最後のメニューに>を付けるとおかしいので、最後のメニューのみ非表示にします。

上記のCSSに以下を追記します。

CSS

.test02 li:last-of-type:after {
　display: none;　/*最後の「>」を非表示にする*/
}

できあがったもの

これでリストの最後のみ「>」が表示されなくなりました。

あとはリスト間の余白を作ったり、「>」の位置を調整すればパンくずリストの完成です。

CSS

.test02 {
	list-style:none;
	display: flex;
}
.test02 li {
	position:relative;
	padding-right:25px;
}
.test02 li::after {
	position:absolute;
	content:"";
	width:5px;
	height:5px;
	color:#ff0000;
	border-top: solid 2px;
	border-right: solid 2px;
	top:6px;
	right: 10px;
	transform: rotate(45deg);
}

できあがったもの

今回、「>」の位置をtoprightで調整していますが、margin-topmargin-leftを使っても調整できます。