HTML/CSSの学習を始めると、初期の頃につまずくヘッダーの書き方。
ロゴが左にあって、右側にグローバルメニューがあって、中央揃えはどうするとか、スクロールしても固定するにはどうするかとか。。。
いくつかパターンをつかんでおけば、それを使いまわしたり多少アレンジすることで、かなり応用が効くのではないかと思います。
無料の学習サイトから、そのコーディングパターンをストックさせてもらいます。
定番のHTML
まずHTMLでは、よくあるパターンはこんな感じかと思います。
See the Pen
ヘッダー 定番のHTML by bat (@bat20190608)
on CodePen.
header>header-nav>h1とnav,
navの中がul>li となっているパターンが多いですね。
ここに問い合わせボタンがついたりはンバーガーメニュー が加わったり。
「Codestep」から
Web学習者ならみんな知っているCodestep。
たくさんの練習素材をレベル別に用意してくれていて、デザインカンプからコーディングする練習もできます。
今回はこちらの課題を使わせてもらいます。
See the Pen
Codepen初級サイト header by bat (@bat20190608)
on CodePen.
ポイントは、「ロゴ＋メニュー」と「お問い合わせボタン」を別にしているところ。
その上で、display: flex; justify-content: space-between; にして、「お問い合わせボタン」は右端に置かれるようにしています。
「ロゴ＋メニュー」の部分は、wrapperでmax-widthを指定してmargin: 0 auto; にすることで左右中央寄せされています。
またpaddingも設定しているので、幅が広くても狭くても両サイドに適切な余白が生まれます。
「くりnote」から
超低価格で超優良な教材を提供していただいている、くりのすけさんの教材の無料部分から使わせていただきます。
See the Pen
くりnote無料①ヘッダー by bat (@bat20190608)
on CodePen.
こちらはロゴとナビゲーションメニューという2つの構成です。
ポイントは、シンプルに全体をdisplay: flex; justify-content: space-between; にするところ。
全幅の均等割りにして、nav についても同様に均等に広げます。
さらに加えると、nav li は margin-right: 50px; にして、要素と要素の間に一定の間隔を空けています。
またヘッダーが固定されるように、少しアレンジを加えました。
position: fixed; で固定されているので、スクロールしてもヘッダーはずっとそこにいます。
「未経験からWebデザイナーへ」から
同じく無料の超有益教材を提供していくれているサイトです。
余談ですが、ページ内スクロールの解説などもあり、本当に詳細な説明で「無料？」と心配になるレベル。
デザインカンプからコーディングする練習もできます。
今回はこちらを使わせていただきます。
See the Pen
header_sample by bat (@bat20190608)
on CodePen.
ポイントは、position:fixed; でヘッダーを固定していて、width: 100%; にしている時に、そのままでは要素がはみ出してしまうところ。
ここを修正するのに、box-sizing: border-box; が必要になります。
position:fixed; にすると他の要素から浮きあげってしまうので、親要素の枠枠の中にいなくなるようです。
ところがbox-sizing: border-box; にすると、きれいに枠内に収まり解決します。
以上、ヘッダーのよくあるパターンを紹介しました。
これらのパターンをつかんでおけば、少々のアレンジが必要になっても時間かからずに対応できると思います。
