cman.jpWEBページ作成
広告
<li> 「箇条書きのリストの説明部」[読み方：エルアイ]
<li>タグは、<ul>～</ul>内または<ol>～</ol>内に記述を行います。
説明文の説明部分に該当し、一般的なブラウザではインデントされて表示されます。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<li> の仕様
<li> の属性
【構文】
<ul>
<li>～説明部～</li>
<li>～説明部～</li>
・・・
</ul>
<ol>
<li>～説明部～</li>
<li>～説明部～</li>
・・・
</ol>
<li>～説明部～</li>
<li>～説明部～</li>
・・・
</ul>
<ol>
<li>～説明部～</li>
<li>～説明部～</li>
・・・
</ol>
| 属性 | 意味 | 値のサンプルなど | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| type="マーカー種類" ※HTML5で廃止。スタイルシートで指定。 |
マーカーの種類 ※<ul>の場合 |
|
|||||||||
| 項番の種類 ※<ol>の場合 |
|
||||||||||
| value="項番の値" | 項番の値 ※<ol>の場合 |
"1","5" など |
| グローバル属性 |
| |
| イベント属性 |
| |
<li>タグのサンプル
<ul>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
</ul>
<br>
<ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
</ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
</ul>
<br>
<ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
</ol>
- HTMLはホームページを記述するための言語です。
- JavaScriptはホームページの動作を記述するためのスクリプト言語です。
- HTMLはホームページを記述するための言語です。
- JavaScriptはホームページの動作を記述するためのスクリプト言語です。
TYPEを指定する場合
※TYPEはHTML5で廃止されたため指定できません。スタイルシートで指定してください。
※TYPEはHTML5で廃止されたため指定できません。スタイルシートで指定してください。
<ul>
<li type="disc">HTMLはホームページを記述するための言語です。</li>
<li type="circle">JavaScriptは動作を記述するための言語です。</li>
<li type="square">STYLE(CSS)は見た目を記述するための言語です。</li>
</ul>
<br>
<ol>
<li type="1">HTMLはホームページを記述するための言語です。</li>
<li type="A">JavaScriptは動作を記述するための言語です。</li>
<li type="I">STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
<li type="disc">HTMLはホームページを記述するための言語です。</li>
<li type="circle">JavaScriptは動作を記述するための言語です。</li>
<li type="square">STYLE(CSS)は見た目を記述するための言語です。</li>
</ul>
<br>
<ol>
<li type="1">HTMLはホームページを記述するための言語です。</li>
<li type="A">JavaScriptは動作を記述するための言語です。</li>
<li type="I">STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
- HTMLはホームページを記述するための言語です。
- JavaScriptは動作を記述するための言語です。
- STYLE(CSS)は見た目を記述するための言語です。
- HTMLはホームページを記述するための言語です。
- JavaScriptは動作を記述するための言語です。
- STYLE(CSS)は見た目を記述するための言語です。
IEなど一部ブラウザによっては、TYPEに対応していない場合があります。
VALUEを指定する場合
<ol>
<li VALUE="3">HTMLはホームページを記述するための言語です。</li>
<li VALUE="1">JavaScriptは動作を記述するための言語です。</li>
<li VALUE="2">STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
<li VALUE="3">HTMLはホームページを記述するための言語です。</li>
<li VALUE="1">JavaScriptは動作を記述するための言語です。</li>
<li VALUE="2">STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
- HTMLはホームページを記述するための言語です。
- JavaScriptは動作を記述するための言語です。
- STYLE(CSS)は見た目を記述するための言語です。
スタイルシートを使用したサンプル
<head>
<style type="text/css">
<!--
#css-s1 ul {
list-style-type: circle;
}
#css-s2 ol {
list-style-type: decimal;
}
#css-s3 ol {
list-style-type: lower-alpha;
}
-->
</style>
</head>
～
<div id="css-s1">
<ul>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ul>
</div>
<div id="css-s2">
<ol>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ol>
</div>
<div id="css-s3">
<ol>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ol>
</div>
<style type="text/css">
<!--
#css-s1 ul {
list-style-type: circle;
}
#css-s2 ol {
list-style-type: decimal;
}
#css-s3 ol {
list-style-type: lower-alpha;
}
-->
</style>
</head>
～
<div id="css-s1">
<ul>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ul>
</div>
<div id="css-s2">
<ol>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ol>
</div>
<div id="css-s3">
<ol>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ol>
</div>
- ホームページを記述するための言語です。
- ホームページの動作を記述するためのスクリプト言語です。
- ホームページの見た目（色や線、配置など）を記述するための言語です。
- ホームページを記述するための言語です。
- ホームページの動作を記述するためのスクリプト言語です。
- ホームページの見た目（色や線、配置など）を記述するための言語です。
- ホームページを記述するための言語です。
- ホームページの動作を記述するためのスクリプト言語です。
- ホームページの見た目（色や線、配置など）を記述するための言語です。
詳細はスタイルシートリファレンスのlist-style-typeを参照ください。
リストマーカーに画像を使用する場合
<head>
<style type="text/css">
<!--
#css-s4 ul {
list-style-image: url(mark.png);
}
-->
</style>
</head>
～
<div id="css-s4">
<ul>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ul>
</div>
<style type="text/css">
<!--
#css-s4 ul {
list-style-image: url(mark.png);
}
-->
</style>
</head>
～
<div id="css-s4">
<ul>
<li>ホームページを記述するための言語です。</li>
<li>ホームページの動作を記述するためのスクリプト言語です。</li>
<li>ホームページの見た目（色や線、配置など）を記述するための言語です。</li>
</ul>
</div>
- ホームページを記述するための言語です。
- ホームページの動作を記述するためのスクリプト言語です。
- ホームページの見た目（色や線、配置など）を記述するための言語です。
詳細はスタイルシートリファレンスのlist-style-imageを参照ください。
留意事項
- <li>の終了タグ</il>は省略可能です。
- type属性はHTML5で廃止されました。スタイルシートで指定してください。
| 関連するCSS(STYLE) | |
|---|---|
| list-style | リストマークのデザイン |
| list-style-image | リストマークの画像 |
| list-style-position | リストマークの表示位置 |
| list-style-type | リストマークの種類 |
広告