CSS設計：テーマ設定をCSS変数に落とす
テーマ設定（色・フォント・余白）をCSSカスタムプロパティとして出力し、セクション側は静的CSSで参照する構造を作れる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、テーマ設定（色・フォント・余白）をCSS変数に落とし、セクション側は静的なCSSで参照する構造を作れるようになります。
受託では、この一方通行にしておくと運用者がエディタで色を変えるだけで全体が追従し、納品後の修正依頼が減ります。
テーマ設定をCSS変数にするとは
settings_schema.jsonの値を、:rootのCSSカスタムプロパティ（CSS変数）として1か所で出力することです。snippets/css-variables.liquidをtheme.liquidのheadでrenderし、{% style %}で:root { --color-text: …; --font-body: …; --page-width: … }を出します。
Skeleton themeも同じ構造です。
CSSの中に色が40か所書いてあると、「ブランドカラーを少し変えたい」が改修になってしまいます。
color_schemeとcolor_paletteの違い
color_scheme_groupは、各スキーム（配色のセット）の変数を.color-{{ scheme.id }}クラスへ出力し、セクションがそのクラスを付けて使います。color_palette（2026-06）は、テーマ全体で1つのパレットを編集する仕組みです。
各color設定のdefaultが、{{ settings.colors.primary }}のようにパレットを参照します。
新しく作るテーマではpalette、既存のテーマはschemeのままでかまいません。
フォントはどう扱うか
font_pickerの値は、font_faceとfont_modifyの2つのフィルタで扱います。font_faceは@font-faceを出力するフィルタで、font_display: 'swap'を付けます。font_modifyは、太さや斜体の派生を作ります。font.family / fallback_familiesを変数に入れて、CSSから参照します。
発展：スコープと詳細度
セクション固有の値は、style属性のローカル変数（--gap）で受け、静的CSSがvar()で使います。
クラス名はBEM風に揃え、!importantに頼りません。
色・フォント・余白・幅は、必ず設定 → 変数を経由させます。
ハードコードした色は、納品後の修正依頼を生むからです。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。