ブランドカラーと呼べる面色は無い。黒(#222222 / #444444)とグレーの階調だけで組み、赤 #f1503a は暦の意味づけ(日曜・休館日)にしか使わない。ページ背景は純白ではなく、わずかに温かい #fdfbfa。
letter-spacing は可視要素の全件で normal。トップ 123/123 要素、下層 87/87 要素で、例外は 1 件も無い。CSS 全文の宣言も 4 件しかなく、うち 2 件は 0px に戻すもの。font-feature-settings の宣言も 0 件で、palt も halt も YakuHan 系の約物サブセットも使っていない。約物(、。「」())は全角幅のまま出る。
「見出しほど太い」が成り立つのは明朝と欧文だけ。可視の 700 はトップ 59 要素のうち Cinzel 31 + Shippori Mincho 25。ゴシックスタック(Noto Sans JP)の葉要素に 700 は 1 件も無く、document.fonts 上も Noto Sans JP 700 は unloaded。本文を太字にしたいときは、ウェイトを上げずに Shippori Mincho へ切り替えるのがこのサイトの流儀。
html { font-size: 100%; line-height: 1 }。ルートは 6 幅(1440 / 1200 / 834 / 768 / 767 / 375px)すべてで 16px 固定で、流体スケールもブレークポイントごとのルート切替も使っていない。一方で無単位の 1 が全要素に降りるため、行間を宣言し忘れた要素は行が潰れる(実測 比率 1.00 がトップ 28 要素 / 下層 35 要素)。
実サイトはこうだが、正しくはこう —— 本文スタックの先頭は Roboto だが、フォントファイルを 1 件も要求していない(73 件すべて Shippori Mincho / Noto Sans JP / Cinzel)。Roboto を持たない環境(macOS 既定)では素通りし、英数字も Noto Sans JP で出る。読み込むか、落とすなら削ること。
なお Barlow Semi Condensed も @font-face で宣言されているが unloaded・可視 0 要素。
曜日と日付だけ Cinzel, serif(ローマン体の欧文)で組む。トップで 38 要素。カレンダーだけ別書体というのがこのサイトの指紋。和文と混ぜない。
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
角丸は行の両端だけ。4px 0 0 4px / 0 4px 4px 0 を各 1 要素に当てている。セルの枠は 1px solid #999999、ヘッダ行は #eeeeee、休館日は #dddddd の面に #999999 の文字。
角丸は 0 が既定。例外は TOPへ の 4px とカレンダー両端だけ。影は 2 種類・各 1 要素しかない。階層は罫線(#999999)と面(#eeeeee / #dddddd / #f6f6f6)で作る。
実測した 2 ページに入力欄が無い。角丸 0 + 1px solid #999999 のカレンダーの罫線に合わせる。ラベルは Shippori Mincho、入力値は Noto Sans JP。
ブレークポイントは実質 2 段階。CSS 全文の @media は max-width: 735px が 102 宣言と圧倒的で、ここで 3 カラムを 1 カラムへ落とす。次が 1200px の 6 宣言(max-width の折り返し)。html は全幅で 16px のまま動かない。
タッチターゲットが 44px に届いていない。カレンダーのセルは padding: 8px 0 + 行高 19.5px = 約 36px、サブナビは padding: 12px 20px + 行高 18.2px = 約 42px。新規実装では縦 padding を足して 44px を確保すること。