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

*<ol>要素の「reversed属性」が漏れていましたので、追記しました(2013年11月1日追記)
サンプルファイルも追加更新しました。

今日は、ol(番号付きリスト)を使いましょう。
ol(番号付きリスト)は、順位があるリストです。

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

サンプルのダウンロードはこちら

今日のサンプルHTMLです。
honttoni15-1.html ★画像をクリックするとHTMLファイルを開きます(別ウィンドウで開く)
★開いたHTMLのソースをブラウザで読んでもらえばOKですが、
めんどくさい人は、こちらから↓zipファイルをダウンロードできます。
→本日のサンプル(sample15-2set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

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

構造は、下記のように、<ol>要素の中に<li>要素を入れるだけ。ul とまったく同じです。
たったこれだけで、リストに番号をつけることができます。

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

上記のHTMLソースをブラウザで見ると↓このようになります。

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

リストの開始番号を変更できます。

1から始まりたくない場合は、開始番号を指定することもできます。
リストの途中で一旦切って、あとで続きのリストを書きたい場合などに便利。
ol要素に「start」属性を指定します。
下記は開始番号を3した例です。

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

リストの番号を大きい順から表示することもできます。
ol要素に「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>

リストの途中で、カウントの数字を変えることもできます。
これは 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で変更します。

リスト番号の数字を他の種類に変更するには、やっぱりCSSを使います。
「list-style」プロパティで、あらかじめ下記の番号のスタイルが用意
されています。

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

CSSの指定の仕方もulのときと同じです。
そのページで使う全部の番号付きリストを、同じ表示にする場合なら、
ol要素、li要素に、ダイレクトにCSSを指定(idやclass属性を設定しないってこと)

ol {
	margin: 0px; /*olのブラウザデフォルトのマージンを無しにしています。*/
}
li {
	list-style: lower-roman; /*ローマ数字の小文字を番号をに指定。*/
}

そのHTMLページ内で、特定の番号付きリストだけスタイルを変えたい場合は、
ol要素に、「id」(または class) をつけてから、CSSを指定します。
(下記は、ol要素に「sample-upper-alpha」というidをつけていますよ。)

ol#sample-upper-alpha {
	margin: 0px;
}
ol#sample-upper-alpha li {
	list-style: upper-alpha;
}

honttoni15-1.html 今回もサンプルHTMLを見た方が話が早いと思います。 リスト番号のCSSによる指定を詳しめに説明しています。
画像をクリックするとHTMLファイルを開きます(別ウィンドウで開く)

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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 30 31 - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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