[CSS]Flexboxでハンバーガーメニューを作ろう

プラグインやフレームワークを使わずにレスポンシブ対応のナビゲーションが作れないかとここ1年半ほどずっと考えていました。制作現場では時間の制約などの関係でプラグインの導入が現実的だと思うのですが、せっかく勉強しているので、今回はFlexboxを使ってレスポンシブ対応のナビゲーションメニューを作ってみました。
[CSS]floatからFlexboxへ、新世代ブラウザへの対応を始めよ・・・

Flexboxをつかってナビゲーションを横並びにして、コンテンツも中央揃えをした前回に引き続き、Flexboxについてです。前回の最後の方でコンテンツ部分にalign-items
を使いましたが、今回はさらに一歩突っ込んだところを書いていきます。
[CSS]floatからFlexboxへ、新世代ブラウザへの対応を始めよ・・・

現在のWebデザインはスマートデバイスの普及によって小さなモニタにも柔軟に対応するレスポンシブデザインが必須となり、floatやclearハックを駆使してレイアウトを組んでいたWebコーディングもこれからはCSSに書き足すだけで柔軟なレイアウトが組めるFlexboxが主流になってくると思います。今回から2回に渡って説明します。