ul / ol タグ (箇条書き)


箇条書きの例

 箇条書きを作るには、ul または ol タグを使います。箇条書きの項目は li タグを使って定義します。

ul タグの場合

<ul>
<li>北海道</li>
<li>青森県</li>
<li>秋田県</li>
</ul>

ol タグの場合

<ol>
<li>岩手県</li>
<li>宮城県</li>
<li>山形県</li>
</ol>
  1. 岩手県
  2. 宮城県
  3. 山形県

入れ子になった箇条書き

 箇条書きは入れ子にすることもできます。

<ul>
<li>福島県</li>
 <ul>
  <li>福島市</li>
  <li>郡山市</li>
  <li>いわき市</li>
 </ul>
 <li>茨城県</li>
 <li>栃木県</li>
</ul>

属性

 ul, ol タグには固有の属性はありません。li タグには value 属性があって、olタグの場合、数の増加を変更できます。

グローバル属性, イベント属性

スタイルの変更

 list-style-type スタイルを変更すると、項目の先頭に付く黒丸や数字の形式を変更できます。

<ul style="list-style-type: square;">
<li>群馬県</li>
<li>埼玉県</li>
<li>千葉県</li>
</ul>

<ol style="list-style-type: katakana;">
<li>東京都</li>
<li>神奈川県</li>
<li>山梨県</li>
</ol>
  1. 東京都
  2. 神奈川県
  3. 山梨県

 以下によく使われるスタイルを示します。

list-style-typeul/ olスタイル
discul黒い丸 (デフォルト)
squareul黒い正方形
circleul白い丸
katakanaolカタカナ
hiraganaolひらがな
cjk-ideographicol漢数字
upper-romanolI, II, III ...
upper-latinolA, B, C ...
lower-romanoli, ii, iii, ...
lower-latinola, b, c, ...

 

このページの先頭へ戻る