今回は、navタグとリスト要素を作る際のul、ol、liタグの解説を致します。
まずは、ナビゲーションの要素に使うnavタグについて説明します・
navタグは、サイト内の他のページへのリンクをまとめたナビゲーションに使われます。
言葉だけではわかりづらいため、以下の画像をご覧ください。
画像の赤線で引いている箇所にnavタグを使っています。
navタグは、主要なナビゲーションのみに使われるため、一般的には、
メニューや目次などに使われています。
以下、navタグの使用例です。
<nav>
<ul>
<li>プログラミング</li>
<li>webデザイン</li>
<li>Blog</li>
<li>ポートフォリオ</li>
</ul>
</nav>
このように、navタグの後に、ulタグを使用し、
画像のメニューを作成しています。
リスト要素の使い方[ul,ol,li]
ulタグは、順序に関係なくリストを表示するときに使用し、
liタグは、リストの各項目に使用します。
百聞は一見にしかずということで、以下のデモの使用例をご覧ください。
See the Pen eYZjPrZ by ryu (@ryu-no-sss) on CodePen.
このように、ulタグを使用すると、各項目の先頭に『・』が表示されます。
もし、『・』を消したい場合は、『list-style: none;』とCSSに記載しましょう。
list-styleについては、以下のリンクの記事で説明していますので、気になる方はぜひ！
続いては、olタグについてです。
olタグは、順序のあるリストを表示する場合に使用されます。
以下のデモをご覧ください。
See the Pen vYGaVVr by ryu (@ryu-no-sss) on CodePen.
このように、olタグを使うと、各項目の先頭に数字が記載されます。
まとめ
・navタグは、メニューや目次などの主要なナビゲーションに使う。
・ulタグは、順序のないリストに使用する。
・olタグは、順序のあるリストに使用する。
・liタグは、各項目の要素に使う。
今回は、navタグとリスト要素の使い方[ul,ol,li]について解説しました。
他にも、実戦でよく使うHTMLコードを以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
