箇条書き（リスト）から横並びのナビゲーションメニューを作る

ウェブサイト上部でよく目にするナビゲーションメニュー。

そんなナビゲーションメニューが簡単に作れたらと思ったことはありませんか？

そこで今回は箇条書きリストから横並びのナビゲーションメニューを作成する方法を初心者向けに解説していきます。

ナビゲーションメニューを作る方法にはいくつかの種類があります。

今回解説する方法は最も基本的な方法で解説していくことにします。

今回の完成イメージ

HTMLで箇条書きリストを作る

箇条書きリストをHTMLでコーディングする場合２通りの方法があります。

主に『・』で表すリストと、『数字』で表すリストです。

ulで作成したリストの例

See the Pen ZEbemog by PakuPaku (@PakuPaku) on CodePen.

olで作成したリストの例

See the Pen qBOrQKa by PakuPaku (@PakuPaku) on CodePen.

今回は『ul』を使用して箇条書きリストを作成します。

HTMLで構造化タグを指定する

そして今回はこの箇条書き（リスト）が、ナビゲーションであることをHTMLで指定しておきましょう。

更には今回はヘッダーにこのナビゲーションを配置しようと思っているので、これも同時にHTMLで指定しておきましょう。

HTMLでのコーディング例

See the Pen jObBQoo by PakuPaku (@PakuPaku) on CodePen.

HTMLでそれぞれのリストにリンク先を指定する

それぞれのテキストをクリックした場合に、リンク先へ飛ぶように各テキストに指定しておきましょう。

HTMLでのコーディング例

See the Pen KKdWbwO by PakuPaku (@PakuPaku) on CodePen.

CSSで箇条書きのマークを消す

HTMLで箇条書き（リスト）を指定した場合、『・』や『数字』が自動で付与されます。

今回はこの『・』や『数字』は不要なのでCSSを使って消すことにしましょう。

liのリストマークを消す為には『list-style』を『none（無し）』と指定します。

CSSでのコーディング例

See the Pen ExVWGwX by PakuPaku (@PakuPaku) on CodePen.

CSSで箇条書き（リスト）を横並びにする

要素を横並びにする方法にはいくつかありますが、今回は箇条書き（リスト）をインライン要素にする方法を使用します。

インライン要素にすることで、箇条書き（リスト）は文章（文字）として認識される為、自然と横並びになるというわけです。

CSSでのコーディング例

See the Pen KKdWboV by PakuPaku (@PakuPaku) on CodePen.

CSSで左ボーダー（枠線）指定

枠線の指定にはどの場所に線を引くか指定をすることができます。

今回は左側に線を引きたいので『boder-left』を指定します。

CSSでのコーディング例

See the Pen GRpWzgV by PakuPaku (@PakuPaku) on CodePen.

CSSで文章間の指定

今の状態では文章間が狭い為、非常にみづらくなっています。

そこで少しCSSで間隔を空ける指定をしましょう。

今回はpaddingを広げることで、文章間の空白を指定します。

更に今回は左右のpaddingの幅を広げ、空白を作りたいと思います。

CSSでのコーディング例

See the Pen MWapLbE by PakuPaku (@PakuPaku) on CodePen.

CSSで高さの指定

今回の場合だとインライン（文字の高さ）要素、この要素の高さを調整します。

この場合は行間を指定する方法で、高さを調整することが可能となります。

CSSでのコーディング例

See the Pen PoPpVEN by PakuPaku (@PakuPaku) on CodePen.

CSSで最初のボーダー（枠線）を消す

デザイン的に最初の枠線（ボーダー）を消したいと思います。

まずはHTMLで最初のリスト『Menu1』の部分にクラス名を指定します。

これは最初のリストのみをCSSで指定する為の前準だと思って下さい。

<li class="fast-menu"><a href="#">menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>

そしてCSSでこのクラス（fast-menu）のボーダー指定『border-left』を無し『none』と指定します。

CSSでのコーディング例

See the Pen qBOrvEB by PakuPaku (@PakuPaku) on CodePen.

CSSでロールオーバー時にテキストの色を変える

ロールオーバー時に動きを与えたい場合には:hover擬似クラスを使用します。

今回の場合はli要素に対して:hover擬似クラスを指定します。

またロールオーバー時には文字色を赤色で指定する方法をとりたいと思います。

CSSでのコーディング例

See the Pen wvKJOop by PakuPaku (@PakuPaku) on CodePen.

まとめ

いかがだったでしょうか。

うまくナビゲーションバーは作成できたでしょうか。

今回解説した方法の他にもいくつかやり様は存在します。

自分なりのやり方を発見して、自分なりに作成できるようになりましょう。