【CSS】スマートフォンサイトでよく使われてる3本ラインのメニューアイコンをCSSだけで作ってみる

7年後もかわらずおっさんですけど ishida です。

iPhone5s、iPhone5c 発表されましたねぇ〜。
自分は、iPhone4 なのでこの機会に買い替えをする予定ですが、 嫁さんに許可をもらわないと。。。

さてさて、スマートフォンサイトで最近は、googleさんなどスライドメニューUIが増えてきましたね。

スライドメニューのアイコンには、
横に3本のラインが入ったヤツがよく使われてます。

今回は、スライドメニューのアイコンをCSSで作ってみるです。

完成版

以下がサンプルになります。

アイコンだけおくと寂しいけど。。

ポイント

正方形のブロックと、ボーダー2つを組み合わせです。

a要素に背景色と position: relative; を設定、
ボーダー2つは、:before、:after擬似要素で表現し postion: absolute; で位置を調整しています。

以上、CSSでアイコン作成Tipsでした。