低価格・高品質・最速のHTMLコーディングはクロノドライブへ

意外と知らない? ol要素で箇条書きの開始番号を指定するテクニック

順序付きリストであるol要素ですが、例えば1~3番目の要素を記述して、その間にテキストや画像などを挟み、またそれまでの番号から続けようとolを新たに記述すると、箇条書きの番号がまた1から始まってしまいます。そういった場合に、箇条書きの開始番号を指定してリストを作成する方法です。

HTML

01<ol>
02  <li>1番目の要素です。</li>
03  <li>2番目の要素です。</li>
04  <li>3番目の要素です。</li>
05</ol>
06<p>サンプルテキストです。</p>
07<ol>
08  <li value="4">4番目の要素です。</li>
09  <li>5番目の要素です。</li>
10</ol>

サンプルページ

ポイントとしては、開始番号を指定する要素の最初のliにvalue属性を指定することです。value属性が指定されたリストは、その数値から箇条書きの番号が開始されるようになります。

検証ブラウザ:IE6~8、Firefox3.x、Safari5.x、Opera10.x、Google Chrome 8.x

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ