ページ内リンクの位置を微調整するためには、Negative margin を使用する

CSS

目次一覧

 状態:試行錯誤履歴  閲覧数:12,736  投稿日:2012-04-17  更新日:2019-10-09
問題発生 / 方法は2種類 / CSS対応時の注意点

ページ内リンクの位置を微調整できない(実際に遭遇した例)


問題発生 / 方法は2種類 / CSS対応時の注意点

 閲覧数:319 投稿日:2013-01-30 更新日:2019-10-09 

問題発生


ページ内リンクで位置調整がうまくいかない
・そこではない
・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ですらそうなのに、ましてや他の人が書いたネガティブマージンなんて……
・特に、「ネガティブマージンはレイアウト崩れの元」だと思うので、注意が必要(個人的に、ネガティブマージンは、極力使わないようにしている)

ページ内リンクの位置を微調整できない(実際に遭遇した例)

 閲覧数:420 投稿日:2013-11-25 更新日:2019-10-09 

廃止された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>



Modernizr

CSSのみで交互色 … リスト


×

ゲストコメント一覧

番号 内容 投稿日
1 あs 2013-10-16
コメント件数 … 1件

類似度ページランキング
順位 ページタイトル抜粋
1 異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用 37
2 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 36
3 インライン要素のまま、上下marginを適用させる 36
4 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 36
5 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 35
6 ページで使用されている「id名」「class名」をChromeで取得したい   35
7 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 34
8 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 33
9 iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト 32
10 SVG線を徐々に描画していくためには、@keyframes を利用 32
11 お気に入りの整理は、Google Chromeエクスポート機能が便利 32
12 「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法 31
13 max-width: 100%の効果を打ち消すには、max-width: none; 31
14 コピペ出来ないWebページをコピペ出来るようにするためには? 2017年 31
15 縦中央配置するには、親要素に2行追加。display: flex; align-items: center; 31
16 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 31
17 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; 31
18 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 30
19 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 30
20 perspectiveのベンダープレフィックスを自動付与したい 30
2021/8/06 3:00 更新
週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新