月火水木金土日
HTMLの見出しに1.1.等の連番を付けるCSS
＜h1＞＜h2＞の見出しに、1. や1.1. といった見出し番号を付ける。
概要
counter-reset で見出しの番号を初期化する
counter-increment で見出しの番号を進める
content , counter で見出しの表示方法を指定する
見出し連番の例
HTML
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>東京都</h1> <h2>港区</h2> <h3>浜松町</h3> <h3>芝浦</h3> <h3>六本木</h3> <h2>中央区</h2> <h3>月島</h3> <h3>日本橋</h3> <h2>北区</h2> <h3>浮間</h3> <h3>東十条</h3> <h1>北海道</h1> <h2>札幌市</h2> <h2>赤平市</h2> <h2>沙流郡</h2> <h1>京都府</h1> <h2>木津川市</h2> <h3>市坂</h3> <h3>加茂町</h3> <h3>吐師</h3> <h2>福知山市</h2> <h2>竹野郡</h2> <h3>網野町</h3> <h3>丹後町</h3> <h3>弥栄町</h3> </body> </html>
CSS (style.css)
body { /* H1のカウンタをリセット */ counter-reset: counter_H1; } /********************************/ h1::before { /* H1の表示方式の設定 */ content: counter(counter_H1) " "; /* H1のカウンタを進める */ counter-increment: counter_H1; } h1{ /* H2のカウンタをリセット */ /* H1 が出てきたときは、H2は1から始まるのでリセットする*/ counter-reset: counter_H2; /* 表示用 */ color:red; padding-left:0px; } /********************************/ h2::before{ /* H2の表示方式の設定 */ content: counter(counter_H1) "-" counter(counter_H2) " "; /* H2のカウンタを進める */ counter-increment: counter_H2; } h2{ /* H3のカウンタをリセット */
/* H2が出てきたときは、H3は1から始まるのでリセットする*/
counter-reset: counter_H3; /* 表示用 */ color:green; padding-left:30px; } /********************************/ h3::before{ /* H3 の表示方式の設定 */ content: counter(counter_H1) "-" counter(counter_H2) "-" counter(counter_H3) " "; /* H3のカウンタを進める */ counter-increment: counter_H3; } h3{ /* 表示用 */ color:blue; padding-left:60px; }