HTMLのul、ol、liタグでリスト作成（箇条書き）を作る方法を紹介します。
このタグをうまく活用することで、箇条書き以外でもいろんなところで利用できます。

ul・ol・liとは

HTMLでリスト作成（箇条書き）するときに使用します。
<li>タグでリストの項目を作り、<ul>、もしくは <ol>のどちらからで囲みます。
ですので、<ul>と<li>、または、 <ol>と<li>のセットで使用し、<li>は複数使用できます。

書き方

<ul>
　　<li>リストの内容１<li>
　　<li>リストの内容２<li>
　　<li>リストの内容３<li>
</ul>

ulとolの違いについて

<ul>と<ol>では、表示が異なります。
中黒の箇条書きを作成したい場合は<ul>タグを使用し、順番のある箇条書きを作成する場合は<ol>を使用します。

<ul>の書き方・作成例

<ul>
　　<li>リストの内容１<li>
　　<li>リストの内容２<li>
　　<li>リストの内容３<li>
　　<li>リストの内容４<li>
</ul>

中黒で箇条書きが表示されます。

<ol>の書き方・作成例

<ol>
　　<li>リストの内容１<li>
　　<li>リストの内容２<li>
　　<li>リストの内容３<li>
　　<li>リストの内容４<li>
</ol>

番号で箇条書きが表示されます。

リスト作成（箇条書き）以外の使い方

<ul>タグは、リスト作成以外でも使います。
例えば、ナビ（nav）、カテゴリーの表示などブロックごとに使用したい場合に使います。

、カテゴリーの表示などブロックごとに使用したい場合に使います。

書き方

<ul>
　　<li>
　　　　<div>ブロックの内容１</div>
　　<li>
　　<li>
　　　　<div>ブロックの内容２</div>
　　<li>
　　<li>
　　　　<div>ブロックの内容３</div>
　　<li>
</ul>

この場合、リストダグの中黒（・）をCSSで非表示に設定します。

非表示の書き方

「list-style: none; 」タグを使用することで非表示に設定できます。

cssの書き方

ul {
　list-style: none;
}

おさらい

リストタグは状況によって、<ul>、<ol>で使いかける必要があります。
CSSでデザインを工夫することで、観やすくわかりやすいものになります。
また、ナビ（nav）やブロックごとに表示するなど、いろんなところで使用されます。