連番付きのリストを作るol（オーダード・リスト）タグと子要素のliタグの使用法について掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| ol要素 | ・フローコンテンツ（子要素として1個以上のli要素を持つ場合） ・パルパブルコンテンツ | なし |
| li要素 | 0個以上のli要素、及びスクリプトサポート要素 | フローコンテンツ |
書式・概要
ブロックレベル要素
<ol>
<li>リスト項目名</li>
・
・
・
</ol>リストの先頭の記号をマークではなく連番の箇条書きにしたい場合は、リスト全体を<ol>～</ol>で囲みます。（olは、ordered listの略）。リストの各項目については、ul用と同様に<li>～</li>で囲います。また、内容としては、テキストのみではなくインライン要素とブロックレベル要素の両方を入れることができます。さらにリストを入れ子にすることもできます。
ただし、ol要素の直下に別のol要素を置くことはできません。必ずli要素の子要素として置く必要があります。
ol要素の属性
グローバル属性
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
使用できる属性
reversed（リバースト）
ol要素におけるリストマーカーの順序を逆順にします。項目番号が降順（大きい数から小さい数へ）になります。
<ol reversed>
<li>リスト項目名</li>
・
・
・
</ol>start（スタート）
最初の項目に付ける番号を指定します。通常は昇順に並び替えが行われます。半角の数字のみ指定可能です。
<ol start="10">
<li>リスト項目名</li>
・
・
・
</ol>type（タイプ）
リストマーカーの形式を指定します。指定できる値は以下です。
- １「１」「２」「３」・・・：連番数字で表します。
- a「a」「b」「c」・・・・ ：小文字の半角アルファベットで表します。「z」まで到達した場合は、「ba」「bb」と続きます。
- A「A」「B」「C」・・・・：大文字の半角アルファベットで表します。「Z」まで到達した場合は、「BA」「BB」と続きます。
- i「i」「ⅱ」「ⅲ」・・・・：小文字のローマ数字で表します。
- I「I」「Ⅱ」「Ⅲ」・・・・：大小文字のローマ数字で表します。
<ol type="a">
<li>リスト項目名</li>
・
・
・
</ol>li要素の属性
value（バリュー）
ol要素の子要素として使用される場合のみ、リストマーカーに表示する数字を指定できます。半角数字のみ指定可能です。
<ol>
<li value="数字">リスト項目名</li>
・
・
・
</ol>使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ol要素、li要素のサンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
</head>
<body>
<ol>
<li>リスト項目名1</li>
<li>リスト項目名2</li>
<li>リスト項目名3</li>
</ol>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
番号の形式を変更する
ol要素にtype属性を指定することで、番号付きリストの各項目の前に表示される番号の表示形式を変更することができます。
基本的な書式
<ol type="番号の形式">
<li>リスト項目名</li>
・
・
・
</ol><!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
</head>
<body>
<ol type="a">
<li>リスト項目名1</li>
<li>リスト項目名2</li>
<li>リスト項目名3</li>
</ol>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
番号の順番を変更する
ol要素にstart属性を指定すると、番号付きリストを指定した番号から開始させることができます。
基本的な書式
<ol start="開始番号">
<li>リスト項目名</li>
</ol><!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コード指定->
</head>
<body>
<ol start="10">
<li>リスト項目名A</li>
<li>リスト項目名B</li>
<li>リスト項目名C</li>
</ol>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
リストマーカーの数字を任意に変更
value属性を使用して、リストマーカーを任意の数字にする
基本的な書式
<ol start="開始番号">
<li value="開始番号">リスト項目名</li>
</ol><!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コード指定->
</head>
<body>
<h1>すなりんカップの結果発表</h1>
<ol>
<li>うさぎさん</li>
<li value="2">いたちさん</li>
<li value="2">きつねさん</li>
<li>かめさん</li>
</ol>
</body>
</html>実行サンプル
chrome実行サンプル
Firefox実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント