[css、css3]cssで矢印を作る!コピペは卒業してちょっと解説を交えながら矢印自由自在!

cssで矢印を作る!コピペは卒業してちょっと解説を交えながら矢印自由自在!
タイトルの通りです。
「css 矢印」とかでググると色んな矢印がコピペだけで作れてしまうけど、ちょっとカスタマイズしたいときにcssの意味が分かってなきゃっていうちょっとレベルアップして書いてみようかと思ったんだ。連休真っ只中に。

なのでオーソドックスな矢印のみで書いて行きます。

矢印を作る手順

  1. まずは四角を書きます。
  2. borderプロパティを使って矢印になる線を書きます。
  3. 回転させます。
  4. 必要に応じて位置を移動させます。

ざっとこんな手順で矢印を作っていきます。

四角を書きます

ここでいう「四角を書きます」は実際に四角を書くのではなくボックスを作るという意味です。
ではどうやってボックスを作るかというとcontentプロパティを使ってボックスを作ります。

contentプロパティとは

contentプロパティは:beforeや:afterの擬似要素を使ってコンテンツを挿入するために使います。

See the Pen eZQWQP by mitsuki sagayama (@sagayama) on CodePen.


このようにbeforeやafterで前後にコンテンツを表示することが出来ます。

矢印の場合は表示するものが無いものを作ってあげます。

このhtmlに対して

とcssを書くことでイメージ的には「Tシャツ 1,900円」の前に空のボックスが出来たと思ってください。

borderプロパティを使って矢印になる線を書く

作った空のボックスにborderプロパティを使って線を書いていきます。
今回は右向きの矢印を作成します。
同時にブロックレベル要素にしサイズを指定します。今回は幅、高さ6pxにしました。

See the Pen jqQmRz by mitsuki sagayama (@sagayama) on CodePen.


ここでカスタマイズできるのは矢印の色と大きさです。
矢印自体の大きさはwidth、heightで指定し太さはborderの2pxで、色はborderの#000を変更すれば大丈夫。

回転させる

右上を向いた矢印みたいな鍵カッコみたいなものが出来ていると思います。
次はこれを時計回りに45度回転させます。

See the Pen bpQRqM by mitsuki sagayama (@sagayama) on CodePen.

以上で矢印の出来上がり。

ここまでで分かるように矢印の方向が変わるとborderを取る場所(border-top or right or bottom or left)が変わったりtransform:rotateの角度が変わったりします。

必要に応じて位置を移動

今回は「Tシャツ 1,900円」の前に矢印を配置します。

See the Pen EKOXwj by mitsuki sagayama (@sagayama) on CodePen.


positionプロパティで位置を確定していきますが、ポイントは上下中央を取る時のmargin-top:-3px;というネガティブマージンくらいです。

以上で全てが完了です。

まとめ

だらだらと長い矢印のcssも整理して見ていくと全く難しいところはないですね。
実は後ろに矢印を後ろに持っていきたいからといって:afterにする必要もなくleft:0;をright:0;に変更してあげるだけなんですね。
どんどん活用して無駄な矢印画像アイコンは減らして行きましょう!

※CODEPENの設定をSCSSのままCSSを書いてますが気にしないでください・・・

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク