html: 箇条書き (リスト) の作り方
UB3/informatics/html/html_list
このページの最終更新日: 2024/09/30- 概要: 箇条書き (リスト) の作り方
- 各種オプション
- 2 行目にインデントを追加する
広告
概要: 箇条書き (リスト) の作り方
ol または ul というタグを使い、各アイテムは li で指定する。つまり以下のような形になる。
<li>ここに 1 個目の内容</li>
<li>ここに 2 個目の内容</li>
<li>ここに 3 個目の内容</li>
</ul>
ol は番号の箇条書き、ul は点などの箇条書き。
各種オプション
ol および ul タグには、複数のオプションがある。
指定した数字から箇条書きを開始できる。 |
|
箇条書きを逆順にできる。HTML5 から使える。 |
|
インデントは CSS で指定することが推奨されているが、このように style オプションを使っても設定することができる。 px による指定のほか em でも指定可能。padding にも left のほか top, right, bottom がある。 |
|
記号の部分の指定は、none が記号なし、disc が黒丸、circle が白丸、square が四角。 ol でこれを使うと、番号のスタイルを設定できる。decimal は数字、lower-alpha で a, b, c など小文字のアルファベット、upper-alpha で大文字のアルファベットなど。 |
li タグにもオプションがある。とくに
アイテム間の間隔を広げたい場合は、css で margin-top を指定したクラスを作り、それを li で参照する。 |
|
箇条書きで 1, 3, 6, 10... のように各項目に好きな番号を割り振りたい場合は、li を value で指定する。 一つ指定すると、そこから続き番号になる。上の例のように飛び飛びにしたい場合は、その都度 value で指定する必要がある。 |
2 行目にインデントを追加する
とりあえず このページ をリンクしておく。
広告
コメント欄
サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。