BLOGホームページ制作関係csshtml

cssで矢印を作ろう

2019/11/20

はじめに

リストの前に矢印をつけたいのですが、画像を使わないとできないですか?

リストの前に矢印をつけるのは特殊な矢印じゃない限りは画像を使わなくてもcssで作ることができますよ。

cssで作ることができるんですね。それは便利だ

考え方としては、四角形の下と右などにボーダーをつけて回転させてあとは棒をつけるだけって感じなのですが、制作過程をサンプルでご紹介しましょう。

リストにcssで矢印をつけてみよう

リストにcssで矢印をつけていこうと思います。
矢印の構造を考えますと、右を向いている三角形のような部分とその接点に棒がついているような構造になっていますね。
まず、三角形のような部分について考えてみようと思います。
三角形のような部分を作るためには、まずリストの前に四角形を作ります。
htmlの構造としては、こちらの構造を使用します。

<ul class="arrows">
<li>ホームページを育てる企業</li>
<li>株式会社ウィコネット</li>
<li>福井をwebの力で活性化させます。</li>
</ul>

まず、cssでリストの前に四角形を作ってみようと思います。

.arrows li{
 position:relative;
 padding-left:10px;
list-style:none;
}
.arrows li:before{
 content:'';
 display:inline-block;
 position:absolute;
 left:0px;
 top:12px;
 width:5px;
 height:5px;
 border-bottom:1px solid #888;
 border-right:1px solid #888;
}

cssを上記のように作ります。liを絶対位置として、beforeをブロックにします。
そしてbeforeで生成した四角形の右と下にborderをつけます。
そうすると次のような状態になります。

  • ホームページを育てる企業
  • 株式会社ウィコネット
  • 福井をwebの力で活性化させます。

この状態では、まだ矢印の形には程遠いですね。
次にこちらのbeforeの要素を45度回転させます。
つまりbeforeのcssは次のようになります。

.arrows li:before{
 content:'';
 display:inline-block;
 position:absolute;
 left:0px;
 top:12px;
 width:5px;
 height:5px;
 border-bottom:1px solid #888;
 border-right:1px solid #888;
 transform:rotateZ(-45deg);
}

45度回転させることで先ほど作った四角形が次のようになります。
考え方としては四角形を45度回転させてひし形のようにして右方向だけにborderをつけるといったものです。

  • ホームページを育てる企業
  • 株式会社ウィコネット
  • 福井をwebの力で活性化させます。

少し、矢印に近づきましたね。我々がよく知っている矢印にするにはあと右を向いている四角形の中心に棒が必要ですね。
次にbeforeの要素で、三角形を作ってしまったので、afterの要素を使って棒の部分を作っていきましょう。
とりあえず、先ほどのliとli:beforeの要素はそのままにしてafterの要素で棒を作ります。
widthは10pxくらいにしてheightを1pxにして背景に色をつけることで棒を作ります。

.arrows li:after{
 content:'';
 display:inline-block;
 position:absolute;
 left:0px;
 top:0px;
 width:10px;
 height:1px;
 background:#888;
}
  • ホームページを育てる企業
  • 株式会社ウィコネット
  • 福井をwebの力で活性化させます。

上記のように棒が出てきましたね。
ただ位置がおかしいので、まず三角形と文字の部分をずらして棒の縦方向の位置を揃えましょう。

.arrows li{
 position:relative;
 padding-left:17px;
list-style:none;
}
.arrows li:before{
 content:'';
 display:inline-block;
 position:absolute;
 left:4px;
top:12px;
width:5px;
height:5px;
border-bottom:1px solid #888;
border-right:1px solid #888;
transform:rotateZ(-45deg);
}
.arrows li:after{
 content:'';
 position:absolute;
 display:inline-block;
 left:0;
 top:14px;
 width:10px;
 height:1px;
 background:#888;
}
  • ホームページを育てる企業
  • 株式会社ウィコネット
  • 福井をwebの力で活性化させます。

liのpaddingをずらし、li:beforeのleftを調整して、afterのtopを調整すると上記のように矢印になりましたね。