ページ内リンクの上下を調整する
ページ内リンクを張ったときどうしても、上下位置がずれてしまったり、あるいは、上部に固定ヘッダーを配置したときなど、リンクした行がその下に隠れてしまって見えないなどのトラブルが発生します。どうしたらうまくいくのか検索してみると、CSSで簡単にクリアできる方法がありました。
CSSファイル
/*———- ページ内リンクの位置調整 ———- */
.link-t-a {
position: relative;
top: -100px;
display: block;
}
HTMLファイル
<span id=”リンク名” class=”link-t-a”></span><B>ここにリンクしたい</B>
////////////////////////////////////////////////////////////////////
ちなみに、固定ヘッダーは次のようにすれば簡単に配置できるようです。
CSSファイル
/*———- header固定 ———- */
.site-header{
background: #ffc;
display: flex;
padding: 25px 0px;
position: fixed;
top: 0px;
width: 100%;
}
HTMLファイル
<header class=”site-header”>
ヘッダーの 内容を書く
</header>
最近のコメント