リスト要素を使う

新規作成日 2018-11-01

最終更新日 2018-11-01

リスト要素は、箇条書きで使用する他にcssで、デザインを適用することで、さまざまな場面で使用されています。

リストの項目を記述する際、ul要素やol要素の中に、それぞれの項目を表すli要素入れてい使用します。

リスト要素

リスト要素は、ul, ol, liの各要素を組み合わせて表現します。

ul要素

ulは、Unordered Listの略で、リスト項目に順序を付けない場合に使用します。

ul要素の上下には、マージンが設定されています。（normalize.cssでは、上下に、16pxづつ）

<ul>
    <li>項目</li>
    <li>項目</li>
    <li>項目</li>
</ul>

項目
項目
項目

ol要素

olは、Ordered Listの略で、リスト項目に順序を付ける場合に使用します。

<ol>
    <li>項目</li>
    <li>項目</li>
    <li>項目</li>
</ol>

項目
項目
項目

li要素

liは、list item の略で、リストの項目を表示するために使用します。

リストを入れ子にする

リストを入れ子にする場合の記述は、以下のようになります。

<ul>
    <li> 項目
        <ul>
            <li>項目</li>
            <li>項目</li>
            <li>項目</li>
        </ul>
    </li>
    <li>項目</li>
    <li>項目</li>
</ul>

項目
- 項目
- 項目
- 項目
項目
項目

<ol>
    <li> 項目
        <ol>
            <li>項目</li>
            <li>項目</li>
            <li>項目</li>
        </ol>
    </li>
    <li>項目</li>
    <li>項目</li>
</ol>

項目
1. 項目
2. 項目
3. 項目
項目
項目

emmet入力

emmet入力に対応したエディタを使用すると、短縮入力を利用することができます。

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ol>li*3

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

ul>li.Item$*3

<ul>
    <li class="Item1"></li>
    <li class="Item2"></li>
    <li class="Item3"></li>
</ul>

行頭のデザインを指定する

行頭のデザインは、cssあるいは、スタイル属性を使用して指定します。

行頭記号の種類を指定する

list-style-typeプロパティを使用する

行頭記号の種類は、list-style-typeプロパティを使用します。

ul要素
設定値	意味
none	なし
disc	黒丸
circle	白丸
square	四角

<ul style="list-style-type:none; margin: 5px 0;">
	<li>なし</li>
</ul>
<ul style="list-style-type:disc; margin: 5px 0;">
	<li>黒丸</li>
</ul>
<ul style="list-style-type:circle; margin: 5px 0;">
	<li>白丸</li>
</ul>
<ul style="list-style-type:square; margin: 5px 0;">
	<li>四角</li>
</ul>

<ul>
    <li style="list-style-type:none">なし</li>
    <li style="list-style-type:disc">黒丸</li>
    <li style="list-style-type:circle">白丸</li>
    <li style="list-style-type:square">四角</li>
</ul>

なし

黒丸

白丸

四角

なし
黒丸
白丸
四角

ol要素（主なもの）
設定値	意味
decimal	算用数字（1, 2, 3, ...）
upper-roman	大文字のローマ数字（I, II, III,…）
lower-roman	小文字のローマ数字(i, ii, iii,…)
upper-alpha	大文字のアルファベト（A, B, C, …）
lower-alpha	小文字のアルファベト（a, b, c,...）
lower-greek	小文字のギリシャ語(α, β, γ…)
hiragana	日本語の「あいうえお」(あ、い、う、...)
hiragana-iroha	日本語の「いろは」（い、ろ、は、...）
katakana	日本語の「アイウエオ（ア、イ、ウ、...）」
katakana-iroha	日本語の「イロハ」(イ、ロ、ハ、...)
japanese-formal	法的または財務の文書で使用される、日本語の公的な数値表記（壱、弐、参、...）
japanese-informal	日本語の数値表記（一、二、三、...）

<ol style="list-style-type:lower-alpha">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
</ol>

要素
要素
要素
要素

参考

tpe属性

type属性を指定することで、行頭記号を変更することができます。

type属性に指定できる値
値	行頭記号
1	算用数字（1, 2, 3, ...）
a	小文字のアルファベト（a, b, c,...）
A	大文字のアルファベト（A, B, C, …）
I	大文字のローマ数字（I, II, III,…）
i	小文字のローマ数字(i, ii, iii,…)

<ol type="i">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
</ol>

<ol>
    <li type="1">要素</li>
    <li type="a">要素</li>
    <li type="A">要素</li>
    <li type="I">要素</li>
    <li type="i">要素</li>
</ol>

要素
要素
要素
要素

要素
要素
要素
要素
要素

行頭記号に画像を使用する

list-style-imageプロパティを使用する方法

行頭記号に画像を使用するには、list-style-imageプロパティに、画像のurl（画像のパス）を指定します。

<ul style="list-style-image: url(Images/kukkeko_32-32.png)";>
    <li>要素</li>
</ul>

要素

list-style-imageプロパティで、頭記号に画像を使用すると、画像の上下位置の調整を行うことができません。下端で位置合わせが行われます。

文字の上下中央に位置合わせした状態にするには、文字サイズに合わせた画像を使用する必要があります。

background-imageを使用する方法

行頭記号の画像の上下位置を調整するために、list-style-imageプロパティではなく、background-imageプロパティを使用して、行頭記号の画像を背景画像を使用して表現する方法があります。

<ul style="	list-style-type:none;
	background-image:url(Images/kukkeko_32-32.png);
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:30;">
    <li>要素</li>
</ul>

要素

list-style-type:none;

行頭記号を非表示にします。

background-image:url(Images/kukkeko_32-32.png);

背景画像を指定します。

background-repeat:no-repeat;

画像が繰り返さないように、no-repeatを指定します。

background-position:left center;

横位置は左、縦位置は中央に指定します。

padding-left:40px;

リストマークの画像と文字が重ならないように画像の幅＋αを指定します。

画像がテキスト高さより大きいと、画像の上下のはみでた部分がが表示されないことに注意してください。

リストを降順にする

ol要素のreversed属性を指定すると、リストの順序を降順にすることができます。

<ol reversed="reversed">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
</ol>

<ol reversed="">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
</ol>

要素
要素
要素
要素

要素
要素
要素
要素

リスト行頭記号の位置を指定する

リスト行頭記号の位置を指定するには、list-style-positionプロパティを使用します。

insideを指定した場合、行頭文字は、リスト項目の先頭文字の位置に挿入されます。outsideを指定すると、行頭文字は、リスト項目の外側に配置されます。

<ul style="list-style-position:inside">
    <li>「list-style-position:inside」<br>
    行頭記号が、テキスト内に配置されます</li>
</ul>

<ul style="list-style-position:outside">
    <li>「list-style-position:outside」<br>
    行頭記号が、テキストの外側に配置されます</li>
</ul>

「list-style-position:inside」
行頭記号が、テキスト内に配置されます

「list-style-position:outside」
行頭記号が、テキストの外側に配置されます

リスト番号の制御

リストの開始番号を変更する

リストの開始番号は、start属性で指定する事ができます。

<ol start="3">
    <li>項目</li>
    <li>項目</li>
    <li>項目</li>
</ol>

項目
項目
項目

リストの連番を変更する

li要素に、value属性を指定することで、その項目の番号を指定できます。以降の項目は、指定した番号の連番になります。

<ol>
    <li value="0">項目</li>
    <li>項目</li>
    <li value="5">項目</li>
    <li>項目</li>
</ol>

項目
項目
項目
項目

特別な使い方

リスト要素は、cssをうまく使うことで、さまざまデザインを表現する際にも使用されています。

グローバルメニュー

グローバルメニューは、ul要素が使われています。

パンくずリスト

パンくずリストには、ol要素が使われていることがあります。

ページトップへ