CSS|ページ内リンクの上下位置を調整する方法

Tips

ページ内リンクで位置を調整したい時有りますよね。

  • リンク先の上部分に余白を設けたい時。
  • スティッキーヘッダー(固定ヘッダ)等を使用していて、リンクしていた位置がヘッダーと被ってしまう時。

そんな時は下記のCSSをコピペして、リンク先の前にClass指定したspanを置きましょう。数値で位置の調整が可能です。

sponcered link

HTML+CSS

HTML

<span id="リンク先ID" class="link-t-a"></span>リンク先コンテンツ


CSS

/*リンクの位置調整*/
.link-t-a {
position: relative;
top: -100px;
display: block;
}

サンプル

どういう原理か、体験したほうが早いと思うので、下の2種類のサンプルをクリックしてみてください。

サンプル1のリンク先(↑に余白がない)

サンプル2のリンク先(↑CSSで100px上の位置を指定)

サンプルのHTML+CSSコード

HTML

<span id="link02" class="link-t-a"></span>;サンプル2のリンク先(↑に余白を指定)
/*リンクの位置調整*/
span.link-t-a {
position: relative;
top: -100px;/*左の数値を変えると、上下に調整します*/
display: block;
}

「top: -100」の数値を変えると、上下に調整できます。マイナスの数値が高くなるほど、上に余白ができます。

参考ページ
ヘッダが固定されているページで、ページ内リンクの位置を調整する[Qiita] kony氏

コメント