[15-2] 番号付きリストを作ろう( ol要素・li要素)

最終更新日:2017年10月31日  (初回投稿日:2011年05月26日)

前回から引き続き リストを表示する要素 です。

リストには「ul(Unordered List)」「ol(Ordered List)」「dl(Description List)」がありますが、 今回は ol( Ordered List = 番号付きリスト)を使ってみよう。
<ol>要素によるリストは、順序があるリストです。

使用する要素 <ol> 〜 </ol>
<li> 〜 </li>

●2017年10月、サンプルを外部ファイルではなく記事中に表示させ、本文も修正しました。
●2013年11月、<ol>要素の「reversed属性」が漏れていましたので追記しました。

ol 要素で「番号付きリスト」を作ろう

構造は、<ul>要素 とまったく同じです。<ol>要素の中に<li>要素を入れるだけ。
<ol> の中に <li>要素は 必ず1個以上は入ってなきゃいけません。

<ol>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ol>

プレビューはこちら。マーカーが、ブラウザデフォルトで数字になっていますね。

  1. リストアイテム
  2. リストアイテム
  3. リストアイテム

start属性で リストの開始番号を変更できる

開始番号を指定することもできます。
リストの途中で一旦切って、あとで続きのリストを書きたい場合などに便利。

start属性で「開始番号」を指定するだけ。
下記は開始番号を「3」にした例です。

  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
  4. リストアイテム
  5. リストアイテム
<ol start="3">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ol>

reversed属性で リストを降順にする

デフォルトでは昇順(小から大へ)になっています。
これを降順(大から小へ)に変更することもできます。

reversed属性 を指定するだけ。reversed属性は HTML5 からの新属性です。
番号が逆順になるだけで、HTML上に書いた順番は変わりません。

  1. リストアイテム1
  2. リストアイテム2
  3. リストアイテム3
  4. リストアイテム4
  5. リストアイテム5
<ol reversed>
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>
  <li>リストアイテム3</li>
  <li>リストアイテム4</li>
  <li>リストアイテム5</li>
</ol>

value属性で リストの途中から番号を変える

リストの途中でカウントの番号を変えることもできます。

これは <li>要素に value属性を指定します。
下記は4番目のリスト項目に「value ="15"」と指定してみました。

  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
  4. リストアイテム
  5. リストアイテム
<ol start="3">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li value="15">リストアイテム</li>
  <li>リストアイテム</li>
</ol>

リストマーカーは CSSで変更します

<li>要素のリストマーカーは、CSSの list-style-typeプロパティに たくさんのスタイルが用意されています。
デフォルトのアラビア数字(decimal)以外に変えたい場合は、CSSで指定します。

  1. decimal (デフォルトはこれ、アラビア数字(decimal))
  2. lower-roman (ローマ数字の小文字)
  3. upper-roman (ローマ数字の大文字)
  4. lower-alpha (アルファベットの小文字)
  5. upper-alpha (アルファベットの大文字)

上記はスタイルの一例です。漢数字やカナなど、カウントするテキストを表示できます。
他のマーカーは「はじめてのCSS」カテゴリーの
【17-2-2】リスト関連の要素のためのCSSプロパティ をご覧ください。

このように、<li>要素に list-style-typeプロパティで指定します。

li {
	list-style-type: lower-alpha;
	}

ある特定のリストだけ マーカーを変えたければ、<ol>要素に id名か class名を付けて特定し、その <li>要素に list-style-typeプロパティを指定します。
マーカーの指定は <li>要素でします。<ol>要素ではできません。

CSSはこちら。

ol#sample{
	margin: 0;
	}
ol#sample li {
	list-style-type: lower-alpha;
	}

HTMLはこちら。

<ol id="sample">
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ol> 

idとclassの違いについては「はじめてのCSS」カテゴリーの
【3】id とか classって何?(セレクタの「種類」を知っておこう)をご参照ください。

リストマーカー「画像」や「任意のテキスト」にする方法もあります。
[15-4] リストマーカーを画像や任意のテキストに変更する方法 で説明します。

リストのブラウザデフォルトスタイル

リストは ブラウザのデフォルトスタイルで、左側にスペースが空くようになってます。
それは、親要素( <ul>要素、または <ol>要素 )に、ブラウザのデフォルトスタイルで 「padding-left」があるから。

また、<li>要素はデフォルトで リストマーカーが左にはみ出しています。
これは <li>要素にブラウザデフォルトで list-style-position: outside があるから。

リストを他の要素と左揃えにする(左のスペースをとる)には、
<li>要素に list-style-position: inside を指定してマーカーを引っ込ませ、
親要素に padding-left: 0 と指定して左側のスペースを無くします。

リストの CSSの詳細は、「はじめてのCSS」カテゴリーの
【17-2-2】リスト関連の要素のためのCSSプロパティ
に書いていますのでご覧ください。

次回予告

次回は、dl(説明リスト)を作りましょう。
これまでの ul ol と違って、リスト項目は li を使わず「dt」と「dd」を使います。
「dt」は用語のタイトル、「dd」はその解説。リスト項目がこのように2種類に分かれていることによって、いろいろ使い勝手が良いリストです。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.