【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の復習」に使ってみてください。一緒にプログラミングを楽しんでいきましょう!よろしくお願いします。

この記事が気に入ったらサポートをしてみませんか?