「>」をCSSを使って3STEPで作成する

はじめに

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

私はこれが必要になったら、いつも著作権フリーのサイトに素材を探しに行っていました(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);
}

できあがったもの

  • メニュー1
  • メニュー2
  • メニュー3

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

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

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

CSS

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

できあがったもの

  • メニュー1
  • メニュー2
  • メニュー3

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

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

CSS

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

できあがったもの

  • メニュー1
  • メニュー2
  • メニュー3

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