font-weight ではなく書体名で切り替えるFOT-UD角ゴ_ラージ Pr6 R / M / B の 3 ファミリーを使い分ける。CSS に font-weight の宣言がなく、実測でも可視 284 要素のうち 280 要素が 400。font-weight: 700 を当てても太くならない(R のファミリーに太字の実体がない)。
ローカルでは FontPlus のドメインライセンスが効かないため、UD 書体として最も近い BIZ UDPGothic(モリサワ・Google Fonts)で代替している。BIZ UDPGothic は Regular と Bold の 2 本しかないので、M の位置には Noto Sans JP 500 を当てて 3 段を作った。
line-height は 10px の絶対値body { font-size: 62.5% } で 16px → 10px。サイズはすべて em で書かれ、1.4em = 14px として読む。さらに body の line-height: 1.0em は em なので 10px という絶対値になり、全子孫に降りる。
line-height を書き忘れる0.71 の要素が 33 個ある(14.04px の文字に 10px の行送り)。新規に組む要素には必ず line-height を書く。
em で宣言し直す1.6em = 22.4px の行送り。本文はこれが既定(実測 75〜81 要素)。見出しは 1.2em〜1.4em、長い説明文は 1.8em(19 要素)。line-height を単位なしの比率に書き換えない。em の絶対値継承がこのサイトの前提。
html は 1440 / 1200 / 834 / 375px のいずれでも 16px 固定、body の 62.5%(= 10px)も全幅で動かない。流体ルートではない。縮むのは見出しだけで、em の宣言値を 834px / 375px で書き換えている。
ヘッダーの 白 / 青 / 黄 / 黒 のラジオで body に .color01〜.color04 が付き、背景・文字・リンク・罫・ボタンがまとめて入れ替わる(実測 .color0* を含む規則が 33 本)。既定では body にクラスが付かず、地色はブラウザ既定の白。
考え方は 2 つだけ。青・黒(暗い地)では文字・リンク・罫を白に倒す。黄(明るい地)では紺か #323232 に倒す。面で塗っていたボタンは、暗い地では background-color: inherit + 1px solid の枠線だけのボタンに変える(.btnDownload)。色を足したら 4 つすべてで見え方を確認すること。
pageBackground.resolved は rgb(14,27,63) と出るが、これはヘッダーの紺。html / body に塗りの指定がなく、コンテンツ領域は UA 既定の白。紺をページ背景にしない。
1.2em = 12px、1.4em = 14px、2.4em = 24px。letter-spacing は可視 284 要素すべて normal。UD 書体は字面が大きく設計されているので、ベタ組みで詰まって見えない。
既定の角丸は 3px(可視 34 要素)。主ボタン .btnMore だけ 30px で全丸に近く、ページャは 20px。
| 開館時間 | 10:00〜17:30(展示室への入室は17:00まで) |
|---|---|
| 休館日 | 毎週月曜日(祝日の場合は翌平日) |
| 観覧料(大人) | 500円(団体400円)/ 年間パスポート 900円 |
| 70歳以上・大学生以下 | 無料 |
罫は上辺と各行の下辺だけ。縦罫を引かない。既定の罫色は #c9c9c9、黄の配色では #323232 に倒す。
box-shadow はサイト全体で 0 種。影を足すと、配色を切り替えたときに暗い地で破綻する(影は 4 配色ぶん定義されていない)。
余白は 5 の倍数(10 / 15 / 20 / 25 / 35 / 50 / 60px)。8 の倍数ではない。ブレークポイントは max-width: 860px / min-width: 768px / 1024px / 1366px / 1367px の 5 つ。1366px と 1367px が隣り合っているのは実サイトの作りで、新規実装では真似しない。