前半に続いて、論文でよく見られるレイアウトをCSSで実現する方法を解説します。
数式
TeX形式の数式が使えます。インラインの数式は$
〜$
で、別行立て数式は$$
〜$$
で囲みます。このほか、MathML形式の数式<math>
〜</math>
)
---
lang: 'ja'
---
インラインの数式: $E=mc^2$。
インラインの数式: $\frac{分子}{分母}$。
別行立て数式(別行数式、ディスプレイ数式): $$\frac{分子}{分母}$$
ちなみに、HTMLではインラインの数式は$
〜$
の代わりに\(
と \)
で囲みます。これは数式表示に利用されているMathJaxのデフォルトの設定によるものです。
<p>インラインの数式: <span data-math-typeset="true">\(E=mc^2\)</span>。</p>
<p>インラインの数式: <span data-math-typeset="true">\(\frac{分子}{分母}\)</span>。</p>
<p>別行立て数式(別行数式、ディスプレイ数式): <span data-math-typeset="true">$$\frac{分子}{分母}$$</span>。</p>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample12.png)
数式番号
別行立て数式
:root {
counter-reset: equation 0;
}
.equation {
counter-increment: equation;
display: grid;
grid-template-columns: auto 3rem;
break-inside: avoid;
align-content: center;
align-items: center;
}
.equation > [data-math-typeset] {
justify-self: center; /* 中央揃え */
}
.equation::after {
content: "(" counter(equation) ")";
justify-self: end; /* 末尾(右)揃え */
}
a.eqref::before {
content: "(" target-counter(attr(href url), equation) ")";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample13.css'
---
…を数式[](#eq01){.eqref}に示す。
<div class="equation" id="eq01"><span data-math-typeset="true">$${\displaystyle G_{\mu \nu }+\Lambda g_{\mu \nu }=\kappa T_{\mu \nu }}$$</span></div>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample13.png)
この例では、equation
クラスのdiv
要素で数式を囲んで、このdiv
の後ろ.equation::
擬似要素)div
はグリッドレイアウトgrid-template-columns: auto 3rem;
とすることで、左から2番目の数式番号を3em
という固定幅にしています。また、数式を中央
参考文献
参考文献を論文の最後の方にまとめて書いて、文献の先頭に番号を自動生成して、さらに、それらを本文から参照して、自動生成された番号を本文にも自動挿入できます。章節や図表の番号と同じです。
:root {
counter-reset: reference 0;
}
.reference {
counter-increment: reference;
}
.reference::before {
content: "[" counter(reference) "]";
}
.cite::after {
content: "[" target-counter(attr(href url), reference) "]";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample16.css'
---
## 見出し
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文[](#ref01){.cite}。
## 参考文献
<p id="ref01" class="reference">文献 文献 文献 文献 文献 文献 文献 文献 文献 文献</p>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample16.png)
後注id
を付ける必要があるので、タグp
を付けることになります。
章節、図表、参考文献、所属などの番号を参照する。
章節や図表の番号は、ブラウザでも以前から自動生成できました。最新のCSS、そしてVivliostyleでは、自動生成した番号と同じ番号を、別の場所にも生成できます。例えば、本文中の
これを実現するには次のようにします:
- 参照先の章節の見出し
( h2
要素など)や、図表 ( figure
要素など)に id
属性を付けます。 - 参照元を
a
要素として、参照先のid
をhref
属性に指定し、a
要素の疑似要素のcontent
プロパティの値でtarget-counter()
関数を使ってcounterの値を取得します。
図表番号
まずは図表番号の例です。
:root {
counter-reset: figure 0;
}
figure {
counter-increment: figure;
}
figcaption::before {
content: "図" counter(figure) " ";
}
.fig-ref::after {
content: "図" target-counter(attr(href url), figure);
}
.dummy-figure {
block-size: 10vh;
inline-size: 80%;
border: thin solid blue;
display: grid;
place-items: center;
}
.dummy-figure::before {
content: "図の中身";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample03-1.css'
---
<figure id="fig01">
<div class="dummy-figure"></div>
<figcaption>キャプション1</figcaption>
</figure>
![キャプション2](process.svg){.fig #fig02 style="height: 20vh;"}
<figure id="fig03">
<div class="dummy-figure"></div>
<figcaption>キャプション3</figcaption>
</figure>
[](#fig01){.fig-ref}は…。[](#fig02){.fig-ref}は…。[](#fig03){.fig-ref}は…
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample03-1.png)
{.fig-ref}
は生成した要素a
要素)fig-ref
クラスを設定するVFMの記法です。[](#fig01){.fig-ref}
は<a href="#fig01" class="fig-ref"></a>
というHTMLに変換されます。
Markdownprocess.
のid
はimg
要素に設定されるのですが、キャプションにも、本文中の図参照にも正しい図番号が生成されていることに注目してください。つまり、この方法はid
で指定した要素に生成された番号文字列を取得」
章節番号
続いて、章節番号の例です。
:root {
counter-reset: chapter 0 section 0 subsection 0;
}
h2 {
counter-increment: chapter;
}
h2::before {
content: counter(chapter) " ";
}
.chap-ref::after {
content: target-counter(attr(href url), chapter) "章";
}
h3 {
counter-increment: section;
}
h3::before {
content: counter(chapter) "." counter(section) " ";
}
.sec-ref::after {
content: target-counter(attr(href url), chapter) "." target-counter(attr(href url), section) "節";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample03-2.css'
---
## 見出し{#chap01}
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
## 見出し{#sec01-01}
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
## 見出し{#sec01-02}
[](#chap01){.chap-ref}の[](#sec01-01){.sec-ref}では…。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
[](#chap01){.sec-ref}という参照は失敗。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample03-2.png)
{#chap01}
は生成した要素h2
要素)id
属性を設定する記法です。ここでは<h2 id="chap01">見出し</h2>
というHTMLに変換されます。
h3
要素の前に自動的に生成する番号だけでなく、それを参照するa.
要素の後に自動生成する番号でも、chapter
とsection
という2つのカウンター
ここでも注意が必要です。この方法はh2
なのかh3
なのかh4
なのか…を確かめます。参照元の見出しのラベルが上下したら、本文中でその番号を参照しているa
要素のクラスも合わせて変えます。上の例では失敗例も含んでいて、参照先がh2
でカウンターchapter
が対応するのに<a class="subsec-ref"></a>
を挿入してしまい、本文中におかしな番号が生成されます。
これを自動的に調整してくれるエディターがあれば便利でしょう。とりあえずはlint機能があればいいですね、ページ内フラグメントへのリンクと、リンク先要素の要素名とをペアで一覧表示してくれるだけでも役に立ちそうです。
本文からの最初の参照を太字にする
本文中の最初の参照を太字にするよう求められることがあります。該当する要素に2つ以上のクラスを設定することで実現できます。
:root {
counter-reset: figure 0;
}
figure {
counter-increment: figure;
}
figcaption::before {
content: "図" counter(figure) " ";
}
.fig-ref::after {
content: "図" target-counter(attr(href url), figure);
}
.fig-ref.first-ref {
font-weight: bold;
}
.dummy-figure {
block-size: 25vh;
inline-size: 80%;
border: thin solid blue;
display: grid;
place-items: center;
}
.dummy-figure::before {
content: "図の中身";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample03-3.css'
---
<figure id="fig01">
<div class="dummy-figure"></div>
<figcaption>キャプション</figcaption>
</figure>
[](#fig01){.fig-ref .first-ref}は…。[](#fig01){.fig-ref}は…
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample03-3.png)
VFMで2つ以上のクラスを設定するときは、{.fig-ref .first-ref}
のように書きます。{.fig-ref.
や{.fig-ref, .first-ref}
ではありません。
CSSには:first-child
擬似クラスは兄弟要素の中での最初の要素を表します。.first-ref
クラスは手動で設定するか、何らかのプログラムで設定する必要があります。
クラス名やidの値、そしてLaTeXのラベル
参照を生成する[](#chap01){.chap-ref}
の[]
部分には何も書いてないので、Markdownのビューアで見るとクラスを設定する{.fig-ref}
しか表示されません。これは章・
図表、章・fig-
とするなどとして、少なくとも参照先の種類が分かるようにしておくと編集・fig:
を付けてfig:01
、表のラベルはtab:01
、数式のラベルはeq:energy
などと系統的に付ける慣習があります。
先の話になりますが、論文をVFMとHTMLとLaTeXの形式の間で相互に変換して運用することを想定すると、LaTeXのラベルをHTMLのid
属性として扱うと処理しやすいです。そこで、ラベルとid
属性の値に、LaTeXとHTMLのどちらでも使える文字を使っておくと便利です。また、そのように処理系が実現されていると嬉しいです。
著者、所属
著者と所属や現所属との対応
著者の所属target-counter()
関数などを使います。
:root {
counter-reset: affiliation 0 present-affiliation 0;
}
.affi {
counter-increment: affiliation;
}
.affi::before {
content: "*" counter(affiliation);
}
.paffi {
counter-increment: present-affiliation;
}
.paffi::before {
content: "†" counter(present-affiliation);
}
.paffi-pre::after {
content: "現在、";
}
a.affi-ref::before {
content: "*" target-counter(attr(href url), affiliation);
}
a.paffi-ref::before {
content: "†" target-counter(attr(href url), present-affiliation);
}
.affi::before, .paffi::before, .affi-ref, .paffi-ref {
font-size: 0.7rem;
position: relative;
inset-block-start: -0.5rem;
}
.affi-ref, .paffi-ref {
color: black;
text-decoration: none;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample04.css'
---
著者A[](#affix){.affi-ref}, 著者B[](#affiy){.affi-ref}, 著者C[](#affix){.affi-ref},[](#paffiz){.paffi-ref}
<div id="affix" class="affi">所属X</div>
<div id="affiy" class="affi">所属Y</div>
<div id="paffiz" class="paffi"><span class="paffi-pre"></span>所属Z</div>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample04.png)
著者の英語表記のスモールキャップ
著者の英語表記をスモールキャップCSS
のfont-variant-caps
プロパティにsmall-caps
と設定することで実現できます。
h2.author {
display: none;
}
section:has(> .author) > p {
display: inline;
}
section:has(> .author:lang(en)) > p {
font-variant-caps: small-caps;
}
section:has(> .author) > p:not(:first-of-type) {
margin-inline-start: 1rem;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample25.css'
---
## 著者{.author}
著者1
著者2
著者3
## 著者{.author lang="en"}
Example Author 1
Example Author 2
Example Author 3
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample25.png)
脚注
脚注もできます。
最初に、CSS Generated Content for Paged Media Moduleの図
ページ脚注(page footnote)
脚注をページの下に表示するには、CSSが用意している仕組みを使います。脚注本体をspan要素などで囲んで任意にクラス名を付けて、そのクラス名に対してCSSでfloat: footnote;
を指定します。
:root {
counter-reset: footnote 0;
}
.fn-text {
float: footnote;
counter-increment: footnote;
}
::footnote-marker {
content: "*" counter(footnote) " ";
}
::footnote-call {
content: "*" counter(footnote);
font-size: .7rem;
position: relative;
inset-block-start: -0.5rem;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample05.css'
---
アプリケーションはWAI-ARIA<span class="fn-text">Web Accessibility Initiative – Accessible Rich Internet Applications</span>を採用している。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample05.png)
なお、この例では書き手としては
1つの脚注本体を複数の部分から参照できます。章節や図表の番号を参照するのと同じ方法です。Microsoft Wordも同じことができます。
:root {
counter-reset: footnote 0;
column-count: 2;
column-gap: 2rem;
column-fill: auto;
}
.fn-text {
float: footnote;
counter-increment: footnote;
padding-inline-start: 2rem;
text-indent: -2rem;
}
::footnote-marker {
content: "*" counter(footnote) " ";
width: 2rem;
margin-inline-end: 1rem;
}
::footnote-call {
content: "*" counter(footnote);
font-size: .7rem;
position: relative;
inset-block-start: -0.5rem;
}
.fn-ref {
text-decoration: none;
}
.fn-ref:link, .fn-ref.visited, .fn-ref:hover {
color: currentcolor;
}
.fn-ref::after {
content: "*" target-counter(attr(href url), footnote);
font-size: .7rem;
position: relative;
inset-block-start: -0.5rem;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample06.css'
---
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
アプリケーションはWAI-ARIA<span class="fn-text" id="fn1">[Web Accessibility Initiative – Accessible Rich Internet Applications](https://www.w3.org/TR/html-aria/). Xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx.</span>を採用している。…同じ脚注を再び参照[](#fn1){.fn-ref}。
<p style="break-before: column;">この段落の前で、段を区切るように設定されています。</p>
本文<span class="fn-text" id="fn2">2つ目の脚注</span> 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample06.png)
CSSの脚注では、本文が2段組の場合は、いくつかの脚注本体がまとまってページの下に段抜きで表示されます。このまとまりはシステムが自動的に作ります。
段脚注(column footnote)
段の下に脚注を表示する仕組みは、CSSにまだありません。そこで、前に説明した
:root {
counter-reset: footnote 0;
column-count: 2;
column-gap: 2rem;
column-fill: auto;
}
.fn-text {
counter-increment: footnote;
display: block;
padding-inline-start: 2rem;
text-indent: -2rem;
}
.fn-text::before {
content: "*" counter(footnote);
display: inline;
width: 2rem;
text-align: left;
padding: 0;
margin-inline-end: 1rem;
}
.fn-area {
float: block-end;
float-reference: column;
border-block-start: thin solid currentcolor;
}
.fn-call::before {
content: "*" target-counter(attr(href url), footnote);
font-size: .7rem;
position: relative;
inset-block-start: -0.5rem;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample23.css'
---
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
アプリケーションはWAI-ARIA[](#fn-01){.fn-call}を採用している[](#fn-01){.fn-call}、[](#fn-02){.fn-call}。
<section class="fn-area">
<div class="fn-text" id="fn-01"><a href="https://www.w3.org/TR/html-aria/">Web Accessibility Initiative – Accessible Rich Internet Applications</a>. Xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx.</div>
<div class="fn-text" id="fn-02">2つ目の脚注</div>
</section>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
<p style="break-before: column;">この段落の前で、段を区切るように設定されています。</p>
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample23.png)
この方式では、fn-area
クラスのsection
要素にまとめた脚注本体が、そのまとまりの単位で段の下に表示されます。脚注本体のまとまりは自分が作ります。複数のまとまりが1つ段に表示されないようになどの調整を自分で行います。図表の配置を調整するのと同様です。
論文番号を柱(ランニングヘッド)に表示する。
発表/投稿を申し込んで受理されると発表番号/論文番号が付与されて、その番号を柱
次の例のCSSでは、ページの右上@top-right
に論文番号を生成しています。論文の番号はarticle-number
という名前の付いた文字列に設定されているので、content
プロパティの値の中でstring()
関数で参照します。論文番号をarticle-number
に設定しているのはarticle-id
クラスの要素に設定したstring-set
プロパティです。
@page {
@top-right {
content: "論文番号 " string(article-number);
}
}
.article-id {
string-set: article-number content();
display: none;
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample17.css'
---
# タイトル タイトル タイトル #
<div class="article-id">IS-24-1234</div>
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample17.png)
content: "論文番号 " string(article-number);
ではなく、content: "論文番号 IS-24-1234";
としておけば、同じ結果になりますが、そのCSSはその論文でしか使えません。string()
を使うことで、同じCSSを他の論文でも使えます。この方法では、classがarticle-id
の要素自身は表示されないようにdisplay: none;
と設定しておきます。
サイズや向きが異なるページを挿入する
図表が大きくて、サイズや向きが異なるページを途中に挿入して、そこに表示したくなることあります。Named pageという仕組みを使うとできます。次の例のCSSでは、@page a3-landscape
によってa3-landscape
という名前のページを導入して、サイズをA3縦landscape
)a3-landscape
というクラスを用意して、そのクラスの要素をa3-landscape
という名前のページに配置します。A3縦のページに置きたい図figure
にはa3-landscape
クラスを設定します。
@page {
size: A4 portrait;
@bottom-center {
content: counter(page);
}
}
@page a3-landscape {
size: A3 landscape;
@bottom-center {
content: counter(page);
}
}
.a3-landscape {
page: a3-landscape;
}
.dummy-figure {
block-size: 15cm;
inline-size: 80%;
border: thin solid blue;
display: grid;
place-items: center;
}
.dummy-figure::before {
content: "図の中身";
}
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample18.css'
---
1 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
<figure>
<div class="dummy-figure"></div>
<figcaption>1 キャプション</figcaption>
</figure>
2 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
<figure class="a3-landscape">
<div class="dummy-figure"></div>
<figcaption>2 キャプション</figcaption>
</figure>
3 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
<figure>
<div class="dummy-figure"></div>
<figcaption>3 キャプション</figcaption>
</figure>
4 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
<figure class="a3-landscape">
<div class="dummy-figure"></div>
<figcaption>4 キャプション</figcaption>
</figure>
5 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample18.png)
サイズが異なるページがはさまっていてもページ番号は通しになっていることや、ページ番号の位置や向きを確認してみてください。これは変えることができます。
また、本文と図のソース上の順番と、ページ上の順番も確認してください。
順序付き(番号付き)箇条書き、参考文献などの番号
本文中の箇条書きはそうでもありませんが、本の最後にまとめられる後注や参考文献の一覧では、注番号や文献番号が3桁になることもあります。このような番号部分
- 番号は左揃え
- 番号の桁数が大きくなると箇条項目本体の領域に食い込むが、本体はそれをよけて重ならない。
- 本体は左揃え。番号の桁数が同じなら揃ってみえる。先頭に"
("や" 「"などがあっても、文字の前の空白が視覚的に削られて、左に揃ってみえる。
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample27-compact.png)
これを実現するCSSの例は次のようなものです:
:root {
text-align: justify;
text-spacing: auto;
/*
border-inline-start: thin solid purple;
*/
column-count: 2;
column-gap: 2em;
column-fill: auto;
}
ol {
list-style-type: none;
counter-reset: custom-counter 0;
margin-block: 0;
--list-padding: 2em;
padding-inline-start: var(--list-padding);
/*
border-inline-end: thin solid purple;
*/
}
ol > li {
counter-increment: custom-counter;
display: flow-root; /* 本体が空のときに項目が潰れないように */
}
ol > li::before {
float: left;
break-after: avoid; /* 番号と本体とが別段や別ページに別れないように */
margin-inline-start: calc(-1 * var(--list-padding));
min-inline-size: var(--list-padding);
content: "(" counter(custom-counter) ")"; /* 全角の括弧 */
/*
border-inline-end: thin solid purple;
*/
}
p {
text-indent: 1em;
margin-block: 0;
}
Markdownの例は番号の桁数を大きくするために項目数が多くなっています。
---
lang: 'ja'
link:
- rel: 'stylesheet'
href: 'sample27.css'
---
ああああああ(あああ)。「ああああああああああ。ああああああああああ。」
「あああ」あああ(あああ)。「ああああああああああ。ああああああああああ。」
1. 番号の括弧は全角、本文の括弧も全角。
2. 「あああ」あああ(あああ)。ああああああああああ。あああああああああああああああああああ。
3. (あああ)あああ(あああ)。「(あああああああああああああああああああ、ああああああああああ)。」あああああああ。
4. 「あああ」あああ(あああ)。「ああああああああああ。ああああああああああ。あああああああああああああああああああ。」
5. あああああああああああああああああああ。
6. あああああああああああああああああああ。
<!-- 長いので省略 -->
1. あああああああああああああああああああ。
1. あああああああああああああああああああ。
1. あああああああああああああああああああ。
ああああああ(あああ)。「ああああああああああ。ああああああああああ。」
「あああ」あああ(あああ)。「ああああああああああ。ああああああああああ。」
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample27-1.png)
![](https://gihyo.jp/assets/images/article/2025/02/vivliostyle-05/sample27-2.png)
この例では、番号部分にfloat: left;
と設定して左側に沿うように配置し、本体が右側に回り込むようにしています。また、min-inline-size
プロパティを設定して、番号の桁数が小さいときには本体と間隔が空くようにしています。CSSでコメントアウトしてある境界線border
)text-spacing: auto;
は、括弧など約物
項目数が多いので、column-count: 2;
で本文を2段組にしてページ数を減らしています。プレビューのウィンドウを縦横に広げたり縮めたりして、揃えなどを確かめてみてください。
Markdown、HTML、LaTeX、Word…
この記事の範囲を超える話題となりますが、論文のライフサイクルを追いかけると、内容は全く同じでも、紙面上の配置やデータフォーマットが変わることがあります。
例えば、ある研究会に投稿・
また、研究会や全国大会での議論を経て雑誌に掲載となったときに、Markdownではなく、所定のスタイルに従ったLaTeXや、所定のテンプレートを使ったMicrosoft Word形式で論文を提出すように求められることがあります。そもそも、研究会であれ全国大会であれ、所定のWordテンプレートやLaTeXスタイルを使うことが推奨されていることがほとんどでしょう。
こういった文書の形式や形式変換作業には気を使います。前に述べたクラス名やid
属性の値もその1つです。また、HTMLやLaTeXといったフォーマットごとにエスケープが必要な文字が異なります。
構造にも気を使います。今回、著者を次のように書けるようにしました:
## 著者{.author}
著者1
著者2
著者3
この場合、個々の著者の特定の仕方が、この例のCSSのセレクターに現れています:
section:has(> .author) > p {
display: inline;
}
「author
クラスのh2
要素を直下に持つsection
要素の直下の段落p
の1つ1つが著者」author
クラスの段落p
の1つ1つが著者」
これらに関しては、別の機会に考えてみたいと思います。