ulタグ・olタグ・liタグとは
ホームページを作成していると、ナビゲーション（メニュー）の作成やリストの形式で何かを表示させたいことも多々あると思います。そんなときに使用するのがこのulタグ・olタグ・liタグになってきます。
ulタグとは
<ul>タグとは番号の付かないリストを作成します。
- こんな感じで
- リストを作成しまーす
こちらのコードの中身はこんな感じです。↓
<ul>
<li>こんな感じで</li>
<li>リストを作成しまーす</li>
</ul><ul>タグとはこのような箇条書きリストなのですが、このような番号なしリストのことを非序列リストと呼びます（なお全然覚える必要はなし）
ちなみに、<ul>タグだけではリストを作成することができず、必ずセットで<li>タグを使用します。
olタグとは
<ol>タグは番号付きのリストを作成することができます。
- このように
- 番号が付いたリストを
- 作成できます
上の例のコードはこんな感じになっています。↓
<ol>
<li>このように</li>
<li>番号が付いたリストを</li>
<li>作成できます</li>
</ol><ol>タグの使用頻度はそれほど高くはありませんが、例えば操作の手順や道順の説明などに使用します。<ol>タグに関しても必ずセットで<li>タグを使用します。
liタグとは
<li>タグは単独で使用することはないタグで必ず親要素が存在します。これまでの例で行くと<ul>タグ（箇条書きリスト）だったり<ol>タグ（番号付きリスト）だったりです。
<li>タグの働きと言うとリストの中身を作成するタグで、これに囲まれている部分がリストの中身になります。これが増えるだけリストの項目も増えるということです。
<ul>
<li>liタグを使えば使うほど</li>
<li>リストの項目が増殖していくぞ！</li>
<li>このようにね！！</li>
</ul>- liタグを使えば使うほど
- リストの項目が増殖していくぞ！
- このようにね！！
HPのメニューの作成
HPによくあるメニューの作成にこのリストのタグを使用することもあります。
上のページ以外で例を示すとこんな感じ。<nav>タグを使用します。
<body id="top">
<header>
<nav class="nav">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="#news">お知らせ</a></li>
<li><a href="#shop">店舗情報</a></li>
<li><a href="access.html">アクセス</a></li>
<li><a href="menu.html">メニュー</a></li>
<li><a href="contact.html">お問合わせ</a></li>
</ul>
</nav>
</header>
</body>このように、<header>タグ内に設定するとヘッダ部分にナビが並びます。ただ、普通に並べると縦に並んでしまいますので、CSSでスタイルを設定する必要があります。
.nav ul {
list-style-type: none;
margin: 30px 0px 0px 0;
padding: 0;
list-style-type: none;
display: flex;
gap: 40px;
justify-content: center;
}display:flex;で横並びにし、項目と項目との感覚をgapで指定しています。
ちなみにですが<body id=”top”>この部分で指定しているのは、このホームページでも右下に表示していますが何かしらのボタンを押すとページの上部に飛ぶことが出来るようにしています。
詳しいやり方はこちらの記事に書いています。↓