CSSカスタマイズ | @ak2lab/engine Sandbox

CSS カスタムプロパティ（:root で上書き可能）

:root {
  /* カラー（基本） */
  --color-primary:         #025DCC;   /* メインカラー */
  --color-secondary:       #00C6FF;   /* アクセントカラー */
  --color-dark:            #0f172a;   /* ダーク背景 */
  --color-text:            #334155;   /* 本文テキスト */
  --color-text-light:      #475569;   /* 薄い本文テキスト */
  --color-text-lighter:    #cbd5e1;   /* さらに薄いテキスト */
  --color-bg-light:        #f8fafc;   /* ライト背景 */
  --color-white:           #ffffff;
  /* カラー（拡張トークン v0.1.7） */
  --color-bg-subtle:       #f1f5f9;   /* 控えめな背景 */
  --color-text-muted:      #64748b;   /* ミュート系テキスト */
  --color-text-placeholder:#94a3b8;   /* プレースホルダー */
  --color-border:          #e2e8f0;   /* ボーダー */
  --color-border-light:    rgba(0, 0, 0, 0.08);  /* 薄いボーダー */
  --color-bg-hover:        rgba(0, 0, 0, 0.05);  /* ホバー背景 */
  --color-sunday:          #c0392b;   /* 日曜日 */
  --color-saturday:        #2471a3;   /* 土曜日 */
  --color-dark-bg:         #14141c;   /* ダークテーマ背景 */
  --color-dark-text:       #f0f0f5;   /* ダークテーマテキスト */
  --color-dark-sub:        #777788;   /* ダークテーマ補助テキスト */
  --color-dark-border:     rgba(255, 255, 255, 0.05); /* ダークテーマボーダー */
  /* フォント */
  --font-sans:    "Noto Serif JP", serif;
  --font-english: "Lato", sans-serif;
  --font-mono:    "Roboto Mono", monospace;
  /* グラスモーフィズム */
  --glass-bg:     rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  --glass-blur:   20px;
  /* レイアウト */
  --container-width:  1240px;
  --header-height:    80px;
  --color-lead-width: 720px;
  /* Z-Index */
  --z-header:    50;
  --z-nav:       40;
  --z-content:   10;
  --z-card:       5;
  --z-waves:      3;
  --z-particles:  1;
  --z-shapes:     0;
}

既存セクションクラス一覧

base.css に定義済みのセクションクラスです。独自スタイルが不要な場合はこれらを使ってください。

クラス	説明
`.section--white`	白背景
`.section--dark`	ダーク背景（`--color-dark`）
`.section--faq`	FAQ セクション用スタイル
`.section--contact`	コンタクトフォーム用スタイル
`.section--service`	サービス紹介セクション（背景画像対応）
`.section--greeting`	グリーティングセクション（ウォーターマーク対応）
`.section--parts-hero`	パーツヒーロー用（ライト背景・min-height: 70vh）

サイト固有スタイルの追加方法

エンジンの style.css には直接追記せず、src/site.css に定義してください。バンドル時に末尾に追記されます。

/* src/site.css */
/* サービスセクションの背景画像 */
.section--service {
  background-image: url('/images/office.jpg');
}
/* BEMモディファイアで独自バリアントを追加 */
.section--warm {
  background: var(--color-bg-subtle);
}
/* カード独自スタイル（インラインスタイル不使用） */
.parts-category-card--effects {
  border-color: rgba(0, 198, 255, 0.2);
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.section--service の背景画像

.section--service {
  background-image: url('/images/office.jpg');
}

.section--greeting のウォーターマーク

.section--greeting::before {
  content: 'DIRECTOR';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15vw;
  font-weight: 900;
  color: rgba(0,0,0,0.03);
  font-family: var(--font-english);
  pointer-events: none;
  white-space: nowrap;
}

前のページ: ← Eleventy設定 | ↑ 目次 | 次のページ: ベストプラクティス →