【HTML/CSS】いろいろなリストを作ろう（記号編）

HTML/CSS

2021.05.302021.07.05

HTMLでただテキストをだらだら書いていると読みづらいと思います。

表や一覧形式を使うだけでも、読みやすくなりますよね。

今回は、HTMLで一覧表示をする方法や、

表示できる種類についてご紹介したいと思います。

contents

リスト表示の種類

リストというと、どのようなものを思い浮かべるでしょうか？

番号形式や

以下のような黒丸形式のものを思い浮かべる方が多いのではないかと思います。

ここでは、記号を使った一覧の作り方をご紹介していきます。

黒丸や白丸など、様々な記号を使うことができます。

画面表記	HTMLコード	CSS
1番目 2番目 3番目	<ul> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ul>	不要
1番目 2番目 3番目	<ol class=”disc”> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ol>	.disc { list-style-type: decimal; }

画面表記	HTMLコード	CSS
1番目 2番目 3番目	<ol class=”circle”> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ol>	.circle { list-style-type: circle; }

画面表記	HTMLコード	CSS
1番目 2番目 3番目	<ol class=”square”> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ol>	.square { list-style-type: square; }

画面表記	HTMLコード	CSS
1番目 2番目 3番目	<ol class=”none”> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ol>	.none { list-style-type: none; }

アスタリスクは、Safariのみ表示ができます。

画面表記	HTMLコード	CSS
1番目 2番目 3番目	<ol class=”asterisks”> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ol>	.asterisks { list-style-type: asterisks; }

一覧表示に使える記号はいろいろありますが、
ブラウザの種類によっては、表示できない場合もあります。

使うブラウザは人によって様々ですので、
カバー範囲が広い記号を使うようにした方がいいですね。