cman.jpWEBページ作成
広告
<ol> 「数字付き箇条書き領域」[読み方：オーエル]
<ol>タグは、数字付き箇条書きや英字などの箇条書きリストの定義を行います。箇条書きの内容は<li>～</li>タグで記載します。
また、中点の箇条書きリストの場合は<ul>～</ul>タグを使用します。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | ○ | ○ |
広告
<ol> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ | フローコンテンツ | <li> | 不可 |
<ol> の属性
【構文】
<ol>
<li>～説明部～</li>
<li>～説明部～</li>
・・・
</ol>
<li>～説明部～</li>
<li>～説明部～</li>
・・・
</ol>
| 属性 | 意味 | 値のサンプルなど | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| type="マーカー種類" | 項番の種類 |
|
||||||||||
| start="数値" | 開始の値 | "1","5" など | ||||||||||
| reversed | 逆順に表示 ※HTML5で追加 |
"reversed" | ||||||||||
| 廃止された属性 |
|
|||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<ol>タグのサンプル
<ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
- HTMLはホームページを記述するための言語です。
- JavaScriptはホームページの動作を記述するためのスクリプト言語です。
- STYLE(CSS)は見た目を記述するための言語です。
TYPEを指定する場合
<ol type="A">
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
- HTMLはホームページを記述するための言語です。
- JavaScriptは動作を記述するための言語です。
- STYLE(CSS)は見た目を記述するための言語です。
IEなど一部ブラウザによっては、TYPEに対応していない場合があります。
startを指定する場合
<ol start="5">
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
- HTMLはホームページを記述するための言語です。
- JavaScriptは動作を記述するための言語です。
- STYLE(CSS)は見た目を記述するための言語です。
reversedを指定する場合
<ol reversed>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
- HTMLはホームページを記述するための言語です。
- JavaScriptは動作を記述するための言語です。
- STYLE(CSS)は見た目を記述するための言語です。
一部ブラウザによっては、reversedに対応していない場合があります。
スタイルシートを使用したサンプル
<head>
<style type="text/css">
<!--
#css-s2 ol {
list-style-type: decimal;
}
#css-s3 ol {
list-style-type: lower-alpha;
}
-->
</style>
</head>
～
<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-s2 ol {
list-style-type: decimal;
}
#css-s3 ol {
list-style-type: lower-alpha;
}
-->
</style>
</head>
～
<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を参照ください。
| 関連するHTMLタグ | |
|---|---|
| li | 箇条書きのリスト |
| 関連するCSS(STYLE) | |
|---|---|
| list-style | リストマークのデザイン |
| list-style-image | リストマークの画像 |
| list-style-position | リストマークの表示位置 |
| list-style-type | リストマークの種類 |
広告