HTMLの見出しタグに連番を振るCSSの書き方 : 灰色スズメの足跡

このブログで行っているHTMLの見出しタグ<h4>、<h5>、<h6>に連番を振るCSSの書き方をご紹介します。

このブログの見出しタグ周りのCSS

このブログのHTMLは、下記のように<h4>、<h5>、<h6>タグにクラス名を付与しています。

<h4 class="foacs-chapter">
<h5 class="foacs-section">
<h6 class="foacs-paragraph">

このブログの見出しタグ周りのCSSは下記のとおりです。

/*
見出し設定
class="foacs-chapter"
class="foacs-section"
class="foacs-paragraph"
*/
.foacs-chapter
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: x-large;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-chapter-counter;
    counter-reset: --foacs-section-counter;
}

.foacs-chapter::before
{
    content: counter(--foacs-chapter-counter) ".";
    padding-right: 0.5em;
}

.foacs-section
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: large;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-section-counter;
    counter-reset: --foacs-paragraph-counter;
}

.foacs-section::before
{
    content: counter(--foacs-chapter-counter) "." counter(--foacs-section-counter) ".";
    padding-right: 0.5em;
}

.foacs-paragraph
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: medium;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-paragraph-counter;
}

.foacs-paragraph::before
{
    content: counter(--foacs-chapter-counter) "." counter(--foacs-section-counter) "." counter(--foacs-paragraph-counter) ".";
    padding-right: 0.5em;
}

このブログのCSSの説明

見出しタグに連番を振るための手順は下記のとおりです。

HTMLの見出しタグ<h4>、<h5>、<h6>にCSSで連番を振るためのクラス名を付与する
CSSの変数を作り、現在の見出しのCSS変数の値を１増やして、下位の見出しのCSS変数を０にする
CSSの変数から値を取り出して、HTMLの見出しの前に表示する

これらの手順について説明します。

HTMLのクラス名

このブログではHTMLの見出しタグ<h4>、<h5>、<h6>に下記のようにクラス名を付与しています。

<h4 class="foacs-chapter">
<h5 class="foacs-section">
<h6 class="foacs-paragraph">

「foacs」はこのブログの英語名の単語の頭文字をつなげたもので、Bloggerで元から使用されている他のクラス名と重複しないように使用している接頭辞です。

クラス名 foacs-chapter、foacs-section、foacs-paragraphを付与したHTMLの見出しタグ<h4>、<h5>、<h6>にCSSの機能で連番を振っています。

CSS変数

HTMLの見出しタグに連番を振るためにCSSの変数を使用しています。どのように変数を使って連番を振っているのか、<h4>タグの場合に絞ってご説明します。

連番の準備

<h4>タグに付与するクラスfoacs-chapterの装飾を指定している個所をご覧ください。

.foacs-chapter
{
    border-left: 0.5em solid var(--foacs-link-color);
    border-bottom: 1px solid var(--foacs-link-color);
    font-size: x-large;
    margin-top: 4em;
    margin-bottom: 1em;
    padding: 0.5em;
    counter-increment: --foacs-chapter-counter;
    counter-reset: --foacs-section-counter;
}

counter-incrementでCSS変数--foacs-chapter-counterを１増やしています。
counter-resetで--foacs-section-counterを０にしています。
CSS変数の初期値は０ですので、<h4 class="foacs-chapter">タグが最初に出現した時点で、変数--foacs-chapter-counterは１に、--foacs-section-counterは０になります。

CSS変数は宣言なし、型指定なしでいきなり使えます。変数の最初の２つのハイフン「--」は、CSSでは変数名を２つのハイフンで始めましょうというお約束になっているので、それに従っています。変数名として分かりにくいとか違和感があるというのであれば、最初の２つのハイフンはなくても問題ありません。

このブログのCSSでは下記の3種類の変数を使用して、HTMLの見出しタグに連番を振っています。

--foacs-chapter-counter
--foacs-section-counter
--foacs-paragraph-counter

連番の表示

CSS変数の値の準備ができたので、次にその値を表示します。値の表示はクラスfoacs-chapterの擬似要素beforeを指定している個所をご覧ください。

.foacs-chapter::before
{
    content: counter(--foacs-chapter-counter) ".";
    padding-right: 0.5em;
}

<h4 class="foacs-chapter">タグの前にCSS変数の値を表示するために、擬似要素beforeを使用しています。

CSS変数の値は関数counterで取り出します。関数counterで取り出した値の後ろに文字列「. 」を追加しています。 CSSでこのように指定することで下記のHTMLは「1. 見出し」と表示されます。

<h4 class="foacs-chapter">見出し</h4>

クラスfoacs-chapterで<h4>タグに連番を振ったように、クラスfoacs-sectionで<h5>タグ、クラスfoacs-paragraphで<h6>タグに連番を振っています。

ちなみに、クラス名と疑似要素の間のコロン「:」が２つになっているのは、CSS3の規則に従っているからです。 CSS3では疑似クラスと区別するために疑似要素につけるコロンが２つになっています。

CSS変数の注意点

CSS変数を使用する際に注意したい点を説明します。

擬似要素before内ではcounter-incrementとcounter-resetは動作しない

擬似要素beforeを指定したセレクタ内では、counter-incrementとcounter-resetは動作しません。下記の記述は動作しませんので注意してください。

/*
動作しない。
*/
.foacs-chapter::before
{
    counter-increment: --foacs-chapter-counter;
    counter-reset: --foacs-section-counter;
    content: counter(--foacs-chapter-counter) ". ";
    padding-right: 0.5em;
}

１つのセレクタ内で複数のcounter-incrementとcounter-resetは動作しない

１つのセレクタ内に複数のcounter-incrementを書いても最後のcounter-incrementしか動作しません。 counter-resetも同様です。

このブログでは下記のようなCSSは使っていませんが、ご参考までにご留意ください。下記の記述では、counter-increment: --foacs-counter03のみが動作します。

/*
counter-increment: --foacs-counter01とcounter-increment: --foacs-counter02は動作しない。
counter-increment: --foacs-counter03のみが動作する。
*/
.foacs-li
{
    counter-increment: --foacs-counter01;
    counter-increment: --foacs-counter02;
    counter-increment: --foacs-counter03;
}

上記のように１つのセレクタ内で複数の変数を動作させたい場合は下記のように記述します。

/*
動作する。
変数は空白で区切る。
*/
.foacs-li
{
    counter-increment: --foacs-counter01 --foacs-counter02 --foacs-counter03;
}

変数は空白で区切ります。カンマ「,」では区切らないので注意してください。

BloggerへのCSSの追加

自分で作成したCSSをBloggerの自分のブログに適用するためには以下のようにします。

［テーマ］の編集画面を表示
［カスタマイズ］ボタンを押下
Blogger テーマデザイナーを表示
［上級者向け］ー［CSSを追加］ー［カスタム CSS を追加］のテキストボックスにCSSをコピー＆ペースト
［ブログに適用］ボタンを押下

記事終わり

灰色スズメの足跡

2017年10月28日土曜日