ol要素

ol要素 数字付きのリスト ブロック要素

ol要素は数字付きのリストを作成するときに使います。内容にはli要素を入れてリスト項目を作ります。
ol要素はli要素（リストの項目）を内容に入れていっしょに使います。ブラウザで表示するときは上から1,2,3、と順番にリスト項目が表示されます。
要素の前後で改行され上下に1行分の余白ができるのはul要素と同じです。この余白はcssのmarginプロパティで調整できます。
cssでリスト記号の種類を変えたり、リスト記号の代わりに画像を入れたりすることができます。

内容にできる要素

li要素

<ol>
<li>リスト</li>
<li>リスト</li>
</ol>

実際の表示

1. リスト
2. リスト

cssでデザインを指定する場合

html

<ol class="a">
<li>リスト</li>
<li>リスト</li>
</ol>

css

リストの余白を調整

値には長さの単位marginは外側の余白、値が2つだと1つ目が上下、2つ目が左右を指定します。値を0にすると余白がなくなります。

ol.a { margin: 10px 20px; }

リスト項目の記号を変える

値にはdisc（黒い丸） circle（白い丸） square（黒い四角） decimal（数字） lower-roman（小文字のローマ字の数字）
upper-roman（大文字のローマ字の数字） lower-alpha（小文字のアルファベット） upper-alpha（大文字のアルファベット） none（リスト記号なし）

ol.a { list-style-type: disc; }

リスト記号の代わりに画像を表示する

値にはurl(画像のurl)

ol.a { list-style-image: url('img.gif'); }

文字の大きさの指定

文字が大きすぎる場合や小さすぎる場合cssで文字の大きさを調整をします。

ol.a { font-size: 12px; }

文字の太さの指定

値には「bold」太字「normal」通常「bolder」やや太く「ligher」やや細く

ol.a { font-weight: normal; }

文字の斜体の指定

値には「italic」斜体（イタリック体）「normal」通常「oblique」斜体

ol.a { font-style: normal; }

文章の行間を広げる

値にはパーセンテージ「%」長さ「px」「em」など

ol.a { line-height: 150%; }

文字色の指定

値には色を指定する値が使えます

ol.a { color: red; }

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性

イベント属性

イベント属性