固定ヘッダーでリンクがずれる件

固定ヘッダーのデザインって多いですよね。 スマホサイトだと、７～8割が固定ヘッダーな気がする（当社比） PCサイトでも1カラムのサイトだと、最近は結構多い。

ただ、ページ内リンクが固定ヘッダの高さ分ずれちゃうのが玉に瑕。 前はJSでスクロール位置ずらしたりしてたんだけど、これだと他ページから 飛んできたときにずれちゃうんだよね。

なので最近は該当箇所の疑似要素に ネガティブmarginとpaddingで対応してます。。

#hoge:before{
    content: "";
    display:inlne-block;
    margin-top:-100px;
    padding-top:100px;
}

IDにスタイルつけるのは好きじゃないんだけど、分かりやすいので、逆にIDにつけてます。

hogeに背景色つけるときは、もう一つ上にdivをかませてあげると良きです。

ネガティブマージンは、固定ヘッダーと同じ高さにするとぴったりひっついて変だから 固定ヘッダーよりちょっと高くしたほうがよいです。