【CSS】縦書きモードにすると、ページ内リンクがずれてしまう

ページ内リンクを設定した際に、リンクをクリックすると、そのタグのところに飛んだ際に位置がずれてしまうという現象が起こった。
本来なら、id=○○と指定したタグの上部が、ブラウザの上部に来るようになるはずなのだが、今回はブラウザ画面上部よりもかなり下の位置に、目的のタグが来るようになってしまっていた。
これが一体どういうことなのか、調査していくことにした。

ページ内リンクがずれる原因をネットで調べると、「ヘッダーをスクロールに合わせて付いてくるように固定しているから」というような情報が見つかった。

しかし、今回はヘッダーを固定するようなことはしていないし、それに近いようなこともしていない。JavaScriptとかが関係しているような情報もあったが、今回はhtmlとcssだけで作った模写コーディングなので、それも関係なさそうである。

これまで書いてきたcssをいろいろコメントアウトしたりして、色々実験してみたところ、あるCSSプロパティが関係していることが分かった。

それが「縦書きにする」プロパティである。

CSSで「writing-mode: vertical-rl;」　とすると、縦書きにすることができる。

このコードを消すと、ページ内リンクがずれることがなくなった。
ただし、直接これが原因であるとは確定できない。
これに付随する何か別の要因が関係しているかもしれない。

そこで、CSSを全部消して、「writing-mode: vertical-rl;」だけにしてみた。

そしたら同様に、ページ内リンクがずれた。

CSSは「writing-mode: vertical-rl;」だけ　→　ページ内リンクはずれる。
CSSは全く無　　→　ページ内リンクはずれない。

という状況になり、
「writing-mode: vertical-rl;」を使用すると、ページ内リンクで意図しない位置に飛ぶことが分かった。

さらに、気づいたことがある。
ページ内リンクで飛んだ際、ずれるというよりは、リンク先要素の下底の位置がブラウザの下底にぴったり合うようになっているということだ。

通常のページ内リンクでは、リンク先要素の上底がブラウザの上部に来るようになる。簡単に言えば、画面の上に合うようにリンク先に飛ぶ。

しかし、「writing-mode: vertical-rl;」では、画面の下に合うようにリンク先に飛ぶことが分かった。

ちなみに、「writing-mode: vertical-lr;」 は左から右に向かって書くような縦がきのプロパティだが、こちらでも同様だった。

解決策

縦書きモードにすると、ページ内リンクした際に、下底に合うようになってしまうのは分かった。しかし、それでは困る。

解決策としては、

「writing-mode: vertical-rl;」をcssで指定する要素はh2やpなどの文字が記載されているタグに記載し、
ページ内リンク先として「id=○○」を記載するのは、h2やpの親要素であるdivタグやsectionタグに記載するようにすれば、上記のような問題は起こらなかった。