【HTML,CSSの基礎】⑤nav（ナビ）メニューの作り方

こんにちは、Mac大好きです！Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

今日は、駆け出しエンジニアの方向け「Web制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

ナビゲーションメニュー（nav）の作り方

「ナビゲーションメニューの作り方」を解説します。

まずは概要から。

・ナビゲーションメニュー（ナビメニュー）は、navメニューと呼ばれたりもします。

・Webサイトの上部（ヘッダー）にある、横並びになっているメニューのことです。

HTML

・ナビメニューは、「nav、ul、li、a」タグを使います。

・navタグの中に、liタグでリストを作ります。

・リンクなので、liタグの中に「aタグ」を入れます。

CSS

・HTMLのブロック要素は、何も指定をしないと、縦に並ぶ性質があります。

・横並びにしたいので、要素をインライン要素に変えていきます。

nav ul li { display: inline;}

「navの中の、ulの中の、li要素」をinline（インライン）要素にする命令を与えるだけで、要素が横並びになります。

今日はここまで。

これからも「プログラミング初心者向け」に簡単なコードをご紹介していきます。「Progateの復習」に使ってみてください。一緒にプログラミングを楽しんでいきましょう！よろしくお願いします。