棒付き三角形の矢印アイコンをつくろう

1.全体の作り方の流れ

三角形の矢印アイコンをつくろうでつくったようなアイコンにさらに要素を付け加えて棒付き三角形アイコンを作っていきます。

図にあるように、以下のような手順を行うことで簡単に作成することができます。

まず最初に横棒を作成していきます。この横棒を基準として右側にある三角矢印を作成していきます。

横の長さは自由な長さで大丈夫ですが、高さは偶数にしていたほうがキレイに上下が揃うのでオススメです。

次に三角形の要素を作成します。三角形の作り方は三角形の矢印アイコンをつくろうで解説したものをそのまま使用しています。

最初に説明したように

という風に作成していきます。今回は右を向いた矢印なので左側のborder以外の色を透明にしています。

三角形アイコンを作ったときと違う点は要素をdivなどで作成していなくて、befoer, afterのような疑似要素で作成しているところです。

通常の要素でも作成できますが疑似要素で作成すると一つのdiv要素だけでアイコンを表示することができるので沢山のhtmlをコピーする必要がなくなり取り回しが楽になるというところが良い点です。

今回はpositionを使ったCSSのテクニックだったのでそれについても触れていきたいと思います。

親要素（今回はdiv）を基準に子要素（今回はafter）の位置を任意の場所に指定したい場合にはpositionを使う場合があります。

例えば今回のような、横棒の位置を基準に三角形の位置を決めるような場面ではpaddingやmarginだけでは実現が難しい場合があります。そういった場合はpositonを使って表示位置をうまくコントロールしていくことで期待した場所への配置が可能になります。

コードをよく見ていた人は気づいているかもしれませんが、ちょっと聞き慣れないcurrentColorという値を使っています。

これは仕事でCSSを書いている人でも知らなかったりするちょっとマイナーな指定方法です。細かい説明は省きますが、colorプロパティで指定している値を別のプロパティでも指定できるというものです。

通常であればbackgroundを横棒と三角形で同じカラーコードで指定するのですが、横棒でcolorを事前に指定しているためその色をbackgroundでも使用できるようになっています。

サンプルコードではあまりメリットを感じにくいですが、実際のサイトやアプリなどを実装する場合は同じカラーコードを複数の場所に指定しなければならない場面ができます。そういったときにcolorの色を使い回せると共通の値を指定できるので便利です。

漫然とコードを見てコピペで済ませがちですが、書いてあるコードの意味や理由を考えながら学習していくことで、より有意義な学習になるので一つ一つしっかりと学習していきましょう。