【10ステップ】画像+メニューのグローバルナビの基本的な作り方

【左にロゴ+右にバナー群】ヘッダーの基本的な作り方に続いて、今日はナビゲーションメニューの作り方について学んだ。基礎を理解するために、一つ一つのプロパティの動きを追いながらCSSを実装していくと、全部で10ステップとなった。今後ナビゲーションを作成するためのベースとするべく、内容をまとめたいと思う。

今回作りたいもの

今回作るものは以下の画像の赤枠で囲った部分。コーディングを行ったサイトでは左端にロゴ画像が入っていたので同じ様に入れたが、別に無くても下記の手順で作れるはず。まあ要はよくあるテキストベースのグローバルナビの作成手順である。

以下CODEPENにて各ステップごとのCSSの記述を記載しているが、CSSのコメント欄にはステップの番号を記載した。番号の記載がない記述は、主に見た目を分かりやすくするためのものであり、ナビメニューを作る上では直接は関係ない。

0.初期状態

See the Pen
【 step0】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

まず初期状態での見た目はこんな感じだ。CSSにはまだ何も書いていない。HTMLに関して説明すると、初めに<div class="wrapper">で全体を囲み、この中にロゴである<p>タグとナビゲーションで<ul>を入れている。<p>タグ<ul>タグ共にブロック要素であるため、この時点では縦に並び、かつ親要素である<div class="wrapper">の横幅いっぱいまで広がっている。

1.ロゴとナビゲーションを横並びにする

See the Pen
【 step1】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

まず初めに、<div class="wrapper">display: flex;をかけることによって、ロゴとナビゲーションを横並びにする。<div class="wrapper">幅いっぱいまで広がっていた<p>タグと<ul>タグの幅が要素分の幅に収まる様に変化したことが分かる。

2.ナビゲーションの中身(li)を横並びにする

See the Pen
【 step2】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

今度は<ul>タグにdisplay: flexをかけ、縦積みになっている<ul>の中身<li>を横並びにする。list一番左の「TOP」の横幅がナビメニュー群に比べて短くなっている、ナビゲーションの中身であるテキストは、デフォルトの基準である左上に寄っている点を意識する。

3.ナビゲーションエリア(ul)を横いっぱいに広げる

See the Pen
【 step3】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

最終的にナビゲーションをロゴの横に均等の幅で並べたいのだが、ここではその準備として、ナビゲーション群の親要素である<li>の幅を100%に設定する。本来であれば親要素である<div class="wrapper">の横幅である1140pxまで広がるが、ロゴ画像があるため、1140pxからロゴ画像の横サイズを除いたエリア(黄色背景の部分)が<ul>の横幅となる

4.個々のナビゲーションリスト(li)を幅(ul)全体に均等に並べる

See the Pen
【 step4】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

3によって広がった<ul>の範囲まで、子要素である<li>の幅を広げる。5つあるナビメニューに対して長さを均等に割り振りたいので「width: calc(100% / 5)」と設定する。
ここまでで枠は完成。

5.リンク範囲(a)の横の長さをリスト幅(ul)全体に広げる

See the Pen
【 step5】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

リンクテキストはインライン要素であるが、これをブロック要素化する。
ブロック要素は親要素の幅を引き継ぐため、<li>の長さまで横の長さが広がっているのが分かる。

6.リンク範囲(a)の縦の長さをリスト幅(ul)全体に広げる

See the Pen
【 step6】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

横に続き、縦も親要素いっぱいにリンク範囲を広げたいが、そのために<height: 100%>を適用する。リンク範囲(紫色)が縦いっぱいに広がったのが分かる。ここまででリンク範囲の作成が完成。あとはテキストを縦横中央に寄せれば完了だ。

7.リンクテキストテキストを縦横中央寄せするための準備

See the Pen
【 step7】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

テキストの位置を調整するためにリンク範囲をフレックス化しておく(この時点で見た目は変わらない
ステップ5でブロック要素化したので、<a>に対して<display: block><display: flex>が同時に設定されることになるがOK

8.リンクテキストテキストを縦横中央寄せする

See the Pen
【 step8】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

ステップ7でフレックス化したリンクテキストに対して<align-items: center>」と「<justify-content: center>を設定することによって、縦横中央揃えにする。縦に関してはこの時点では余白がないので見た目上の変化が分かりにくいが、<justify-content: center>を設定することによって、上に寄っていたのが中央に寄せられている。

9.リンクテキストの上下に余白を作る

See the Pen
【 step9】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

この時点ではナビゲーションエリア<li>の高さがテキストの高さ分しかなので、上下に<padding>を設定することによって余白を作る必要がある。さてリンクテキストの上下に余白が出来たのは良いが、上下にはみ出ててしまっている。これは、要素の幅には<padding>(と<border>)は含まれないというCSSの仕様があるためであり、見た目を直すには、CSSによる調整が必要である。

10.上下にはみ出たリンクエリアの上下余白をナビゲーションエリアまで戻す【完成】

See the Pen
【 step10】画像+メニューのグローバルナビ を作る方法
by Ken (@kaneyan)
on CodePen.

ステップ9ではみ出た余白に関する改善には<box-sizing>プロパティを利用する。<box-sizing: border-box>という記述を行うことによって、<padding>分の余白をナビゲーションエリアの中に含ませる様にする。これで完成だ。

まとめ

初学者の備忘録用のまとめなので間違っている点やもっと良くなる点があるかも知れません。何かお気づきの点があればご連絡ください。<height:100%>で範囲を広げる点、<box-sizing>を使って<padding>を中に入れる点などが勉強になった。

よし!またこれで一つレベルアップ!積み重ねていくぞ!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です