固定ヘッダー 64 ピクセルで飛び先が隠れる
高さ 64 ピクセルの固定ヘッダーがあるのに、scroll-padding の指定がないため見出しがヘッダーに隠れる例です。
入力
HTML
<header style="position:fixed;height:64px">メニュー</header> <a href="#faq">質問へ</a> <h2 id="faq">よくある質問</h2>
固定ヘッダーの高さ(CSS ピクセル。任意)
64
結果
エラー 0 件・警告 1 件・情報 0 件
指摘(エラー・警告・情報)
- 警告 2 行目 #faq の飛び先は、固定ヘッダー(高さ 64px)に隠れる可能性があります。飛び先への余白(html の scroll-padding-top と要素の scroll-margin-top の合計)が 0px しかありません。html { scroll-padding-top: 64px; } のように指定してください(MDN)。
| 検査したページ内リンク | 1 件 |
|---|---|
| 届くリンク | 1 件 |
| 届かないリンク | 0 件 |
| 重複している id | 0 種類 |
リンクごとの照合結果
| 番号 | リンク先 | 判定 | 飛び先 | 位置 |
|---|---|---|---|---|
| 1 | #faq | 届く | id="faq" の要素(3 行目) / 余白 0px < ヘッダー 64px | 2 行目 |
検算(この結果になる理由)
#faq は id="faq" に届きますが、html に scroll-padding の指定がなく、要素にも scroll-margin がないため、余白は 0 でヘッダー 64 未満です。隠れる可能性の警告が 1 件、エラーは 0 件です。
判定の根拠は仕様と根拠に、仕様の出典とともにまとめています。自分の入力で試すにはツールをお使いください。
このツールの制約
- 貼り付けた HTML の中だけを照合します。別のページの id へのリンクや、外部のアドレスへの問い合わせはしません。
- JavaScript で後から作られる要素の id や、フレームワークが実行時に付ける id は読み取れません。
- 固定ヘッダーの点検は、style 要素の html・:root の指定と、飛び先の style 属性だけを読む簡易的なものです。外部の CSS ファイルは読めません。
- HTML の構文の誤りを補う複雑な解釈(ブラウザの修復)には対応しません。
ご利用にあたって
- 結果は貼り付けた HTML の文字列だけにもとづく照合です。実際のブラウザでリンクを押して、飛び先を目で確かめてください。