アンカーリンクがずれるときの対処法
ヘッダーをposition:fixed;で固定している場合、アンカーリンクがヘッダーの高さ分だけずれてしまいます。
これを改善する方法は以下の2つになります。
CSSで調整する
固定されたヘッダーの高さ分のpadding-topと、ヘッダーの高さ分のネガティブマージンをmargin-topに設定し、ずれを解消できます。
margin-top:-100px;
padding-top:100px;
JavaScriptで調整する
jQueryを使用して、ページ内リンクのジャンプ先位置のずれを調整します。
アンカーリンクのデザイン
アンカーリンクのデザインには、大きく2つのパターンがあります。
・テキスト文字デザイン
・ボタンデザイン
テキスト文字デザイン
CSSで、テキストの文字色や太さ、アンダーラインなどでデザインします。
シンプルでオーソドックスなものの方がクリックされることも多いです。
テキスト文字デザイン
画像やイラスト、CSSでボタンの形や色、大きさをデザインします。リンクの数が多い場合は、画像やイラストで可視化させるとわかりやすいでしょう。
