_s(underscores)のナビゲーションをモバイルファーストのレスポンシブデザインにしてみる

先日、_s(underscores)のナビゲーションをカスタマイズしてみました。

この時には、まずPC表示を優先して作成したのですが、「そういえば、_s(underscores)をモバイルファーストにするんだったな」と本来のコンセプトを思い出しまして、せっせと作り直してみました。

モバイル用CSS

長々と書いてありますが、まずはモバイル(スマホ)用のCSSを記述します。button.menu-toggle<button>タグをリセットする内容を記述しています。5.2 Menusにこちらを記述していますが、これよりも以前に<button>タグの設定をしてありますので、こちらをリセットする内容になっています。

こちらに上書きする形でタブレットサイズ以降(PCも含む)のCSSを記述します。

タブレット、PC用CSS

こちらで先ほどのモバイル用CSSを上書きして768px以上のデバイス幅のブラウザで適応されます。