固定ヘッダーでリンクがずれる件
固定ヘッダーのデザインって多いですよね。 スマホサイトだと、7~8割が固定ヘッダーな気がする(当社比) PCサイトでも1カラムのサイトだと、最近は結構多い。
ただ、ページ内リンクが固定ヘッダの高さ分ずれちゃうのが玉に瑕。 前はJSでスクロール位置ずらしたりしてたんだけど、これだと他ページから 飛んできたときにずれちゃうんだよね。
なので最近は該当箇所の疑似要素に ネガティブmarginとpaddingで対応してます。。
#hoge:before{ content: ""; display:inlne-block; margin-top:-100px; padding-top:100px; }
IDにスタイルつけるのは好きじゃないんだけど、分かりやすいので、逆にIDにつけてます。
hogeに背景色つけるときは、もう一つ上にdivをかませてあげると良きです。
ネガティブマージンは、固定ヘッダーと同じ高さにするとぴったりひっついて変だから 固定ヘッダーよりちょっと高くしたほうがよいです。