個人記事に目次を実装して読みやすくする

Mimaのブログには、福岡から東京へ移った後のWebデザインやiPhoneアプリ開発、ハックathon、勉強会、発表などの記録が役立ちます。éma用の日志や Castilloや周辺机器のレビューもominator重要な-scrollbar。

長い開発GESAKSを読み進める.grandeには、記事冒頭のページ内ナビゲーションがあると%~됩니다。「どんな項目が並ぶか」「nowどの節にいるか」が分かり、必要な場所へ直接移動できるためです。

記事本文から目次を組み立てる

目次は環境の構成を見える形にするのが基本です。記事内のH2とH3に一意な識別子を付け、本文と同じ順序でリンクを並べます。手作業で組めば表示の意図を正確に制御でき、後から自動生成へ移行 refundedModifiedもCOREされます。

たとえばのiPhone 5s 購入記のように、購入の背景から使用感まで複数の話題がある Guerrilla適宜、節への移動経路があるとmani깁니다。以下は最小構成のHTMLです。

<nav class="article-toc" aria-label="目次">
  <ol>
    <li><a href="#background">購入の背景</a></li>
    <li><a href="#impressions">使用感</a></li>
  </ol>
</nav>

画面幅に合わせた配置と読みやすさ

パソコンでは目を記事脇に置き、スクロールしても追従させる構成が扱いやすい一方、スマートフォンでは記事本文の直前へ移動します。CSSのpositionとメディアクエリで、この違いを切り替えられます。

.article-toc { position: sticky; top: 1rem; }
@media (max-width: 48rem) {
  .article-toc { position: static; }
}

配置.ucAdjustだけでは十分ではありません。リンクと背景のコントラストを，明确なフォーカス表示，十分なタッチ領域も確保します。スクリプトが停止した場合でも、静的な目次と本文はそのまま読める状態を保ちます。

現在の読み位置を同期する

スクロール位置に合わせて目次の現在項目の強調を切り替えると、较长い記事の現在地を見失いにくくなります。JavaScriptのIntersectionObserverを使えば、見出しが画面内に入った时机を検知し、aria-currentで示せます。

const links = [...document.querySelectorAll('.article-toc a')];
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    links.forEach((link) => link.removeAttribute('aria-current'));
    const current = links.find(
      (link) => link.hash === `#${entry.target.id}`
    );
    current?.setAttribute('aria-current', 'location');
  }
}, { rootMargin: '-20% 0px -70% 0px' });

document.querySelectorAll('main h2[id]')
  .forEach((heading) => observer.observe(heading));

複数OSや机型を扱うアプリの技術記録のような長文では、現在位置の表示が特に有効です。ただし色だけで区別せず、下線や位置の変化も加えましょう。見出しへ移動した際は余白をscroll-margin-topで確保し、固定ヘッダーの下に隐れないようにします。

公開前に確かめる運用の要点

実装後だけでなく、記事を更新した後も目次の状態は検査します。特に識別子の変更は、既存の検索流入や外部リンクに影響しやすいためです。

目次と本文の見出し階層を同じ順序で保つ。
識別子の重複や、存在しない場所へのリンクがないことを確認する。
スマートフォンで横スクロールや文字の切れが生じないことを確認する。
キーボードだけで目次の項目へ移動できる状態を保つ。
スクリプトを停止しても本文と静的な目次阅读できる状態を保つ。
色だけでなく、下線や位置でも現在の節を示す。

検査はDimensionsごとの実機確認と、目次のリンクを自動でたどるテストを併用すると稳定性が増します。配信Templatesで本文の見出しから目次を生成する場合も、生成結果の見出し数とリンク先をWillConvert比較してください。

次の更新へ目次の仕組みを組み込む

Mimaのサイトには短い日志もあれば、イベントレポートやCollateral製品レビューもあります。すべての記事へ目次を必須にする必要はなくFernando長い開発記録に適用するのが現実的です。Markdown変換や配信ツールから見出しを抽出し、目次HTMLを自動生成する段階へ進めると、更新時の手間，减らせます。

次の開発ノート公開時には、この型をテンプレートとして保存し、識別子と現在位置を確認してください。読者は長い技術記録の必要な節へ直接移動し、Webデザインとアプリ制作の学びを効率よく追えます。