新しいサイトを組むとき、HTMLの冒頭に置く head の中身は、たいてい前の案件から丸ごと持ってきます。文字コードの宣言、viewport、favicon、OGP。一度決めたら数年は触らない部分です。

そのhead部分の雛形を、ウェブ開発者のManuel Matuzović氏が更新して公開しました。前に同じものを出したのが5年前で、その間にHTMLまわりでいろいろ動きがあったので作り直した、という趣旨です。一行ずつ「なぜ必要か」「必須か任意か」が添えられていて、自分たちのテンプレートと見比べるのにちょうどいい内容でした。

まず変わっていないところ

土台の部分は拍子抜けするほど変わっていません。doctypeは、HTMLが版を切らない仕様になった今も、互換性のために書いておく必要があります。html要素のlang属性は、氏が「HTMLでもっとも重要な属性のひとつ」と書くほど扱いが重く、読み上げソフトの発音から翻訳の判定まで幅広く影響します。日本語サイトならjaと書く、それだけの話ですが、英語圏のテンプレートを借りてきてenのままになっている例は今でも見かけます。

meta charsetをtitleより前に置く、という順番の指定も残っています。後ろに置くとページタイトルの文字が化けることがあるためです。印刷用のスタイルシートをmedia=”print”で読み込ませておく話も健在で、「今でも人はウェブページを印刷する」という理由づけには納得させられました。

減った指定と、増えた指定

viewportの指定は width=device-width だけでよく、長らく定番だった initial-scale=1 はもう要らない、というのが氏の見解です。あれは古い版のiOSやAndroidのために必要だったもので、今の環境では出番がないはずだ、と。ただし「まだ必要な場面があった気がする」という声が時々届くとも書いていて、付けておいても害はない、と結んでいます。この歯切れの悪さはむしろ正直で、好感が持てます。

スクリプトの読み込みは、type=”module” を既定にするよう勧めています。moduleを付けると、文書の解析が終わったあと、DOMContentLoadedが発火する前に実行される形になり、deferに近い挙動が暗黙に入ります。表示を止めてまで先に走らせたい理由がないなら、こちらでいいという整理です。

端末の文字サイズ設定を受け取るmetaタグ

今回いちばん目を引いたのが、text-scale という新しいmetaタグでした。

スマートフォンの設定で文字を大きくしても、ウェブページの文字は大きくならない。この挙動に覚えのある方は多いはずです。実際、ChromeもiOSのブラウザも、OSの文字サイズ設定をウェブの中身には反映していません。AndroidのFirefoxだけは反応しますが、あれは文字だけでなくページ全体を拡大する処理なので、メディアクエリのブレークポイントまで一緒に動いてしまいます。

このタグに scale を指定すると、ルート要素の初期font-sizeが、OSやブラウザの文字サイズ設定に比例して伸び縮みするようになります。効くのはremやemで指定した文字だけで、pxで固定した文字は動きません。MDNの解説では、ルートのfont-sizeを16pxのような絶対値で上書きしないこと、サイズ指定は相対単位かキーワードで書くことが、使用の前提として挙げられています。

ただし現状は実験的な機能で、Baselineには入っていません。そして何より、MDNにも本人のブログにも同じ注意が書かれています。入れる前にテストすること。モバイルには文字サイズを200%から300%以上まで上げる設定があり、そこまで伸ばしても崩れないかを確かめずに入れると、横スクロールが出たり文字が重なったりします。氏自身、自分のサイトで横スクロールが発生したと書いていました。

アイコンまわりは相変わらず手間がかかる

faviconは、icoとsvgの両方をlinkで書いておくのが無難だという話も出てきます。SVGのアイコンを定義すると、ブラウザがサイト直下のfavicon.icoへ自動で戻ってくれなくなり、古い環境ではアイコンが表示されない場合があるためです。SVGにする利点は、拡大しても粗くならないことと、SVGの中にCSSを書けるのでダークモード用の色を持たせられることです。

Androidのホーム画面用にはwebmanifestが要り、丸く切り抜かれる表示に備えたmaskable指定のアイコンでは、絵柄を中央の約80%に収めておく必要があります。theme-colorはSafariの26から扱いが変わり、指定した色ではなく、bodyの背景色や画面上部に固定された要素の色が使われるようになりました。

ひとつひとつは小さな話ですが、この手の雛形は一度作ると数年そのまま動き続けます。地方の制作現場でも、中小企業のサイトほど制作時のテンプレートが何年も引き継がれていきます。新規案件に着手する前に一度だけ見比べておくと、要らない一行を落とし、入れておくべき一行を足すきっかけになるはずです。