コーポレートグリーン #018A0E は CSS 全文で 21 回現れるが、静止状態で描画される要素は 0 個。
グローバルナビ項目の ::before(height: 1px / opacity: 0)として仕込まれ、ホバーとカレント表示でだけ現れる。
上のナビ「事業」に引かれている 1px の緑線がそれ。面は 白・淡グレー・フッターの #565656 しか使わない。
ニュースのカテゴリ色は文字にだけ使い、バッジの面は種別を問わず #eff0f2 で共通。
実測のバッジ面は #eff0f2 が 30 要素あり、4 色のいずれも面色としては現れなかった。
スタックの先頭に YakuHanJPs(約物だけのサブセット書体)を置き、2 番目に 游ゴシック Medium の別名 MyYuGothicM を置く。
letter-spacing は実測 353 要素中 346 要素が normal、font-feature-settings は 0 件。
サイズはすべて rem だが、px を 16 で割って小数 2 桁に丸めているため 14.08px / 13.12px / 38.08px という半端な実測値になる。
詰めているのは約物(かっこ・句読点・中黒)だけで、かなと漢字の間は詰まらない。
palt と違って OS やブラウザで結果が変わらない反面、letter-spacing を足すと約物が二重に詰まって崩れる。
MyYuGothicM の @font-face は local() だけで書かれており、游ゴシックが無い環境では status: error になってヒラギノへ落ちる。これは意図どおりで、URL を足してはいけない。
大林組がめざす姿、社会において果たすべき使命を示したものが「大林組基本理念」です。
「良く、速く、廉く、しかも安全に」——創業以来受け継がれてきた言葉を、いまの事業のことばに置き換えて示しています。
本文は 1rem(16px)/line-height: 1.8。ナビゲーションやリストの 1.7 より一段ゆるく組み、読み物であることを行間で示します。
箇条書きの行頭記号は円ではなく 6px の正方形。このサイトは border-radius を持たないので、リストマーカーも角のままにします。
押せるものは「白地に #cad0d5 の罫で囲む」か「#272727 の黒面」の 2 種類だけ。
どちらも border-radius: 0、box-shadow: none。ホバーは色を #d6dade / #666666 に差し替える。
ニュース種別のバッジは面 #eff0f2・文字 #272727 で共通、種別色は ::before の 左端 4px の帯にだけ塗る。
暗い面では面が #585858・幅 190px・帯 5px の別バリアントになる。
カードは枠も影も持たず、写真とテキストだけ。--hover-scale-value: 1.05 と --hover-scale-transition: scale 0.35s ease-out が変数化されており、
ホバーで写真だけが拡大する(カード全体の色は変わらない)。カード見出しは実績名なので 1.75rem / 400 / line-height 1.5 / letter-spacing .01em。
0 0 2px 3px rgba(0,0,0,.2) がフォーカスリングに使われている
実測 2 ページで box-shadow は 0 種類、border-radius も 0 種類。
段差は #cad0d5 の 1px 罫と、#ffffff → #eff0f2 → #f1f2f4 → #565656 という面の明度差だけで表す。
| Query | 出現 | 用途 |
|---|---|---|
| only screen and (max-width: 767px) | 58 | モバイル。主要な切り替え点 |
| only screen and (max-width: 1060px) | 10 | タブレット/小型ノート |
| only screen and (min-width: 768px) | 5 | モバイル以上 |
| only screen and (max-width: 1150px) | 3 | ナビの折り返し |
| (-ms-high-contrast: none) | 3 | IE 向けにフォントスタックを差し替える |
| (max-height: 760px) and (min-width: 1000px) | 1 | ★高さで切り替える唯一の分岐(ヒーローの高さ) |
デスクトップファースト(max-width 主体)。余白は % と em で持っているため、ブレークポイントを跨いでも自動で縮む。
見出しだけ rem を下げる(1.75rem → 1.375rem、1.25rem → 1.13rem)。