［CSS組版］章の途中からスタイルをガラッと変える～自動生成sectionの活用

CSS組版の小技を紹介します！

資格関連の書籍では章の最後に「過去問と解答」が付いていることがよくあります。また、本によっては途中に「例題と解答」が挟まることがあります。これらは通常の解説ページとは、本文、見出し、箇条書きなどのスタイルを大幅に変わります。今回は、部分的な特殊パターンの原稿を、Markdownで楽に書く方法を考えてみます。

自動生成sectionを利用する

特殊ページのMarkdownも、なるべく自然な形で書きたいものです。今回のサンプルでは、特殊ページのh2見出しに{.kakomon}を付けます。それ以外は普通のMarkdownです。

sample1.md

## 過去問にチャレンジ！{.kakomon}
### 確認問題1
サブネットマスクの役割として，適切なものはどれか。

- ア：IPアドレスから，利用しているLAN上のMACアドレスを導き出す。
- イ：IPアドレスの先頭から何ビットをネットワークアドレスに使用するかを定義する。
- ウ：コンピュータをLANに接続するだけで，TCP/IPの設定情報を自動的に取得する。
- エ：通信相手のドメイン名とIPアドレスを対応付ける。

（出典：令和5年春期 問97）

### 解答・解説1
#### 正解：イ
#### 解説
サブネットマスクはIPアドレスのネットワーク部を指定するものです。よって答えはイです。

- ア：ARPの役割です。
- イ：正解です。
- ウ：DHCPの役割です。
- エ：DNSの役割です。

## 通常のセクション

こうすると、VFMは次のようにsection要素を自動生成します。h2に続く要素すべて（正確には次にh1かh2要素が出現するまでの範囲）がsection要素に囲まれていますね。

      <section class="level2" aria-labelledby="過去問にチャレンジ">
        <h2 class="kakomon" id="h2_1">過去問にチャレンジ！</h2>
        <section class="level3" aria-labelledby="確認問題1">
          <h3 id="h3_2">確認問題1</h3>
          <p>サブネットマスクの役割として，適切なものはどれか。</p>
          <ul>
            <li>ア：IPアドレスから，利用しているLAN上のMACアドレスを導き出す。</li>
            <li>イ：IPアドレスの先頭から何ビットをネットワークアドレスに使用するかを定義する。</li>
            <li>ウ：コンピュータをLANに接続するだけで，TCP/IPの設定情報を自動的に取得する。</li>
            <li>エ：通信相手のドメイン名とIPアドレスを対応付ける。</li>
          </ul>
          <p>（出典：令和5年春期 問97）</p>
        </section>
        <section class="level3" aria-labelledby="解答解説1">
          <h3 id="h3_3">解答・解説1</h3>
          <section class="level4" aria-labelledby="正解イ">
            <h4 id="h4_0">正解：イ</h4>
          </section>
          ……後略……

このsection要素は、section:has(> .kakomon)というセレクタで選択できます。あとは、section要素内の子要素に対してスタイルを指定していけばいいのです。

過去問見出しをスタイリング

CSSを追加する前の段階では、他のページと同じスタイルが適用されます。

まず「過去問にチャレンジ！」というh2見出しの体裁を変えてみましょう。すでにh2見出しにスタイルが設定されているので、それを打ち消すスタイルも書く必要があります。

kakomon-section.css

h2.kakomon {
  font-size: 20Q;
  border: solid 0.25mm #000;
  border-radius: 4mm;
  margin-inline: 0;
  inline-size: 100%;
  text-align: center;
  block-size: 12mm;
  background: #fff;
}
h2.kakomon::before {
  content: none;
}

特殊ページ内のスタイルを設定していく

特殊ページ内の段落、リスト、h3、h4見出しのスタイルを調整していきます。全体的に文字サイズを小さくし、飾りもシンプルにします。

kakomon-section.css

section:has(> .kakomon) :is(p, li) {
  font-size: 11Q;
  line-height: 18Q;
  text-indent: 0;
}
section:has(> .kakomon) h3 {
  font-size: 13Q;
  background: none;
  padding: 0;
  block-size: auto;
  color: #009ddb;
}
section:has(> .kakomon) h3::before {
  content: "■";
}
section:has(> .kakomon) h4 {
  margin-block: 0;
}
section:has(> .kakomon) h4::before {
  content: none;
}
/* 過去問内のリスト */
section:has(> .kakomon) ul {
  list-style: none;
}
section:has(> .kakomon) li {
  text-indent: -2em;
}

Named Pageで背景色も変える

もう少し特殊ページであることを目立たせたいので、背景色を変えてみましょう。Named Pageを使うと、部分的に@pageルールを指定することができます。

@page ページの名前;で定義し、そのページ設定を使用する要素にpage: ページの名前;と書きます。難しくはありませんが、ちょっと不思議な感じがします。

kakomon-section.css

@page kakomon-page {
  background: #ddd;
}
section:has(> .kakomon) {
  page: kakomon-page;
}

これでできあがりです。

仮組みとしては十分ですが、入稿レベルのデータに作り込む場合は、通常ページ用スタイルの打ち消しがちょっと手間になるかもしれません。

今回の記事のサンプルファイル

https://github.com/libroworks/CSSkumihan_freeformats/tree/main/blogs/section-element