CSS

【実践】ヘッダーレイアウト

ヘッダーレイアウトの制作を通して、フレックスボックスとmarginのautoキーワードを組み合わせる方法について見ていきます。

  • ヘッダーレイアウトの制作
  • marginとの組み合わせ

ヘッダーレイアウトの制作

・サイトなどでよく見るヘッダーの左上にロゴがあって右上にメニューが有るようなスタイリングをしていきます。

・まずヘッダーにロゴとなるimgタグを配置しその下にnavタグとリストを配置します。navタグはulを使ってリストにしておくのが一般的なのでリストで作っておきましょう。将来的にリンク先もつけることを想定しaタグでリンクも付けておきます。

・リストのスタイリングをリセットしていきます。先頭の黒丸はいらないのでnone;にしてmargin, paddingは０にしておきましょう。

・今回の場合ヘッダーが親要素になるのでヘッダーに対してdisplay: flex;を指定しimgで作ったロゴとnavタグで作ったリストをブラウザの両端に置きたいのでjustify-content: space-between;を指定してあげます。

・こうすることでimgロゴが左端にnav要素が右端に来るように指定することができます。

marginとの組み合わせ

・また、余白をnavの左側に配置することでnavを右に寄せることもできます。

・navに対してプロパティをmargin-left:値をauto;に設定することでフレックスボックスと同じように指定できます。

 

-広告-

 

 






-CSS