olタグとは?|番号付きのリストを表示しよう

olタグとは?|番号付きのリストを表示しよう
博士
前回は、順序のないリストの作り方を解説したが、今回は番号付きリストの作り方も解説していくぞ。
リンゴ
リストの各項目に番号を振ることもできるんですね!
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<ol>タグとは

 

<ol>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / 1つ以上のli要素を子要素に含む場合:パルパブル・コンテンツ
利用場所フロー・コンテンツが期待される場所
内容li要素を0個以上


 
 
<ol>タグは、順序のあるリストを表示する際に使用するタグです。
リスト表示される各項目は、<li>タグで指定します。
 
 

使用例

 
 

表示例

ニコニコ動画には、主に以下のようなサービスがあります。

  1. 動画
  2. 静画
  3. 生放送

 
 
また、リストに階層を持たせたい場合は、以下のようにli要素の中に別のol要素を配置します。
 
 

 
 

表示例

ニコニコ動画には、主に以下のようなサービスがあります。

  1. 動画
  2. 静画
    1. マンガ
    2. 電子書籍
  3. 生放送

 
 

start属性

start属性を使用すると、リストの開始番号を指定することができます。
番号は整数で指定し、0やマイナスの値も指定できます。
デフォルトは「1」です。
 
 

使用例

 
 

表示例

olタグ start属性の表示例
 
 

博士
複数のリストを続き番号で表示したい場合に役立つぞ。
 
 

スポンサーリンク

type属性

type属性を使用すると、リストの各項目の先頭に付く番号の種類を変更することができます。
指定できる値は以下の通りです。
 
 

110進数(1,2,3,…)(初期値)
a小文字アルファベット(a,b,c,…)
A大文字アルファベット(A,B,C,…)
i小文字ローマ数字(i,ii,iii…)
I大文字のローマ数字 (I,II,III,…)

 
 

使用例

 
 

表示例

olタグ type属性の表示例
 
 

reversed属性

reversed属性を使用すると、リストの順番を降順にすることができます。

降順になるのは、各項目に振られた番号のみです。
項目の表示順は変わりません。
 
 

使用例

 
 

表示例

olタグ reversed属性の表示例
 
 

スポンサーリンク

まとめ

順序のあるリストを表示する際は、<ol>タグを使用します。
さまざまな属性を指定することで、リスト番号の種類や開始番号を変更することができます。
 
 

博士
<ul>タグと併用して、見やすいコンテンツを作ろう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








olタグとは?|番号付きのリストを表示しよう