デモ
ご覧いただきまして、ありがとうございます！
早速、以下のデモをご覧ください！
一般的に使われるようなナビメニューをつくってみました。
シンプルなので、使い勝手はそこそこだと思いますが、是非一度、試してみてください。
ナビメニューHTML部分の解説
早速コードの方をご紹介したいと思います。
以下がHTMLの完成版になります。
<nav class="cf"> <div class="bg"> <div class="logo"><a href="#">logo</a></div> <ul> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> </div> </nav>
HTML部分を小分けにして解説
まずはnavの部分を見てみましょう！
<nav class="cf"> </nav>
ナビゲーションにはnavタグを使用しています。
navタグはナビゲーションだという事を示すためのHTMLタグですね！
classに振っているcfはclearfixです。（cssの部分でふれますね！）
もしくはこちらをご参照ください！
簡単に説明しますと、floatを使った時にclear: both;をかけて解除してくれるcssです。
clearfixについて詳しく知りたい方は調べてみてください。
詳しい使い方が載った参考サイトがたくさん出てきます！
<nav class="cf"> <div class="bg"> </div> </nav>
続いてがdivタグですね。
今回はclassにbg（backgroundの略として）をふっています。
オレンジ色の帯びの部分がこれにあたります。
ulの部分にはwidthを設定したいので、ここでwidth100％を一回つくっちゃおうというわけです！
<nav class="cf"> <div class="bg"> <div class="logo"><a href="#">logo</a></div> </div> </nav>
次はdiv class=”logo”の部分ですね。
こちらはwebサイトにとっては重要ですよね。
自身のサイトのlogoは必ず表示したいところです。
hrefには自身のサイトのindexデータを書き込みます。
自身のサイトのトップページがindex.htmlならそのままルートパスで書き込んであげるのがいいかと思います。
<a href="/index.html" alt="画像の説明">ほげほげ<a>
イメージ的には上記のような感じです。
ルートパスについては調べてみてください。
（ディレクトリのルート。（最上位階層から見た位置））
さて、話しが戻りますが、logoの部分を画像に置き換えたい時もあります。（多分ほとんどそうですねｗ）
そんな時はimgタグを使いましょう。
<a href="/index.html" alt="画像の説明"><img src="イメージのパス"><a>
imgタグの注意点は閉じタグがない事です。
<nav class="cf"> <div class="bg"> <div class="logo"><a href="#">logo</a></div> <ul> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> <li><a href="#">menu</a></li> </ul> </div> </nav>
続いてがメイン部分ですね。ulとli一気にいきたいと思います。
li（リスト）を使うルールとしてulが親である必要があります。
ulの部分には後述するcssでwidthを設定しています。
liはリストなので、ナビゲーションのリストを書き込むかたちになります。
もちろんアンカーが必要なので、aタグで囲っておきましょう！
HTMLの部分的なご説明は以上です！
ナビメニューCSS部分を解説
まずはcssの完成形になります。
※sassを使用して書いていましたので、cssにビルドすると長くなってしまいますが、適切に修正してみてください。また、reset.cssをあてている事を前提としています。
.cf::after {
content: "";
display: block;
clear: both;
}
nav {
background-color: orange;
width: 100%;
}
nav .bg {
width: 1000px;
margin: 0 auto;
}
nav .bg .logo {
float: left;
padding: 20px 0;
}
nav .bg .logo a {
text-decoration: none;
color: #000;
}
nav .bg ul {
float: right;
}
nav .bg ul li {
display: inline-block;
padding: 20px 0;
}
nav .bg ul li a {
padding: 20px;
text-decoration: none;
color: #000;
}
nav .bg ul li a:hover {
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 14px;
}
CSS部分を小分けにして解説
まずは、cfの部分ですね。
.cf::after {
content: "";
display: block;
clear: both;
}
こちらはfloatの解除を行ってくれるものです。
floatを行った親要素に対してクラス名cfを書き込んであげてください。
今回の場合だと、ulとdiv class=”logo”にfloatを使っています。
なので、その親要素にcfをふっています。
nav {
background-color: orange;
width: 100%;
}
navにはbackground-colorとwidthを設定しています。
ナビゲーションには100％の幅を持たせたかったので、width100%です。
background-colorにつきましては、お好きな色を設定してみてください！
または、ちょっとした画像なんかも面白いかもしれません。
その場合はリピート可能な画像を推奨します！
nav .bg {
width: 1000px;
margin: 0 auto;
}
クラスbgではlogoとulの幅を設定しています。
widthをお好みの数値に設定して、margin: 0 auto;を設定してみてください。
すると、中央寄せになるかと思います。
margin: 0 auto;は「上下のmarginを0」、「左右のmarginを均一」です。
marginとかpaddingは時計回りと覚えておくといいかもしれません！
４つ設定項目があるうち、順番に「top」、「right」、「bottom」、「left」です。
nav .bg .logo {
float: left;
padding: 20px 0;
}
お次はlogoについてです。
先ほど中央寄せにしたものの中で、logoだけを左寄せ（float: left;）にしています。
そして、paddingの設定ですね。
これで上下の高さが確保されたかと思います。
nav .bg .logo a {
text-decoration: none;
color: #000;
}
こちらはlogoに対してのaタグです。
text-decoration: none;としてアンカーにつく下線を非表示にしています。
（reset.cssで下線表示なしとかもありますね。）
そしてテキストのカラーを変更しています。
nav .bg ul {
float: right;
}
ulに関しては、右寄せにしています。
これでlogoと左右に分かれたかと思います。
nav .bg ul li {
display: inline-block;
padding: 20px 0;
}
今のままでは、メニューの部分が縦に並んでいるかと思います。
それを横並びにするのが、display: inline-block;です。
displayプロパティには色んなものがありますので、調べておくといいかもしれません。
そして、paddingですね。
左右のpaddingを20、上下を0としています。
nav .bg ul li a {
padding: 20px;
text-decoration: none;
color: #000;
}
こちらはメニューに対するアンカーです。
リンクがあたる範囲を持たせたいので、paddingを全方向20pxとしています。
そして、先ほどのaタグと同様にtext-decoration,colorの設定をしています。
nav .bg ul li a:hover {
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 14px;
}
最後にメニュー部分のhover時の設定です。
hoverした時にcolorをホワイトに変更する。
border-bottomに罫線をいれる。
そして、フォントから罫線までの高さを確保するといった感じです。
paddingの調整などで、罫線までのpadding範囲は変更しますので、適宜そのあたりの数値の変更を行ってみてください。
以上でcssの解説は終了です。
最後までご覧いただきまして、ありがとうございました！！
まとめ
今回はシンプルですが、ナビゲーションメニューについて書いてみました。
ナビゲーションといえばドロップダウンだったり、選択の保持などがありますが、そちらについてもいずれ書いていきたいと考えています。
HTMLとCSSは歴としては長いのですが、全然身になっていませんｗ
今でも「あれ、こういう時、、、」などと調べる事が山盛りです。
ネット上には色んな参考文献がありますので、分からなかったら調べてみる！っていう風にやっています。（考えても時間だけが過ぎるのでｗ）
それでも分からない時は、もう聞く！か、手当たり次第！しかないですよねｗ
書き方がへたくそで解説になっていなかったら申し訳ないですが、初心者の方でも出来るようにと書いてみたつもりです。
これから、色んな情報を書いていきたいと考えていますので、よろしくお願い致します。
ご覧いただきまして、ありがとうございました！
