HTMLのアンカーポイントの位置を上にずらしてみた

ページ内リンクなどで使われるアンカーポイントですが、特に指定をしないとウィンドウの上端に移動します。

ただ、ウィンドウの上端だと少し読みづらかったり、見つけづらかったりするので、少し余白を空けたいことがあります。

アンカーポイントの下に余白を空ける方法もあると思いますが、コーディングを済ませた後にアンカーポイントだけ挿入したい時に少し手間になってしまいます。

そこで、以下のようなCSSを適用させてみました。

1
2
3
4
5
6
7
8
9
.hideAnchor {
display:block;
height:0px;
/height:1px;
overflow:hidden;
text-indent:-9999px;
margin-top:-10px;
padding-bottom:10px;
}

上の記述でデザインはそのままに、通常挿入する位置の10px上の位置にアンカーポイントを挿入することが出来ます。

height:0;overflow:hidden;text-indent:-9999px;でテキストを隠しているのでSEO的にどうなんだろう?

Author: SUSH
Link: http://blog.sus-happy.net/html-anchor/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.