見出し階層をヘッダー直下のパンくずバーで表示 - #187
Open
riiimparm wants to merge 13 commits into
Open
Conversation
rehype-tocが生成する.tocを2カラムグリッドで本文脇に固定し、 IntersectionObserverで現在読んでいるセクションのリンクをハイライトする。 新規ライブラリは追加せずネイティブAPIのみで実装。
前回のtoc sidebar化(gridレイアウト+toc sticky+scrollspyハイライト)は 方針転換のため差し戻し、.tocは無変更に戻した。 代わりにVSCodeのSticky Scrollのような挙動を実装: 記事中のh2/h3/h4をクライアントサイドJSでネストしたラッパー (.stack-section > .stack-heading + .stack-content)に組み替え、 各見出しをposition:stickyで階層順にヘッダー下へ積み重ねる。 ネストしたsticky要素は所属セクションを抜けると自然に外れる (CSSのposition:stickyの挙動のみで実現、追加のJS制御は不要)。 見出しがスタック位置に固定される直前の約4rem分のスクロール量に 連動して、CSSカスタムプロパティ(--stack-progress)経由でfont-sizeを 本来のサイズからスタック時サイズへ連続的に縮小させる。
VSCode風の見出しネストスティッキースタック(DOM再構成+stack-progressに よるフォントシュリンク)は撤回し、目次通過後にヘッダー直下へ現在の h2 > h3 > h4パスを表示する薄いパンくずバーに置き換えた。DOMは元の フラットな見出し構造のまま、スクロール位置から現在アクティブな見出しを 算出して表示するだけのシンプルな実装。
- 長い見出しで現在地(白文字)側が消えないよう、親階層側を別要素に分離しflex-shrink:0の現在地を優先して残す形に変更 - バー内側をヘッダーと同じcontainerクラスでラップし左端をロゴと揃える - document.fonts.readyとResizeObserverでフォント読み込み後・レイアウト変動後も見出し位置キャッシュを更新 - デモ記事の説明文を旧ネストスタック方式からパンくずバー方式の説明に更新し、省略確認用の長い見出しを追加
Open
BlogLayout.astroにインライン実装されていたdiv/script/styleを src/components/HeadingBreadcrumbBar.astroへ移動。機能・見た目の変更なし。
| --- | ||
|
|
||
| <div id="heading-crumb" class="heading-crumb" hidden> | ||
| <div class="heading-crumb__inner container"> |
Collaborator
Author
There was a problem hiding this comment.
ヘッダのロゴと左パディング合わせるためにつかっているよ
https://github.com/rowicy/web/pull/187/changes/BASE..07b3d18ed2193f3eb29b0001c42a4b7e27c36243#diff-f0c73cf94d48f7809de7c98c6359afa6db7728eddfcb8e98abee71c0a3bbb53aR155-R164
hiddenは最初のh2要素のスクロールが通過するまでパンくずバーを隠しておくため
|
|
||
| --- | ||
|
|
||
| <div id="heading-crumb" class="heading-crumb" hidden> |
Member
There was a problem hiding this comment.
@riiimparm
スマホサイズなど、画面幅狭いと見切れるので、横スクロールできるようにしても良いかも！
ファイル名(HeadingBreadcrumbBar.astro)とDOM上のid/classが heading-crumbのままずれていたため、子要素のクラス名 (__inner, __ancestors, __item, __item--current, __sep)も含めて heading-crumb-barに揃えた。機能・見た目の変更なし。
sepのテキストを' > 'としていたため、currentItemフレックスアイテムの 先頭子要素になるケース(祖先→現在地の境目)で、CSSの空白つぶしにより 先頭のスペースだけ描画上消え「実装> Claude Codeをインストール」の ように左側の余白が無くなっていた。祖先同士をつなぐsep(同一span内の 途中に位置する)ではこの問題は起きないため、階層や文言によって 余白の有無が不揃いに見えていた。 space文字をやめて'>'のみとし、margin: 0 0.3emで余白を作ることで、 flexアイテム境界の位置によらず常に安定した余白になるようにした。
見出しが長い場合に横スクロールを可能にした前回の実装は、 ヘッダーと同じcontainerクラスのpaddingをスクロール対象の要素に 直接持たせていたため、スクロール終端でそのpaddingが失われ、 長い見出しが左右マージンを無視して画面端まではみ出してしまう 問題があった。 .heading-crumb-bar__inner(containerのpadding、常に固定・非スクロール) の内側に新設した.heading-crumb-bar__track(overflow-x:auto)を置き、 実際にスクロールする要素をtrackだけに限定。マージン領域は常に バー背景色のみで、どれだけ長い見出しが来てもテキストがマージンに はみ出さないようにした。 あわせて、自動スクロールの挙動を「現在地見出しの末尾」ではなく 「先頭」が見える位置に変更(currentItemの左端をtrackの左端に揃える)。
.heading-crumb-bar__innerのpadding-top(0.4rem)を削除し、 ヘッダー直下に隙間なく積み重なるようにした。padding-bottomは テキストとしての読みやすさのため維持。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
変更内容
記事の見出し階層をヘッダー直下のパンくずバーで表示。
テスト用md