日本平のふもと、緑に囲まれた美術館

来館案内

太さは font-weight ではなく書体名で切り替える

FOT-UD角ゴ_ラージ Pr6 R / M / B の 3 ファミリーを使い分ける。CSS に font-weight の宣言がなく、実測でも可視 284 要素のうち 280 要素が 400。font-weight: 700 を当てても太くならない(R のファミリーに太字の実体がない)。

Pr6 R(本文・UI)可視 207 要素
font-weight は書かない
開館時間・観覧料のご案内
Pr6 M(小見出し)可視 7 要素
.sideIconTitle / .strongTitle
開館時間・観覧料のご案内
Pr6 B(注意書き・日付)可視 70 要素
.rule / カレンダー
開館時間・観覧料のご案内

ローカルでは FontPlus のドメインライセンスが効かないため、UD 書体として最も近い BIZ UDPGothic(モリサワ・Google Fonts)で代替している。BIZ UDPGothic は Regular と Bold の 2 本しかないので、M の位置には Noto Sans JP 500 を当てて 3 段を作った。

ルートは 10px、line-height は 10px の絶対値

body { font-size: 62.5% } で 16px → 10px。サイズはすべて em で書かれ、1.4em = 14px として読む。さらに body の line-height: 1.0em は em なので 10px という絶対値になり、全子孫に降りる。

誤:line-height を書き忘れる

14px の文字に body の 10px の行送りが降りてくる。行が重なって読めない。実測でも行間比 0.71 の要素が 33 個ある(14.04px の文字に 10px の行送り)。

新規に組む要素には必ず line-height を書く。

正:各要素が em で宣言し直す

14px の文字に 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 で書き換えている。

閲覧者が配色を 4 つから選べる

ヘッダーの 白 / 青 / 黄 / 黒 のラジオで body に .color01〜.color04 が付き、背景・文字・リンク・罫・ボタンがまとめて入れ替わる(実測 .color0* を含む規則が 33 本)。既定では body にクラスが付かず、地色はブラウザ既定の白。

白(.color01 / #ffffff)
開館時間・観覧料
10:00〜17:30(展示室への入室は17:00まで)
各企画展のページ
月曜日は休館です
すべてのイベントを見る
青(.color02 / #0000b3)
開館時間・観覧料
10:00〜17:30(展示室への入室は17:00まで)
各企画展のページ
月曜日は休館です
すべてのイベントを見る
黄(.color03 / #f39700)
開館時間・観覧料
10:00〜17:30(展示室への入室は17:00まで)
各企画展のページ
月曜日は休館です
すべてのイベントを見る
黒(.color04 / #000000)
開館時間・観覧料
10:00〜17:30(展示室への入室は17:00まで)
各企画展のページ
月曜日は休館です
すべてのイベントを見る

考え方は 2 つだけ。青・黒(暗い地)では文字・リンク・罫を白に倒す。黄(明るい地)では紺か #323232 に倒す。面で塗っていたボタンは、暗い地では background-color: inherit + 1px solid の枠線だけのボタンに変える(.btnDownload)。色を足したら 4 つすべてで見え方を確認すること。

紺 1 色。ページの地色は白

pageBackground.resolved は rgb(14,27,63) と出るが、これはヘッダーの紺。html / body に塗りの指定がなく、コンテンツ領域は UA 既定の白。紺をページ背景にしない。

SPMOA Navy
#0e1b3f
ヘッダー・ナビ・フッター・主ボタン。可視 62 / 69 要素
Text Primary
#323232
本文。body に直接。可視 115 / 132 要素
Text Muted
#666666
カテゴリラベル。可視 9 要素
Link
#032bc1
本文中のリンク。可視 3 / 8 要素
Border
#c9c9c9
見出しの下線・画像の枠
Warning
#dc0101
注意書きの囲み(.rule)の枠と文字
Today
#ed6400
「本日」バッジ
Event A
#b7e3f8
ギャラリーツアー等。可視 16 要素
Event B
#cef49b
創作週間等。可視 6 要素

10px を 1em として読む

1.2em = 12px、1.4em = 14px、2.4em = 24px。letter-spacing は可視 284 要素すべて normal。UD 書体は字面が大きく設計されているので、ベタ組みで詰まって見えない。

Page Title2.4em = 24px
lh 1.2em / #pageTitle
来館案内
Heading 12.0em = 20px
lh 1.3em / .solidTitle
下線 3px solid #c9c9c9
開館時間・観覧料
Heading 31.6em = 16px
lh 1.3em / .dotedTitle
下線 1px dotted
団体でご利用の方へ
Sub Heading1.4em = 14px / Pr6 M
lh 1.4em / .sideIconTitle
左に 10px の紺の棒
年間パスポート
Notice1.4em = 14px / Pr6 B
lh 1.4em / .rule
1px solid #dc0101
2026年度の夜間開館の予定はございません。
Body1.4em = 14px
lh 1.6em
最多 96 / 99 要素
収蔵品展は、ロダン館もあわせてご覧いただけます。開館時間は 10:00〜17:30(展示室への入室は 17:00 まで)です。休館日は毎週月曜日(祝日の場合は翌平日)です。
Long text1.4em = 14px
lh 1.8em / 可視 19 要素
団体(20 名以上)でご利用の場合は、事前にお申し込みください。引率の方は無料です。駐車場は大型バス 10 台ぶんをご用意しています。

角丸は 3px。ボタンだけ 30px

既定の角丸は 3px(可視 34 要素)。主ボタン .btnMore だけ 30px で全丸に近く、ページャは 20px。

すべてのイベントを見る 123 本日 ギャラリーツアー 創作週間

横罫だけの表

開館時間10:00〜17:30(展示室への入室は17:00まで)
休館日毎週月曜日(祝日の場合は翌平日)
観覧料(大人)500円(団体400円)/ 年間パスポート 900円
70歳以上・大学生以下無料

罫は上辺と各行の下辺だけ。縦罫を引かない。既定の罫色は #c9c9c9、黄の配色では #323232 に倒す。

カレンダー(日曜と土曜だけ色を変える)

9
金
10
土
11
日
12
月
13
火

影ゼロ。帯と罫と面のグレーだけ

box-shadow はサイト全体で 0 種。影を足すと、配色を切り替えたときに暗い地で破綻する(影は 4 配色ぶん定義されていない)。

ゴールドマン コレクション 河鍋暁斎の世界
2026.10.10 — 2026.12.06
山水画の名品
2026.10.10 — 2026.12.06
開館40周年記念展 おかげさまで展
2027.01.23 — 2027.03.28
viewport
.container(max-width は 100%・padding 0 15px)
card

余白は 5 の倍数(10 / 15 / 20 / 25 / 35 / 50 / 60px)。8 の倍数ではない。ブレークポイントは max-width: 860px / min-width: 768px / 1024px / 1366px / 1367px の 5 つ。1366px と 1367px が隣り合っているのは実サイトの作りで、新規実装では真似しない。