ホームページ作成講座番号リスト

番号リストのHTMLタグ

番号リストを作成するためのHTMLタグを見てみましょう。

<ol>～</ol>

連番を振るタイプのリストを作成します。

<li>～</li>

リストの各項目を作成します。

基本的に箇条書きと同じような構成になります。 ただ、連番のスタート番号を変更したい場合にstart属性を付けることができます。 他にも使用できる属性があるので、見ておきましょう。

start="開始番号"

olタグに記述します。番号リストの開始番号を指定します。負の数を指定することもできます。

reversed="reversed"

olタグに記述します。連番の振り方を3,2,1というように逆順にします。

value="数値"

liタグに記述します。項目のリスト番号を変更します。以後、変更した数値から連番が振られていきます。

なお、番号は普通1,2,3…という数値が振られますが、 スタイルシートを使うとa,b,cやI,II,IIIと言った連番を振ることも可能です。

番号リストのサンプル

では、番号リストを使ったサンプルを見てみましょう。

temp.htmlを開いて、listフォルダに「lesson2.html」というファイル名で保存しましょう。 そしてbody内に以下のように記述してみてください。

<h1>当店人気TOP10</h1>

<h2>ベスト３</h2>

<ol>
 <li>フランスパン</li>
 <li>食パン</li>
 <li>くるみパン</li>
</ol>

<h2>ランキングの残り</h2>

<ol start="4">
 <li>クリームパン</li>
 <li>トマトピザ</li>
 <li value="5">ベーコンピザ</li>
 <li value="7">チョコデニッシュ</li>
 <li>エビフライサンド</li>
 <li>明太フランス</li>
 <li>コロッケパン</li>
</ol>

ブラウザで確認すると、下のようになります。

start属性とvalue属性を使った時にどのように番号が振られているか確認なさってください。