HTML CSSを使用した完璧な目次

この記事では、HTMLとCSSのみを使用して、堅牢でアクセス可能な目次（TOC）の構築を詳述しています。目標は、Webページ（ナビゲーションリンク付き）と印刷メディア（書籍、パンフレット）の両方に適したTOCを作成し、マルチレベルの見出しを優雅に処理することでした。

目次の構築

TOCの基本構造は単純です。各エントリは、セクションタイトルをページ番号にリンクします。多くの場合、視覚的な「リーダー」（ドット、ダッシュなど）を接続します。ワードプロセッサで容易に生成されますが、HTMLベースのワークフローを考えると、これは実行可能ではありませんでした。このソリューションには、自動化されたHTML互換性のあるアプローチが必要であり、アクセシビリティと印刷物の準備が確保されました。

最初の研究により、有用ではあるが不完全なソリューションが明らかになりました。ジュリー・ブランの「HTMLから目次を構築する」とChristoph Graboの「CSSを使用したレスポンシブTOCリーダーライン」は、レイアウト技術（FLOATベースのCSSグリッドとCSSグリッド）に関する貴重な洞察を提供しましたが、どちらも要件に完全に対処しませんでした。

最適なマークアップ選択

セマンティックの正しさは、マークアップの選択肢を導きました。当初、<table>そして<code><dl></dl>タイトルページ番号の関係をキー価値のペアとして表すことを考慮されました。ただし、これらはマルチレベルのTOC（章とサブセクション）では不十分であることが判明しました。ネスト<dl></dl>要素にはセマンティックな明確さがありませんでした。

選ばれたアプローチは順序付けられたリストを活用しました（<ol></ol> ） - 順序付けられていないリストよりも適切です（<ul></ul> ）TOCの連続的な性質のため。タイトルページ番号の関係は、各リスト項目内のページ番号の前に「ページ」を明示的に含めることにより維持されました。この単純な追加は、視覚的な手がかりがなくても、コンテキストを明確にします。

基本的なHTMLスケルトンはこれを示しています：

<ol role="list">
  <li>
    <a href="https://www.php.cn/link/8f646834ef1adefaef52d74d5ea8329d">
      章またはサブセクションのタイトルページ1
    </a>
    <ol role="list"></ol>
  </li>
</ol>

目次のスタイリング

スタイリングにはいくつかのステップが含まれていました：

1. 自動生成された数字の削除：手動番号の削除により、本によく見かけのない要素（序文など）が可能になります。

2. リストスタイリング：トップレベルのリストでは、段落とのアライメントのためにpadding: 0使用します。ネストされたリストは、 padding-inline-start: 2ch （フォント独立性のための文字幅ベースのパディング）を使用してインデントされます。重要なことに、 list-style-type: noneは使用されていない場合、WebKitブラウザのリストセマンティクスを保持するために、 role="list"が追加されました。

3. タイトルとページ番号のスタイリング： CSSグリッドは、特にマルチラインのタイトルに対して優れたアラインメントを提供しました。グリッドの2つの列（ grid-template-columns: auto max-content ）は、タイトルが利用可能なスペースを埋めるために拡張され、ページ番号（ text-align: right ）が右に整列します。 「ページ」テキストは、アクセシビリティのために視覚的にvisually-hiddenクラスを使用して視覚的に隠されています。

4. リーダーの実装： leader() CSS関数は、指定されている間、ブラウザのサポートを欠いています。以前の記事から借りたソリューションは、長いドットの文字列で擬似要素の::afterを利用します。ただし、これは、画面読者がドットを発表するのを防ぐためにaria-hidden="true"を使用して要素にドットを包むことにより、アクセシビリティのために改善されました。

5. 仕上げの仕上げ：トップレベルのアイテムは太字（ font-weight: bold ）であり、マージン（ margin-block-start: 1em ）はサブセクションから章を分離します。 font-variant-numeric: tabular-nums and min-width: 2ch適切なリーダーアライメントのために、異なる数字にわたって一貫したページ番号幅を確保します。

結果として生じるCSSは、効率的で柔軟で、アクセスしやすく、変更されていないネストされたサブセクションに対応します。ソリューションは、Webナビゲーションと印刷出力に等しく効果的です。彼らの貢献と洞察について、ジュリー・ブラン、クリストフ・グラボ、サラ・ソウエダンにクレジットが与えられます。

以上がHTML CSSを使用した完璧な目次の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。