目次テスト: レイアウト検証

2025/9/10

目次

この記事は、目次(TOC)の表示と2カラムレイアウトを確認するためのテスト用です。

セクション1: 背景

TOCの表示位置は、デスクトップでは右サイドの固定、モバイルでは本文直下の折りたたみになります。

小見出し1-1

細かい説明をここに記述します。スクロール時のオフセット確認のために文章を少し伸ばします。スクロール時に見出しがヘッダーに隠れないよう、scroll-margin-top を設定しています。

セクション2: 実装の要点

  • 目次の抽出対象は h2 / h3。
  • 目次がないページは1カラムで中央寄せ。
  • 目次があるページは md 以上で 2 カラム(本文 + 260px)。

小見出し2-1

コードブロック例:

const items = headings.filter(h => h.depth <= 3);

セクション3: 動作確認

Posts 一覧から本記事にアクセスし、右サイドに目次が出ることと、モバイル幅で折りたたみが表示されることを確認してください。

Tags