目次一覧
状態:試行錯誤履歴
閲覧数:14,603
投稿日:2012-04-17
更新日:2019-10-09
問題発生 / 方法は2種類 / CSS対応時の注意点
ページ内リンクの位置を微調整できない(実際に遭遇した例)
ページ内リンクの位置を微調整できない(実際に遭遇した例)
問題発生 / 方法は2種類 / CSS対応時の注意点
問題発生
ページ内リンクで位置調整がうまくいかない
・そこではない
・id位置丁度ではなく、もう少し上を表示して欲しい
方法は2種類
方法A.CSSで調整
・飛び先の要素に、ネガティブマージンを利用
・ちょっと思いつかなかったわ
div#hoge{
margin-top: -30px; /* リンク位置上昇分 */
padding-top: 30px; /* 上昇分を戻す分 */
}
・トップ以外の指定ももちろん可能
#a01 {
padding:100px 0 0;
margin:-100px 0 0;
}
※いついかなるときでも利用できるかは、未検証
方法B.JavaScriptで調整
・ヘッダやサイドを固定し、ページ内リンクがずれるのを回避したい
CSS対応時の注意点
予め「margin」「padding」が指定されていた場合
「レイアウトが崩れる」などの影響を受ける可能性がある
例
・「AutoAnchors jQuery Plugin」で目次自動作成
・「ページ内リンク位置」調整のためネガティブマージンを適用するも、予めpadding指定している部分を上書きしてしまい、目次レイアウトが崩れてしまっている
<style>
/*既存CSS競合対策*/
div.demo h3{
margin-top: -50px; /* リンク位置上昇分 */
padding-top: 50px; /* 上昇分を戻す分 */
}
</style>
「アンカーリンクごとにネガティブマージン指定」するのが若干面倒
#a01,
#a02,
#a03,
#a04 {
padding:100px;
margin:-100px;
}
コメント入れとかないと
・初見の人は意味不明だと思われ
・意図を忘れがち。書いた後、何のためにこうしたんだっけ? ということに陥る率高し
・自分が書いたCSSですらそうなのに、ましてや他の人が書いたネガティブマージンなんて……
・特に、「ネガティブマージンはレイアウト崩れの元」だと思うので、注意が必要(個人的に、ネガティブマージンは、極力使わないようにしている)
ページ内リンクの位置を微調整できない(実際に遭遇した例)
廃止されたHTML要素の属性を使用している
<a> 要素 の name 属性
→ id属性へ変更
遷移先で、インライン要素を使用している
<a id="a1"></a>
対応案a.CSSでブロック要素へ変更する
<style>
#a1{
margin-top: -1rem; /* リンク位置上昇分 */
padding-top: 1rem; /* 上昇分を戻す分 */
display:block;
}
</style>
対応案b.HTMLをブロック要素へ変更する
<p id="a1"></p>