菱川です。今回はナビゲーションメニューについてお話ししたいと思います。 まず、ナビゲーションメニューと言うのは、僕のホームページの上の方にもあるようなメニューバーみたいなやつです。 
サイトを作るとき、ユーザーはナビゲーションメニューがあるとそこから簡単に目的のページにたどり着けるので非常に重要なパーツでもあります。そして、多分この部分が一番作るのが難しい部分だと僕は思ってます。 また、凝れば凝るほど良くなりますし、やり方も結構人それぞれな部分もあります。いろいろ探すとナビゲーションメニューバーだけのCSS,htmlコードとか配布されていたりしますけど、できるものなら一人で作りあげたいですよね。 僕はこのサイトを作るのにわりと一生懸命勉強したけど「訳わかんねぇ！！動いたらそれでいいや！！」って言う部分もあって、この辺何でちゃんと動いてるんだろうって所もいっぱいあります。実際、CSSが煩雑で荒れに荒れてて、修正するのがめちゃくちゃ大変でしたしこれからも大変です。でも、それができない自分と、できる自分では全然違います。 と言うわけで、すごく簡単に、1からナビゲーションメニューを作りましょう！！できるかな！
まずはhtmlを打ち込む
ul,liタグを入れ子にしてメニューを作る
まずはこんなコードを書きます。
こういうの作るときに一番めんどくさいのが**「あれっ？自分今どこのulタグいじってるの？」**ってなっちゃうことです…面倒かもしれませんが、きちんとインデントを付けたほうがいいかと思います。 個人的におすすめするのがmicrosoft visual studioです。フリーソフトでgpadとかterapadとか色々あるんですけど、僕的にはこれに落ち着きました。VBとかC#用だったりしますけどweb書くのにも十分使えます。htmlは自動でインデントしてくれて、CSSも予測変換が出て嬉しいです。
CSSを書く
次はCSS。こんな感じで書いちゃいましょう。
これもねぇ…**「今どこ書いてんだ！？」**ってなるんですよねぇ…。なんか順番とか変で汚かったらすみません。コメントになるべくわかりやすくて楽しい説明も書いてみました。今回ごちゃごちゃやってたら疑似要素無しで出来上がっちゃいました。要するに逃げです。
実際どうなるか見てみよう！！
こんな感じです。
※記事に無理やり表示させるようにちょっといじくりました。 それっぽくはなりましたね！！ これをベースに、例えばアニメーションをフェードインで表示させたいなと思ったら
とすればフェードインしたりします(やってみたけどめっちゃ微妙にフェードインが分かるくらいだった…)
先ほどのをもうチョイ変えて、ホバーした時に隠れた要素が出てくるようにしたらフェード感出ますね！
さいごに
いかがだったでしょうか。このように色々な効果を試して皆さんもオリジナルのナビゲーションメニューを作ってみてください。ボタンのデザインに関しては「CSS ボタン」なんかで探すとCSSのみでグラデーションのついたボタンを作ることができます。こちらでもまたその記事が書けたらいいなと思います。 ではまた！