WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <ol>「数字付き箇条書き領域」

<ol> 「数字付き箇条書き領域」[読み方:オーエル]

<ol>タグは、数字付き箇条書きや英字などの箇条書きリストの定義を行います。箇条書きの内容は<li>~</li>タグで記載します。
また、中点の箇条書きリストの場合は<ul>~</ul>タグを使用します。

HTML規格HTML4.01HTML5
使用可否
広告

<ol> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツフローコンテンツ<li>不可

<ol> の属性

【構文】
<ol>
<li>~説明部~</li>
<li>~説明部~</li>
・・・
</ol>
属性意味値のサンプルなど
type="マーカー種類" 項番の種類
意味
11. 2.~:数値
AA. B.~:英字
II. II.~:ローマ数値(大)
ii. ii.~:ローマ数値(小)
start="数値" 開始の値 "1","5" など
reversed 逆順に表示
※HTML5で追加
"reversed"
廃止された属性
  • compact
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<ol>タグのサンプル

<ol>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptはホームページの動作を記述するためのスクリプト言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
  1. HTMLはホームページを記述するための言語です。
  2. JavaScriptはホームページの動作を記述するためのスクリプト言語です。
  3. STYLE(CSS)は見た目を記述するための言語です。

TYPEを指定する場合
<ol type="A">
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
  1. HTMLはホームページを記述するための言語です。
  2. JavaScriptは動作を記述するための言語です。
  3. STYLE(CSS)は見た目を記述するための言語です。

IEなど一部ブラウザによっては、TYPEに対応していない場合があります。


startを指定する場合
<ol start="5">
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
  1. HTMLはホームページを記述するための言語です。
  2. JavaScriptは動作を記述するための言語です。
  3. STYLE(CSS)は見た目を記述するための言語です。

reversedを指定する場合
<ol reversed>
<li>HTMLはホームページを記述するための言語です。</li>
<li>JavaScriptは動作を記述するための言語です。</li>
<li>STYLE(CSS)は見た目を記述するための言語です。</li>
</ol>
  1. HTMLはホームページを記述するための言語です。
  2. JavaScriptは動作を記述するための言語です。
  3. STYLE(CSS)は見た目を記述するための言語です。

一部ブラウザによっては、reversedに対応していない場合があります。

ページTOP

スタイルシートを使用したサンプル

<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>
  1. ホームページを記述するための言語です。
  2. ホームページの動作を記述するためのスクリプト言語です。
  3. ホームページの見た目(色や線、配置など)を記述するための言語です。
  1. ホームページを記述するための言語です。
  2. ホームページの動作を記述するためのスクリプト言語です。
  3. ホームページの見た目(色や線、配置など)を記述するための言語です。

詳細はスタイルシートリファレンスのlist-style-typeを参照ください。

ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン