会員の方はこちらトップCSSデザインテクニックCSSアイコン棒付き三角形の矢印アイコンをつくろうCSSデザインテクニック棒付き三角形の矢印アイコンをつくろうCSSを使って棒付き三角形の矢印アイコンをつくってみましょう。ブックマークHTML・CSSUIデザインアイコンWebデザイン公開日:2019/10/24最終更新日:2019/10/24目次1.全体の作り方の流れ2.横棒をつくる3.三角形をつくる4.positonの解説5.currentColorの解説1.全体の作り方の流れ三角形の矢印アイコンをつくろうでつくったようなアイコンにさらに要素を付け加えて棒付き三角形アイコンを作っていきます。図にあるように、以下のような手順を行うことで簡単に作成することができます。横長の四角をつくる三角形borderを指定する幅・高さを0にする一片以外のborderの色を透明にする2.横棒をつくるまず最初に横棒を作成していきます。この横棒を基準として右側にある三角矢印を作成していきます。横の長さは自由な長さで大丈夫ですが、高さは偶数にしていたほうがキレイに上下が揃うのでオススメです。CodePen.3.三角形をつくる次に三角形の要素を作成します。三角形の作り方は三角形の矢印アイコンをつくろうで解説したものをそのまま使用しています。最初に説明したようにborderを指定する幅・高さを0にする一片以外のborderの色を透明にするという風に作成していきます。今回は右を向いた矢印なので左側のborder以外の色を透明にしています。afterのような疑似要素で作成しているところです。通常の要素でも作成できますが疑似要素で作成すると一つのdiv要素だけでアイコンを表示することができるので沢山のhtmlをコピーする必要がなくなり取り回しが楽になるというところが良い点です。今回はpositionを使ったCSSのテクニックだったのでそれについても触れていきたいと思います。親要素(今回はdiv)を基準に子要素(今回はafter)の位置を任意の場所に指定したい場合にはpositionを使う場合があります。今回のような、横棒の位置を基準に三角形の位置を決めるような場面ではpaddingやmarginだけでは実現が難しい場合があります。positonを使って表示位置をうまくコントロールしていくことで期待した場所への配置が可能になります。5.currentColorの解説コードをよく見ていた人は気づいているかもしれませんが、ちょっと聞き慣れないcurrentColorという値を使っています。これは仕事でCSSを書いている人でも知らなかったりするちょっとマイナーな指定方法です。細かい説明は省きますが、colorプロパティで指定している値を別のプロパティでも指定できるというものです。通常であればbackgroundを横棒と三角形で同じカラーコードで指定するのですが、横棒でcolorを事前に指定しているためその色をbackgroundでも使用できるようになっています。サンプルコードではあまりメリットを感じにくいですが、実際のサイトやアプリなどを実装する場合は同じカラーコードを複数の場所に指定しなければならない場面ができます。いったときにcolorの色を使い回せると共通の値を指定できるので便利です。漫然とコードを見てコピペで済ませがちですが、書いてあるコードの意味や理由を考えながら学習していくことで、より有意義な学習になるので一つ一つしっかりと学習していきましょう。