問題
見出しに丸数字を自動的に付けるには？
解決策
「counter」を利用する。
ナンバリング
リストの形式でなくても、ナンバリングをする必要のある場面はありませんか？
今回は各見出しに丸数字を自動的に付けさせる方法をご紹介します。
今回は以下の記事の応用になります。
ol等のリストを丸数字で表示させて、CSSでカスタマイズさせる
DEMOはこちら
見出し01
1つ目のブロックです。
見出し02
2つ目のブロックです。
見出し03
3つ目のブロックです。
見出し04
4つ目のブロックです。
HTMLの構築
クラス「block-numwrapper」を用意します。
その中に各ブロックをクラス「section」を付けて設置し、各ブロック内の見出しにクラス「titles」を設定します。
<div class="block-numwrapper">
<section class="section">
<h4 class="titles">見出し01</h4>
<p class="text">1つ目のブロックです。</p>
</section>
<section class="section">
<h4 class="titles">見出し02</h4>
<p class="text">2つ目のブロックです。</p>
</section>
<section class="section">
<h4 class="titles">見出し03</h4>
<p class="text">3つ目のブロックです。</p>
</section>
<section class="section">
<h4 class="titles">見出し04</h4>
<p class="text">4つ目のブロックです。</p>
</section>
</div>cssの構築
クラス「block-numwrapper」内のクラス「section」が来るたびに「counter」の数値をカウントさせます。
そしてクラス「section」内のクラス「titles」に対して、疑似要素「before」に「counter」の数値を表示させます。
.block-numwrapper{
counter-reset: blocknumwrapper-counter;
}
.block-numwrapper > .section{
counter-increment: blocknumwrapper-counter;
}
.block-numwrapper > .section > .titles:before {
content: counter(blocknumwrapper-counter);
background-color: #ffffff;
display: inline-block;
vertical-align: middle;
margin-right: 7px;
color: #F15A24;
font-size: 75%;
font-weight: bold;
letter-spacing: -0.5pt;
text-indent: -0.5pt;
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid #F15A24;
}
コメント