実サイトに CSS Custom Properties は 0 個。DNN(Portals/ Skins/DAS/)の上に素の CSS が書かれていて、色はすべて hex の直書き。結果として ブランド青 #005baa と CTA 青 #116dc9 が別物として併存し、さらに #0075c0 / #0070c0 という 5 違いのゆらぎがある。
42% / 86% という偏ったストップ位置が特徴。等間隔にすると別物になる。ロゴ下の帯と下層ページの見出し帯に使う。
border-radius: 20px 0 0。対になる要素は 0 20px 0 0 で反転させる。文字は白・16.875px・新ゴ DB。
Social Environment
border-radius: 96px / 12px / weight 400 / padding 3px 12px。面と文字は必ず対で使う。
和文はモリサワ「新ゴ」の 2 ウェイトを TypeSquare(wf.typesquare.com)で配信している。注入される @font-face は 4 本すべて font-weight: bold(新ゴ R / Shin Go Regular / 新ゴ DB / Shin Go DeBold、いずれも loaded・unicodeRange: U+0-10FFFF)。ファミリーに実体が 1 本しか無いので、CSS が 400 でも 700 でも同じファイルが返る。
このプレビューでは Adobe / モリサワのドメインライセンスのため新ゴを表示できない。同じモリサワ系で字面の近い Zen Kaku Gothic New(Google Fonts)で代替し、--font-r / --font-db という 2 つの変数に分けて「ファミリー名で切り替える」構造だけを再現している。
| CSS の書き方 | 実サイトの挙動 |
|---|---|
| font-family: "新ゴ R"; font-weight: 400; | 新ゴ Regular が出る(正しい) |
| font-family: "新ゴ DB"; font-weight: 700; | 新ゴ DeBold が出る(正しい) |
| font-family: "新ゴ R"; font-weight: 700; | 新ゴ Regular のまま。太くならず、合成太字も起きない |
| font-family: "新ゴ DB"; font-weight: 400; | 新ゴ DeBold のまま。細くならない |
目印は フォント要求の typesquare.com / wf.typesquare.com と typesquare.js の読み込み(実測 5 件)。欧文の HelveticaNeueeTextPro-* は Web フォント配信されておらず、実機に無ければ Helvetica Neue 以降へ落ちる。
可視 137 要素中 121 要素が letter-spacing: normal(下層は 133 中 114)。font-feature-settings も 0 要素で、約物も詰めない。開けるのはフッターリンク(1px)とグローバルナビ(0.288px = 16px × 0.018em)だけ。
病気と生きる誰かを思う。それが、より良い医療を実現するすべての原動力になる。
病気と生きる誰かを思う。それが、より良い医療を実現するすべての原動力になる。
第一三共個人情報保護方針 クッキーポリシー ソーシャルメディアコミュニティガイドライン
| line-height | 実測(トップ / 下層) | 用途 |
|---|---|---|
| 1.80 | 52 / 45 要素(最多) | 本文(body の既定。27px ÷ 15px) |
| 1.50 | 28 / 4 要素 | ボタンラベル・中見出し |
| 1.30 | 6 / 21 要素 | 見出し |
| 1.20 | 14 / 17 要素 | ナビ・小見出し |
| 1.00 | 19 / 31 要素 | 1 行で収める UI ラベル |
CTA は #116dc9 + border-radius: 50px、padding は 13px 68px 14px 44px と左右で大きく違う(右に矢印が入る)。ラベルは太らせない(weight 400)。
border-radius: 0 / 1px solid #bbbbbb / padding: 0 15px / 15px。input はフォント継承が効かないので font-family を明示的に当て直す。
実測された自前の box-shadow は rgba(0,0,0,.07) 0 3px 60px 0 の 1 件だけ。blur: 60px / alpha: 0.07 と極端に広く薄いので、落ち影というより面の下の空気のように見える。
none で、区切りは 1px solid #dddddd の枠が担当する。
もう 1 件測れる rgba(0,0,0,.2) 0 0 18px は OneTrust の Cookie バナーのもので、サイトの設計ではない。
html は 4 幅すべて 10px 固定(62.5% 相当)。動くのは body の方で、タブレット域とスマートフォン域で別々の vw 式が当たっている。
| 画面幅 | body font-size | 式 |
|---|---|---|
| ≥ 1000px | 15px(lh 27px) | 固定 |
| 999px | 14.985px | 1.5vw |
| 860px | 12.9px | 1.5vw |
| 768px | 11.52px ← 最小 | 1.5vw |
| 767px | 26.5894px ← 2.3 倍に跳ぶ | 3.46667vw(750px で 26px) |
| 550px | 19.0667px | 3.46667vw |
| 375px | 13px | 3.46667vw |
| 320px | 11.0933px | 3.46667vw |
1 幅だけ測って「このサイトの本文は 15px」と書かない。rem は html 固定なので素直に 10 倍でよいが、body 基準の相対指定は幅で変わる。なお 768px の 11.52px は日本語本文として小さすぎるので、新規実装では下限を 14px 程度で止める。
| 幅 | 実測 | 用途 |
|---|---|---|
| 1000px | 12 件(下層で最多) | 下層の本文カラム |
| 1240px | 11 / 2 件 | トップのセクション |
| 1600px / 1920px | 2 / 1 件 | ヒーロー・ワイド帯 |
| 560px / 456px | 14 / 2 件 | カード |
gap の宣言は 60px の 1 件のみ。グリッドではなく float / margin 主体の旧来のレイアウト。メディアクエリは print, screen and (…) の形で書かれていて、印刷にも同じレイアウトが当たる。