HTML/CSS

【ヘッダーデザイン】よくあるパターンのコーディングストック

コーディングの効率化を図るためには、たくさんのデザインの経験し、デザインを見ただけでコーディングのイメージが湧くというのが理想です。

しかし、始めのうちはそうはいきません。

 

これからのために、ありがちなコーディングパターンをストックしておきたいとおもいます。

今回はヘッダー編です。

 

よくあるコーディングパターン

 

右上でのCODEPENロゴをクリックして、全画面でご覧ください。

パターン①:右側にボタン+ドロワーナビ

See the Pen
headerパターン(ドロワーナビ)
by kei (@kei_01011)
on CodePen.

レスポンシブ対応にDrawer.jsを使用したパターンです。

 

 

パターン②:ブログなどのメディアパターン+モーダル

See the Pen
headerパターン(モーダル)
by kei (@kei_01011)
on CodePen.

ブログなどのメディアでよくみるパターンで、最上部にインフォメーションバーがあり、レスポンシブ時はモーダルでメニューが表示されます。

 

パターン③:シンプルなデザイン+フローティングメニュー

See the Pen
headerパターン(フローティングメニュー)
by kei (@kei_01011)
on CodePen.


左側にロゴ、右側にナビメニューがあるシンプルなデザイン。

レスポンシブ時はロゴだけ表示し、ナビメニューはフッターに固定されます。

 

FontAwesomeのアイコンを使えば、よくあるスマホメニューの完成です。

 

少しずつストックを増やして、コーディングの効率化を進めていきたいと思います。