HTML辞典 ol要素、li要素の解説

ギフト・ポイントGet!
HTML辞典 HTML辞典
この記事は約10分で読めます。

連番付きのリストを作るol(オーダード・リスト)タグと子要素のliタグの使用法について掲載

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素カテゴリーコンテンツモデル
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(タイプ)

リストマーカーの形式を指定します。指定できる値は以下です。

  • 1「1」「2」「3」・・・:連番数字で表します。
  • 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実行サンプル

基本的なサンプル ol要素 chrome実行サンプル

Firefox実行サンプル

基本的なサンプル ol要素 firefox実行サンプル

edge 実行サンプル

基本的なサンプル ol要素 edge実行サンプル

opera 実行サンプル

基本的なサンプル ol要素 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実行サンプル

番号の形式変更サンプル ol要素 chrome実行サンプル

Firefox実行サンプル

番号の形式変更サンプル ol要素 firefox実行サンプル

edge 実行サンプル

番号の形式変更サンプル ol要素 edge実行サンプル

opera 実行サンプル

番号の形式変更サンプル ol要素  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実行サンプル

番号の順番変更サンプル ol要素  chrome実行サンプル

Firefox実行サンプル

番号の順番変更サンプル ol要素  firefox実行サンプル

edge 実行サンプル

番号の順番変更サンプル ol要素  edge実行サンプル

opera 実行サンプル

番号の順番変更サンプル ol要素  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実行サンプル

li要素のvalue属性サンプル chrome実行サンプル

Firefox実行サンプル

li要素のvalue属性サンプル firefox実行サンプル

edge 実行サンプル

li要素のvalue属性サンプル edge実行サンプル

opera 実行サンプル

li要素のvalue属性サンプル opera実行サンプル

コメント

タイトルとURLをコピーしました