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

2020年2月10日

仕上がりイメージ

↓このようなものを画像で作らずCSSで作ります。

 

サイト作成時、例えばパンくずリストだったりリンクボタンの横にコイツを使いたい、と思った事はないでしょうか?

私は必要になったらいつも著作権フリーのサイトに素材を探しに行っていました(Photoshopで作るのも面倒だし)。

しかし、必要な時になかなか発見できず、無駄な時間を使ってしまう。「>」でも良さそうな気がしますが、角度が気に入らないですし。
ならばCSSで作ったら良いじゃない!というのが今回の主旨です。

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

とりあえず「のような形を作る

まずは>の元になる形を作ります。
なお、div内に>を付ける設定で作成していますが、他でも対応可能です。

ソースは以下のとおりです。

html

<div class="arrow1">
 <a href="#"> </a>
</div>

今回はclass名をarrow01としました(これは任意の物に変更して下さい)。

css

.arrow1 a {
 text-decoration: none;
 position: relative;
}

.arrow1 a::after {
 content: "";
 width: 10px;  /*横の線の長さ*/
 height:10px; /*縦の線の長さ*/
 color:#ff0000; /*線の色*/
 position: absolute; /*上と右にラインが引ける*/
 border-top: solid 2px; /*横の線の厚さ*/
 border-right: solid 2px; /*縦の線の厚さ*/
}

出来上がった物

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

「を回転させて>にする

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

css

.arrow1 a::after {
  content: "";
  width: 10px;
  height:10px;
  color:#ff0000;
  position: absolute;
  border-top: solid 2px;
  border-right: solid 2px;
  transform: rotate(45deg); /*これを追記する*/
 -webkit-transform:rotate(45deg); /*ベンダープレフィックスを追加*/
 -moz-transform:rotate(45deg);

 }

できあがった物

これで形はできました。次に>の表示される位置を調整します。

ポイント

>の位置を調整する

例えばパンくずリストを想定してliで>を表示させる場合は、以下のように記述します。
今回はclass名をarrow3としています。

html

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

css

.arrow3 ul {
  list-style: none; /*リストの頭に付く「・」を表示させない */
  display: flex; /*リストを横並びにする*/
}

.arrow3 li {
  position: relative;
}

.arrow3 li::after {
  content: "";
  width: 5px;
  height:5px;
  color:#ff0000;
  position: absolute;
  border-top: solid 2px;
  border-right: solid 2px;
  transform: rotate(45deg);
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
}

出来あがった物

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

ご覧のように位置がずれています。また、パンくずリストの場合、最後のメニューに>を付けるとおかしいので非表示にします。

次のようにCSSに追記します。

css

.arrow3 ul {
  list-style: none;
  display: flex;
}

.arrow3 li {
  position: relative;
  padding-right:25px; /*テキストの右側に余白を作る*/
}

.arrow3 li:after {
  content: "";
  width: 5px;
  height:5px;
  margin-top:3px; /*「>」の縦方向の調整*/
  margin-left:5px; /*「>」の横方向の調整*/
  color:#ff0000;
  position: absolute;
  border-top: solid 2px;
  border-right: solid 2px;
  transform: rotate(45deg);
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
}

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

出来あがった物(完成)

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

「>」の大きさや位置はお好みで調整できます。