ページ内リンクで位置を調整したい時有りますよね。
- リンク先の上部分に余白を設けたい時。
- スティッキーヘッダー（固定ヘッダ）等を使用していて、リンクしていた位置がヘッダーと被ってしまう時。
そんな時は下記のCSSをコピペして、リンク先の前にClass指定したspanを置きましょう。数値で位置の調整が可能です。
HTML＋CSS
HTML
<span id="リンク先ID" class="link-t-a"></span>リンク先コンテンツ
CSS
/*リンクの位置調整*/
.link-t-a {
position: relative;
top: -100px;
display: block;
}サンプル
どういう原理か、体験したほうが早いと思うので、下の2種類のサンプルをクリックしてみてください。
サンプル１のリンク先（↑に余白がない）
サンプル２のリンク先（↑CSSで100px上の位置を指定）
サンプルのHTML＋CSSコード
HTML
<span id="link02" class="link-t-a"></span>;サンプル２のリンク先（↑に余白を指定）
/*リンクの位置調整*/
span.link-t-a {
position: relative;
top: -100px;/*左の数値を変えると、上下に調整します*/
display: block;
}「top: -100」の数値を変えると、上下に調整できます。マイナスの数値が高くなるほど、上に余白ができます。
コメント