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

CSS

目次一覧

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

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


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

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

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

 閲覧数:587 投稿日: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 縦長Webページの途中へリンクを張るためには、ページ内リンクを使用します。具体的にはhtmlソースからidを確認し、URL末尾に#idを付与します。 38
2 異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用 37
3 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 36
4 インライン要素のまま、上下marginを適用させる 36
5 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 36
6 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 35
7 ページで使用されている「id名」「class名」をChromeで取得したい   35
8 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 34
9 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 33
10 iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト 32
11 SVG線を徐々に描画していくためには、@keyframes を利用 32
12 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 32
13 お気に入りの整理は、Google Chromeエクスポート機能が便利 32
14 「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法 31
15 max-width: 100%の効果を打ち消すには、max-width: none; 31
16 コピペ出来ないWebページをコピペ出来るようにするためには? 2017年 31
17 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; 31
18 縦中央配置するには、親要素に2行追加。display: flex; align-items: center; 31
19 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 31
20 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 30
2023/2/05 0:45 更新
週間人気ページランキング / 1-28 → 2-3
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 37
3 「bgcolor」「background-color」「background」の違い | CSS 36
4 RGBの種類 / ビットカラー | RGB(色) 30
5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 18
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 18
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 17
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 16
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 16
9 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 15
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 15
10 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 14
11 Design 0 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
12 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 12
12 HSLとHSVの違い | 色変換(色) 12
13 ICCプロファイル | カラーマネージメント(色) 11
2023/2/4 1:01 更新