headタグの中身が見えてしまったら

同級生SさんからのSOS。

head要素の中身、特にtitle要素とscript要素の中がブラウザに表示されてしまうのだという。同級生の中でもデキるSさんからのSOSなので、まさかそんな、と思いながら画面を見せてもらった。（画面はサンプル）

たしかにtitle要素の中身、本来、ブラウザウィンドウのタブ上にとか、ウィンドウバーに表示される内容が、ブラウザの画面内にも表示されている。タブ上にも表示されているので、title要素としての機能は生きている。meta要素などは画面にこそ表示されないが、やはり機能は正常。

タグの綴りミスなども見て見たが、間違っているように思えない。

私が画面を見て首を捻っていると、同級生が集まってきて検討に加わった。

才気あふれるKくんがふと「display:noneにしてみたらどうなるんですかね」と言った。

解決編

開発者ツールでtitle要素に「display:none」を指定してみると、ちゃんと消えた。それどころか、もともと「display:none」という指定があったのが、打ち消し線で「無効」になっていたのを発見した。

無効化された「display:none」の出所は「user agent stylesheet」つまりブラウザのデフォルト状態だ。

謎はすべて解けた。

そもそも、ブラウザはデフォルトのスタイル指定を持っている。padding やmarginの指定がブラウザによってまちまちなのはよく知られており、それをリセットするための「リセットCSS」といった考え方も存在する。

実は、head 要素やtitle要素のデフォルトのスタイル指定が内部に存在し、それは「display:none」になっているらしい。逆に、普通のhtmlページで、head要素とtitle要素に「display:block」を指定すると、Sさんのページと同様、title要素の中身を表示することに成功？した。

実はmeta要素も「display:block」されていたのだが、meta要素はそもそも空要素のタグで閉じタグがないので、innerHTMLが存在しない。だから画面上に表示されるものがないのだ。title要素やscript要素はinnerHTMLがあるので、表示されてしまう。

Sさんのスタイルシートを確認したところ、リセットCSSの一環として、全称セレクタで「display: block」を指定していたことが判明。

html * {
    margin:0;
    padding:0;
    display:block;
}

なるほど。これがそんなふうに出てくるとは思わなかった。勉強になった。