問題 × 解決策

見出しに丸数字を自動的に付ける

問題

見出しに丸数字を自動的に付けるには?

解決策

「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;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight − seven =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧