2本指
Aa
↑
↓
Official Header

BASECORD 公式ヘッダー

BASECORD が作る画面・アプリ・ホームページの一番上に置く正規のヘッダーです。 いま、この画面の一番上に出ているものが実物で、見本ではありません。 このページは公式ファイル（正本）をそのまま読み込んで表示しているので、 ここで見えている見た目・動き・文字の間隔が、そのまま「正しいヘッダー」です。 ロゴ単体や Powered by BASECORD はオフィシャルロゴのページにあります。

オフィシャルロゴ 公式ヘッダー

01使い方 — 2行貼るだけ

CSSとスクリプトを読み込むだけで、ページ最上部にヘッダーが自動で入り、時計が動き、言語プルダウンが付きます。HTMLを書き写す必要はありません。

<link rel="stylesheet" href="https://www.delivery-wine.com/share/basecord-logo/assets/bc-header.css">
<script src="https://www.delivery-wine.com/share/basecord-logo/assets/bc-header.js" defer></script>

置き場所を決めたいとき

本文の途中など、入れる位置を指定したい場合だけ、次の空タグを置きます。置かなければ <body> の先頭に入り、本文には自動で上余白（padding-top）が付きます。

<div id="bc-header"></div>
いちばん大事なこと： 見た目を真似して自分でHTMLを書かないでください。上の2行で読み込む方式なら、 本部でヘッダーを直したとき全画面に自動で反映されます。書き写した画面だけが古いまま取り残されます。

02実物の見え方（画面幅ごと）

下の3つはすべて本物のヘッダーを実際に描画したものです（縮小して並べています）。幅によって並びが自動で変わります。

画面幅ごとの表示PC 1280px / タブレット 900px / スマホ 390px

PC — 高さ 90px・1段

タブレット（980px以下）— 高さ 118px・中央が下段へ

スマホ（520px以下）— 時計マークと文字が縮む・日付は非表示

この3つは同じ1ファイル（header-demo.html）を幅違いで表示しているだけです。切り替えのための別デザインはありません。

03各部の名前と役割

左：ロゴ
金のアナログ時計（実際に動く）＋ Cinzel の BASECORD ＋ デジタル時計と日付。ここがロゴの正で、リンク先は basecord.net。
中央：キャッチ
既定は AI WebTerminal Management System と - Create the next civilization -。ここだけは画面名・製品名に差し替えてよい。
右：言語
12言語の選択プルダウン。選ぶと localStorage に保存し、bc-lang-change イベントを発火。別タブにも伝わる。多言語化しない画面ではリンクボタン等に置き換えてよい。
下端の金ライン
ヘッダー下端の細い金のグラデーション線。BASECORD の識別要素なので必ず残す。
背景
濃紺のグラデーション（上 #1d2186 → 下 #141863）。ヘッダーだけは濃色が正（ページ本体はライトが原則）。

04仕様（この数値が正）

色

ネイビー（上）#1d2186
ネイビー（下）#141863
ゴールド ハイライト#F4DDB2
ゴールド 1#E5C28B
ゴールド 2#C9A063
ゴールド 3#8C6A3A
補助テキスト#B5AC95

寸法・書体

高さ
90px ／ 980px以下 118px（--bc-hdr-h）
時計マーク
74px ／ 980px以下 60px ／ 520px以下 52px。外周のベゼルは30秒で1回転、針は実時刻に同期（秒針はなめらか）。
BASECORD の文字
Cinzel 600 / 30px / 字間 .42em（980px以下 24px、520px以下 20px・字間 .3em）。金のグラデーションを文字に流し込む。
デジタル時計
Cinzel 600 / 18px / 字間 .16em。コロンは1秒で点滅。日付は Cormorant Garamond の斜体で Friday, 8 August 2026 形式（980px以下は非表示）。
中央キャッチ
Cinzel 500 / 18px / 字間 .18em、副題は Cormorant Garamond 斜体 17px。
使う書体
Cinzel（ロゴ・時計）／ Cormorant Garamond（斜体の副題・日付）／ Noto Sans JP（日本語）。この3つ以外は使わない。

05変えてよいところ / 変えてはいけないところ

変えてよい
中央のキャッチ（製品名・画面名に差し替え）／ 右側の中身（言語選択を消してリンクやボタンにする）／ 左ロゴのリンク先
変えてはいけない
紺と金の色 ／ 3書体以外への差し替え ／ 文字の大きさ・字間・高さ・時計の比率 ／ 時計を止める・静止画にする ／ 下端の金ラインを消す ／ ヘッダーをライト（白背景）にする ／ 似たものを自作して置き換える
迷ったとき
このページの一番上に出ているものが正解です。合っているか分からない時は、真似せず2行の読み込み方式に戻してください。

06正本の場所と、直すときのルール

この2ファイルだけが公式ヘッダーの実体です。ほかにコピーを作らないでください。

bc-header.css見た目（色・寸法・時計・レスポンシブ） bc-header.jsHTML の自動挿入・時計の駆動・言語切替
正本
BASECORD 管理画面の includes/ 配下にある bc-header.css / bc-header.js（社内）。
このページの2本
正本へのシンボリックリンク。コピーではないので中身は常に一致し、片方だけ古くなることが起きません。
直すとき
正本だけを直します。共有作業ボードで design をロックしてから作業し、設計図に何を変えたか残すこと。ヘッダーは全画面に効くので、独断で色や寸法を変えないでください。
配布URL
https://www.delivery-wine.com/share/basecord-logo/assets/bc-header.css
https://www.delivery-wine.com/share/basecord-logo/assets/bc-header.js

07ロゴ・Powered by はこちら

ヘッダーを丸ごと置けない小さなアプリや、フッターに入れる Powered by BASECORD、アイコン単体・モノクロ版などは、 オフィシャルロゴのページ にまとまっています。ヘッダーとロゴは同じ1つのブランドの表と裏です。

オフィシャルロゴ / ブランドキット →

BASECORD Official Header — 社内・協力者向け（検索避け設定）
最終更新 2026-08-08