問題
ページ内リンクで、見出し等がグローバルナビゲーションに隠れてしまう。
解決策
「 margin-top: -"グローバルナビゲーションの高さ+10px以内"px; padding-top: "グローバルナビゲーションの高さ+10px以内"px; 」を、リンク先に設定する。
追従するグローバルナビゲーションへの対応
上部にグローバルナビゲーションを追従させている場合、ページ内リンクで移動すると、見出し等がグローバルナビゲーションに隠れてしまいます。
今回はグローバルナビゲーション分、下に下げて移動させる方法をご紹介します。
ページ内リンクのリンク先へcssを設定する。
ページ内リンクのリンク先のタグへ、以下のcssを設定します。
- ※便宜上、リンク先のタグにクラス「inlink」を設定しています。
.inlink{
/* グローバルナビゲーションの高さ ＋ 10px以内のマイナス値 */
margin-top: -70px;
/* グローバルナビゲーションの高さ ＋ 10px以内 */
padding-top: 70px;
}{ここに注意！
- 「padding-top」の設定があるため、リンク先のタグに背景色やボーダーが設定してある場合は、上に膨らんでしまいます。
なのでその設定を子要素に移す等して対応するようにしてください。 - 「margin-top」と「padding-top」の数値は、諸事情のない限りは同じ数値に設定する方が安全です。
この記事のカテゴリを含む記事一覧
コメント