ページ内リンクでタイトルが切れてしまう時の解決方法
ページ内リンクでタイトルが切れてしまうのは、アンカーポイントの高さがないのが原因です。
以下のようにclassを振って、CSSでブロック要素に下うえで高さを指定し、余白で位置を指定しましょう。
html リンクアンカー
必ず「id」で名前を付け、リンクボタンの方に指定するようにしましょう。
「name」は古い方法でズレの原因となりますので避けましょう。
さらに位置調整用のclassを振ります。
<a id="link" class="jump_point"></a>
CSS
a.jump_point {height: 1px;
display: block;
padding-top: 40px;
margin-top: -40px;
}
これで40px上にずれますのでタイトルが見えるようになります。
高さは任意で調節してください。
まとめ
ページ内リンクをアンカーポイントで指定する方法はシンプルで人気があります。
ただ、スマホの普及などでスムーススクロール方式のページ内リンクも増えています。
他のjsとバッティングを起こさないhtmlとSCCだけで指定できるシンプルなページ内リンクも覚えておくと便利です。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
