面として広く塗る色を持たない。#ff5224（新刊・面 45 要素）と #00a7e5（近刊・面 19 要素）は
書影のバッジ以外に出てこない。黒が #000000 / #111111 / #222222 の 3 段あるのは、
リセット CSS の body { line-height: 1; color: #000 } と本体 CSS の color: #111 が二重にかかっているため。
common.css には Roboto と Noto Sans JP の @font-face が 9 件書かれているが、
/*font*/ の後ろがまるごとコメントアウトされている。
実測でもフォントファイルのリクエストは 0 件、document.fonts は空だった。
Roboto, sans-serif が 10 要素に当たっているが、実体は OS の既定サンセリフ。
html に font-size の宣言も無く、ブラウザ既定の 16px のまま使っている。
document.fonts.check() を根拠にしない。このサイトで
document.fonts.check('400 16px "Roboto"') は true を返すが、
document.fonts 自体は空で、フォントは 1 本も読み込まれていない。
親切のつもりで Google Fonts を足さない。游ゴシック体と游明朝だけで組むことがこのサイトの見え方をつくっている。
/book/ の 12 ジャンル見出しが writing-mode: vertical-rl。
游ゴシック体 20px / line-height: 20px（ベタ組み）/ 700 で、字間は normal のまま。
@media screen and (max-width: 768px) で horizontal-tb に戻すので、
縦組みはデスクトップだけの表現。「コンピューター・ＩＴ」のように全角英字を使って縦中横を避けているのが実装上の工夫。
未来は今日から。科学と技術と、手のしごとの本を。
トップのローディング表示だけ明朝 24px / line-height: 48px（＝ちょうど 2 倍）。
ジャンル見出しのベタ組み（line-height: 20px）とは、同じ縦組みでも行送りの考え方が逆になっている。
カードは枠も影も持たない。書影にかぶせる rgba(0, 0, 0, .75) のレイヤーが実測 66 要素で、
白 16px / line-height: 1.8 の紹介文をそこに置く。奥行きは影ではなくこのオーバーレイで作る。
#222222 に差し替えるだけ。影は足さない
実測 2 ページで box-shadow は 0 種類、filter: drop-shadow() も使っていない。
奥行きは オーバーレイ・明度差・角丸の対比の 3 つで作る。
#wrapper { min-width: 960px } ＋ .parts.section { width: 960px; margin: 100px auto 0 }。
max-width ではなく固定幅で、デスクトップは横スクロールを許す。
768px 以下で別レイアウトに切り替える。
#wrapper に min-width: 960px）| Viewport | html | body font-size | line-height | letter-spacing |
|---|---|---|---|---|
| 1440px | 16px | 14px | 25.2px（1.8） | normal |
| 1200px | 16px | 14px | 25.2px（1.8） | normal |
| 834px | 16px | 14px | 25.2px（1.8） | normal |
| 375px | 16px | 14px | 28px（2.0） | normal |
モバイルでは文字を大きくせず、行間だけ 1.8 → 2.0 に広げる。
1 回の計測を「このサイトの行間」と書かないこと。
ほかに (max-height: 790px) and (min-width: 768px) という高さで切り替える分岐と、
IE 向けにメイリオへ差し替える (-ms-high-contrast: none) が残っている。