ヘッダーとフッターが画面幅いっぱいに

ここにあるすべてのページで見られる、ちょっとした変更です。上部の暗い帯と下部のフッターが、ウィンドウの端から端まで伸びるようになりました。

今日までは、それらもほかの要素と同じ1180ピクセルの列の内側に収まっていたため、幅の広い画面では、ページが何もない背景の中に浮かぶ1本の帯のようになっていました。統計ページのフッターだけはすでに全幅になっており——そこだけが例外だったという不整合が、この変更のきっかけです。

変わらなかったこと

その帯の中身です。テキスト、ボタン、数字は、下にあるセクションと同じ1180ピクセルの位置に揃ったままなので、帯自体は広くても、文章の幅は広くなりません。100文字もある行を読みたい人はいませんし、27インチのモニターいっぱいに引き伸ばされた見出しは、デザインではなく単なる見落としです。

よくある手法を使わなかった理由

要素を中央揃えの列からはみ出させる一般的な方法は、100vwに対して負のマージンを設定することです。これには、スクロールバーを非表示にしたデスクトップでは見落としやすい欠点があります。vwにはスクロールバーの幅も含まれるのです。結果としてブロックは、その幅の分だけ表示領域より広くなり、ページ全体が横方向に数ピクセルずれて動かせてしまいます——スマートフォンでは、読もうとしている最中に指の下でレイアウトが揺れる、ということになります。

そのため、この帯は外側に広がるのではなく、最初から広い状態にしておき、内側に向けてパディングを付けています。

padding-inline: max(20px, calc((100% - 1180px) / 2))

パーセンテージは要素の親要素、つまりこの場合はページのbodyを基準に解決され、そこにはスクロールバーは含まれません。1180ピクセルを下回ると、最初の値が優先され、帯はマイナスのマージンではなく、妥当な20ピクセルのマージンを保ちます。2つ目のラッパー要素も、JavaScriptも、実行時に測定する必要もありません。

適用範囲

トップページ、aboutページ、そしてすべての統計ページです。この3つすべてで同じ構造になっている、というのがこの変更の狙いでした。