Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
番号付きリスト(ol/li)の途中で番号を変更する方法を紹介します。 1.問題点 番号付きリスト(ol/li)でol要素にstart属性を与えることで、開始番号を決めることができます。 <ol start="5"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ol> 実行結果 あああ いいい ううう そうではなく、リストの途中で番号を変更したいのですが、変更する方法が分かりません。 たとえば次のリストで、「えええ」から10を振りたいような場合です。 <ol> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> <li>おおお</li> </ol> 2.番号付きのリストの途中で番号を変更する 途中で番号を変更するには番号を変えたいli要素にvalue属性を追加し、変更する番号を属性値に設定します。 <o
ol要素の入れ子で親の番号を子に割り当てる方法を紹介します。 HTMLマークアップ <ol class="list"> <li>タイトル1 <ol> <li>タイトルA <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> <li>タイトルB <ol> <li>タイトルA-1</li> <li>タイトルA-2</li> </ol> </li> </ol> </li> <li>タイトル2 <ol> <li>タイトルC</li> <li>タイトルD</li> </ol> </li> </ol> 完成イメージ 完成イメージでお分かりのとおり、子リストに親リストの番号が引き継がれています。 参考:デフォルトの表示 1.CSSの設定 親の番号を子に割り当てるには、次のCSSを適用します。 ol { counter-reset: section; } l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く