html: 箇条書き (リスト) の作り方

UB3/informatics/html/html_list

このページの最終更新日: 2023/02/14

  1. 概要: 箇条書き (リスト) の作り方
  2. 各種オプション
  3. 2 行目にインデントを追加する

広告

概要: 箇条書き (リスト) の作り方

ol または ul というタグを使い、各アイテムは li で指定する。つまり以下のような形になる。

<ul>
<li>ここに 1 個目の内容</li>
<li>ここに 2 個目の内容</li>
<li>ここに 3 個目の内容</li>
</ul>

ol は番号の箇条書き、ul は点などの箇条書き。

各種オプション

ol および ul タグには、複数のオプションがある。

<ol start="数字">

指定した数字から箇条書きを開始できる。

<ol reversed>

箇条書きを逆順にできる。HTML5 から使える。

<ol style="padding-left: 20px">

インデントは CSS で指定することが推奨されているが、このように style オプションを使っても設定することができる。

px による指定のほか em でも指定可能。padding にも left のほか top, right, bottom がある。

<ul style="list-style-type: 記号">

記号の部分の指定は、none が記号なし、disc が黒丸、circle が白丸、square が四角。

ol でこれを使うと、番号のスタイルを設定できる。decimal は数字、lower-alpha で a, b, c など小文字のアルファベット、upper-alpha で大文字のアルファベットなど。


li タグにもオプションがある。とくに アイテム間の間隔を広げたい場合 には、ul や ol でなく li でマージンを指定することは覚えておいて損はない。

<li class="aaa">

アイテム間の間隔を広げたい場合は、css で margin-top を指定したクラスを作り、それを li で参照する。

<li value="3">

箇条書きで 1, 3, 6, 10... のように各項目に好きな番号を割り振りたい場合は、li を value で指定する。

一つ指定すると、そこから続き番号になる。上の例のように飛び飛びにしたい場合は、その都度 value で指定する必要がある。

2 行目にインデントを追加する

とりあえず このページ をリンクしておく。


広告

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。

References