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

CSS

目次一覧

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

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


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

 閲覧数:685 投稿日: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ですらそうなのに、ましてや他の人が書いたネガティブマージンなんて……
・特に、「ネガティブマージンはレイアウト崩れの元」だと思うので、注意が必要(個人的に、ネガティブマージンは、極力使わないようにしている)

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

 閲覧数:713 投稿日: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 ページ内リンクの位置を微調整するためには、Negative margin を使用する 81
2 縦長Webページの途中へリンクを張るためには、ページ内リンクを使用します。具体的にはhtmlソースからidを確認し、URL末尾に#idを付与します。 38
3 異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用 37
4 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 36
5 インライン要素のまま、上下marginを適用させる 36
6 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 36
7 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 35
8 ページで使用されている「id名」「class名」をChromeで取得したい   35
9 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 34
10 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 33
11 iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト 32
12 SVG線を徐々に描画していくためには、@keyframes を利用 32
13 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 32
14 お気に入りの整理は、Google Chromeエクスポート機能が便利 32
15 「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法 31
16 max-width: 100%の効果を打ち消すには、max-width: none; 31
17 コピペ出来ないWebページをコピペ出来るようにするためには? 2017年 31
18 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; 31
19 縦中央配置するには、親要素に2行追加。display: flex; align-items: center; 31
20 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 31
2024/10/06 16:32 更新
週間人気ページランキング / 9-29 → 10-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 16
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 14
4 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
4 RGBの種類 / ビットカラー | RGB(色) 7
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
5 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
6 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
6 「bgcolor」「background-color」「background」の違い | CSS 5
7 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
8 aタグで複数のブロック要素を囲むやり方 | CSS 3
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
9 Design 0 2
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
9 16進数カラーコード / 2進数 2
2024/10/6 1:01 更新