HTMLで箇条書きリストを作成

はじめに

またまたhtmlの記述方法を忘れていたので投稿しようと思います。

今回は箇条書きのレイアウトです。
ヘッダーの　navで使用される所をよく見ます。

ul要素・li要素

• ul要素
  順序のないリストを示すブロックレベル要素です。li要素と一緒に使用します。

• li要素

リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。

.html

<ul class="lists">
  <li class="list">リスト1</li>
  <li class="list">リスト2</li>
  <li class="list">リスト3</li>
  <li class="list">リスト4</li>
</ul>

このように表示する事ができます。

また、箇条書きの黒点が邪魔な時が消す事ができます

.css

.list{
  list-style: none;
}

余談

olを使って順序をつけた記述もできます。

.html

<ol>
 <li class="list">リスト1</li>
  <li class="list">リスト2</li>
  <li class="list">リスト3</li>
  <li class="list">リスト4</li>
</ol>