目次テスト: レイアウト検証
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 一覧から本記事にアクセスし、右サイドに目次が出ることと、モバイル幅で折りたたみが表示されることを確認してください。