counter 連番をふる
連番を振る手順は
1)contentプロパティで連番の位置と様式を設定する。contentプロパティは:before疑似要素／:after疑似要素とともに使う。即ち、指定要素の前か後に連番をつける。
(書式)
要素:befor {content:counter(カウンター名)}
要素:befor {content:"付加する文字" counter(カウンター名) "付加する文字"}
* counter(カウンター名)の前か後に、又は両方に半角スペースを開け付加する
文字を付け加えれる。
(例) p:befor{content:"★こいつが" counter(test) "番だ！"}
2)counter-increment:カウンター名 数値
を付け加える。これが連番を進めるプロパティ。
数値は任意。半角スペースで区切り整数値を指定すると、指定された整数値の分ずつ
カウンタの値を進める(省いた場合、自動的に1だけ値を進める）
(例) p:befor{counter-increment:test;
content:"★こいつが" counter(test) "番だ！"}
3)複数箇所に同じ連番を付ける場合、数値をリセットして始めなければならない。
そこで箇所を区切る要素に「counter-reset:(値)プロパティ」を設定する。
(書式)
counter-reset:カウンター名 ･･･自動的にカウンターの値を0 にリセットする
counter-reset:カウンター名 数値 ･･･指定された整数値にカウンターをリセット
(例) h4 {counter-reset:test 5}
Sample
近畿地方
大阪都
兵庫県
京都府
奈良県
その他
中国地方
鳥取県
島根県
岡山県
その他
九州地方
長崎県
熊本県
鹿児島県
大分県
佐賀県
近畿地方
大阪都
兵庫県
京都府
奈良県
その他
中国地方
鳥取県
島根県
岡山県
その他
九州地方
長崎県
熊本県
鹿児島県
大分県
佐賀県
近畿地方
大阪都
兵庫県
京都府
奈良県
その他
中国地方
鳥取県
島根県
岡山県
その他
九州地方
長崎県
熊本県
鹿児島県
大分県
佐賀県
近畿地方
大阪都
兵庫県
京都府
奈良県
その他
中国地方
鳥取県
島根県
岡山県
その他
九州地方
長崎県
熊本県
鹿児島県
大分県
佐賀県
近畿地方ではが大阪都だった。以下は次の通り、兵庫県京都府奈良県その他
中国地方では鳥取県島根県以下は省略しました。
Sample Source......................................................................>>>
<style type="text/css">
<!--
div.dv1 p { counter-reset:test1}
div.dv1 p span:before {counter-increment:test1;content:counter(test1)}
div.dv2 p {counter-reset:test2}
div.dv2 p span:before {counter-increment:test2;content:counter(test2) "位..."}
div.dv3 p { counter-reset:test3}
div.dv3 p span:before {counter-increment:test3;
content:"★ "counter(test3) "位...";color:green}
div.dv4 p {counter-reset:test4}
div.dv4 p span:before {counter-increment:test4 3;
content:"★ " counter(test4) "位...";color:magenta}
div.dv5 p {counter-reset:test5}
div.dv5 p span:before {counter-increment:test5;
content:"★ " counter(test5) "番-";color:blue}
-->
</style>
</head>
<body>
<div class="dv1"style="width:260px;height:100px;border:1px solid navy;padding:5mm">
<u><font size="-1">[content:counter(カウンター名)]だけの場合</font></u><br>
<div style="float:left;margin-right:10mm"><p><u><b>近畿地方</b></u><br>
<span>大阪都</span><br><span>兵庫県</span><br><span>京都府･･･(略)･･･ </p></div>
<div style="float:left;margin-right:10mm"><p><u><b>中国地方</b></u><br>
<span>鳥取県</span><br><span>島根県</span>･･･(略)･･</p></div>
<div><p><u><b>九州地方</b></u><br>
<span>長崎県</span><br><span>熊本県</span><br><span>鹿児島県･･･(略)･･･</p></div>
</div>
<div class="dv2"style="width:310px;height:100px;border:1px solid navy;padding:5mm">
<u><font size="-1">[content:counter(カウンター名) "位..."]の場合</font></u><br>
<div style="float:left;margin-right:10mm"><p><u><b>近畿地方</b></u><br>
<span>大阪都</span><br><span>兵庫県</span><br><span>京都府</span><br><span>奈良県</span>
･･･(略)･･･
</div>
<div class="dv3"style="width:370px;height:100px;border:1px solid navy;padding:5mm">
<u><font size="-1">[content:"★ " counter(カウンター名) "位..."]の場合</font></u><br>
<div style="float:left;margin-right:10mm"><p><u><b>近畿地方</b></u><br>
<span>大阪都</span><br><span>兵庫県</span><br><span>京都府</span><br><span>奈良県</span>
･･･(略)･･･
</div>
<div class="dv4"style="width:370px;height:100px;border:1px solid navy;padding:5mm">
<u><font size="-1">[counter-increment:test1 3]とした場合</font></u><br>
<div style="float:left;margin-right:10mm"><p><u><b>近畿地方</b></u><br>
<span>大阪都</span><br><span>兵庫県</span><br><span>京都府</span><br><span>奈良県</span>
･･･(略)･･･
</div>
<div class="dv5"style="width:370px;height:80px;border:1px solid navy;padding:5mm"
<u><font size="-1">文書内部に連番をつけた場合</font></u>
<p>近畿地方では<span>が大阪都だった。以下は次の通り、</span><span>兵庫県</span>
<span>京都府</span><span>奈良県</span><span>その他</span></p>
<p>中国地方では<span>鳥取県</span><span>島根県</span><span>以下は省略しました。</span></p>
</div>
</div>