ヘッダーのアイコン位置調整の検討 #3289
Description
Activity
対応を見送り、この issue はクローズします。実装した PR #3294 もクローズしました。
再検討するときのために、調べた内容だけ残します。
参考にした形（Cloudflare Blog の実測）
ルールは CSS に直接書いてあり、
max(16px, (100vw - 1440px)/2 - 64px)。
本文の枠より 64px 左、ただし画面端から 16px より近づけない。
右側のナビは枠の位置に残っていて、外へ出しているのはロゴだけでした。画面幅 ロゴの左 本文の枠 本文の文字 1920 176 240 288 1280 16 0 48 このサイトに移すときの制約
左の余白は幅によって 16〜300px と変わり、単調ですらない。
画面幅 container 本文の左端 左の余白 1920 1320 312 300 1440 1320 72 60 1400 1320 52 40 1366 1140 125 113 1200 1140 42 30 992 960 28 16 1366px で 113px 空いているのに、1400px では container が 1140→1320 に跳ねて 40px に縮みます。
固定量で寄せる案は #2901 の「どの幅でも揃わない＝揃え損ねに見える」に当たるので、
やるなら「余白のぶんだけ出して 64px で頭打ち」の形になります。範囲外にしたもの
- 帯そのものを全幅にする案（ナビ・検索・パネルも画面端へ）。ヘッダーを写真バナーから1段64pxの帯に作り直す #2877 の
「帯の中身は container の内側」「パネルのright: 0が本文の右端」を覆す判断になる - ロゴの光学的なズレ。
viewBoxの x=0 に届いているのはクリムゾンの線の先端だけで
（そこの太さは 0.33px、1px に達するのは左端から 26px）、読者に見えている左端は
FUTURE の「F」＝箱の左端から 8.45px 内側。本文・パンくずは箱の左端にそろえているので、
見た目には 8.5px 右にずれている。これは今回の話とは別に残っています
- 帯そのものを全幅にする案（ナビ・検索・パネルも画面端へ）。ヘッダーを写真バナーから1段64pxの帯に作り直す #2877 の
SVGのアイコンだが、少し左に寄せたほうがオシャレ化？ 現在、左にサイドバーはないが、左のサイドバーの位置にずらすことを検討する。