大きな文字と見出しは同じ？記事の目次ができるまで

記事の目次を作る関数を読むと、大見出しだけを拾っていました。文字が大きければ、同じ見出しとして目次に載るのでしょうか。実部品へ架空の本文を渡すと、大見出しはh2、小見出しはh3となり、目次には空でない大見出しだけが入りました。

見た目の大きさと、文章の役割を分ける

CSSで文字を大きくすることと、HTMLの見出し要素にすることは別です。見出しは文章の区切りと階層を表し、文字サイズは見た目の指定です。 Appli Parkの記事タイトルはページ側のh1です。本文の「大見出し」はHEADING_1というブロックですが、描画時はh2になります。「小見出し」のHEADING_2はh3です。ブロック名の数字をHTMLの数字へそのまま読み替えません。

架空の六ブロックを、実関数と描画部品へ渡す

作例は、導入、章A、補足、空白だけの大見出し、章B、章Cの順です。実目次関数と実ArticleRendererをNodeで実行し、生成したHTMLを比較しました。 検証に使わない画像などの部品は代役にし、CSSは読み込まず、見出しと目次の構造を確認しています。実記事の見た目全体を再現する試験ではありません。

空でない大見出しが、三つ以上あると目次を表示する

実目次関数はHEADING_1で、前後の空白を除いた内容があるものだけを返します。空白だけの見出しとHEADING_2は数に含みません。 この作例では章A・章B・章Cの三項目があり、目次のHTMLが出ました。末尾の章Cを取り除くと二項目になり、目次のHTMLは出ませんでした。すべての見出しを消したわけではなく、目次を表示する条件が変わっています。

見出しのIDは、見出しの通し番号ではない

章AのIDがarticle-section-2なのは、本文の二番目のブロックだからです。目次の一番目だから1、という付け方ではありません。 先頭へ段落を一つ追加して実関数を呼ぶと、章Aは3、章Bは6、章Cは7へ変わりました。見出しの文言が同じでも、前のブロック数が変わるとIDがずれます。

目次の移動先と、長く使うリンクを区別する

生成時の目次と見出しは同じ位置を基にするため、その本文内では対応します。しかし、一度共有した見出しへのURLが、本文編集後も同じ章を指すとは限りません。固定の識別子とは別の設計です。 記事を構成するときは、大きく見せたいから大見出しにするのではなく、章と補足の役割で選びます。目次の項目と、本文を読んだときの区切りが合っているかを確認すると、見た目と構造をつなげられます。

根拠：実ArticleRenderer・getArticleTableOfContentsの架空入力とHTML描画結果。既存記事本文や公開ページの実装は変更していません。

確認日：2026年9月22日。実装・検証結果・公式資料は確認時点のものです。