第17章 デザイナー・制作者向け：スタイルのしくみ詳細
このページは、サイトのCSSを直接編集する制作担当者・デザイナー向けの技術資料です。 HTML/CSSの基礎知識がある方を対象にしています。 サイト管理者の方は、通常は 13. デザイン設定 までの内容で十分です。
13章 デザイン設定で紹介した「カラー・フォント」「ベーシックスタイル」「パーツCSS」について、実際にCSSを書く立場からもう一段詳しく解説します。
カラー変数（--col-*）の全体設計
13章の表にある基本の役割（--col-a〜g、--col-o/p、--col-w/x/y/z）に加えて、次のようなバリエーション命名があります。
薄い色・濃い色のバリエーション
| 記号の付け方 | 意味 |
|---|---|
--col-a |
基準色 |
--col-aa → --col-ab → --col-ac |
だんだん薄くなる |
--col-ax → --col-ay → --col-az |
だんだん濃くなる |
この考え方は --col-b（Secondary）や --col-c（Accent）など、他の基準色にも同じく適用できます。
自由に使える枠
--col-i・--col-j・--col-k・--col-l・--col-m・--col-n は役割が固定されていない予備の枠です。サイト固有の追加色が必要なときに使います（新設は制作担当者からの追加が必要です）。
フォントサイズ変数（--fsize-*）の完全対応表
13章で触れたとおり、フォントサイズは --fsize-a 〜 --fsize-j の10段階です。実際の対応は次のとおりです。
| 変数 | 対応するタグ・用途 |
|---|---|
--fsize-a |
見出し以外の「特大」文字（リッチテキストの装飾用） |
--fsize-b |
h1 |
--fsize-c |
h2 |
--fsize-d |
h3 |
--fsize-e |
h4 |
--fsize-f |
h5 |
--fsize-g |
h6 |
--fsize-h 〜 --fsize-j |
本文中の小さめの文字（キャプション・注釈など） |
各変数の実際のpx値は、カラー・フォントセットの中で自由に変更できます（画面幅に応じて滑らかに変化するclamp()によるレスポンシブ指定です）。CSSの中でこれらの変数を直接使う場合は、font-size: var(--fsize-c); のように参照してください。
ベーシックスタイルとパーツCSSの使い分け（技術的な理由）
13章でも触れましたが、技術的な理由も含めて改めて整理します。
- ベーシックスタイル：サイトの土台となるレイアウト・余白・基本タイポグラフィなど、サイト全体に影響するCSS。ここを変更すると、すべてのページ・すべてのパーツに影響が及びます。
- パーツCSS：特定のパーツ（部品）単位で追加するCSS。ベーシックスタイル本体を変更せずに、パーツ単位の見た目を積み増しできます。
このため、「特定のパーツだけ見た目を変えたい」という場合は、必ずパーツCSS側に書くのが安全です。ベーシックスタイル側に書いてしまうと、意図しない他のページ・他のパーツにまで影響が及ぶことがあります。
コールクラス＝選択メニューから呼び出せるクラス
パーツ・ブロックのcss_class欄や、リッチテキストエディタのスタイルメニューには、あらかじめ用意されたクラスを一覧から選ぶだけで使えるものがあります。これをコールクラスと呼びます。
- コールクラス：CSSのコメントに専用の目印（
@list）を付けて登録したクラス。エディタのメニューやcss_class欄の選択肢に自動で表示され、名前を手打ちしなくても選んで呼び出せます。 - 手打ち専用クラス：
cs-のようなサイト固有のカスタムクラスなど、登録されていないクラス。css_class欄に自分でクラス名を入力する必要があります。
コールクラスにする（＝選択肢に出す）には、CSSのルールの直前に1行コメントを付けます。
/* @list {配置場所}-{番号} {クラス名} {表示名} [{グループ}] */
.cms-rte .tx-feature-a { ... }
{配置場所}：どこの選択肢に出すか（a＝リンク／p＝段落見出し／span＝インライン／block／part／both／item／table）{番号}：配置場所ごとに百の位を分けたリスト番号（例：p-201）{クラス名}：実際に使うCSSクラス名{表示名}：メニューに表示する日本語ラベル
コールクラス化すると、顧客側も「クラス名を知らなくても、メニューから選ぶだけでデザインパターンを使える」ようになります（§4「cs-の運用フローと拡充ロードマップ」の③UI選択化にあたる仕組みです）。新しいクラスをコールクラス化するかどうかは、汎用性が高く複数サイトで使い回せると判断できてから（docs/style-design.md§5参照）で構いません。
CSSを書くときの注意
- 色・サイズは直接の数値ではなく、変数を使う：
#333や20pxのような直接指定ではなく、var(--col-f)やvar(--fsize-c)のようにカラー・フォントセットの変数を参照してください。ハードコードすると、カラー・フォントセットを切り替えたときに反映されなくなります。 - 配信済みのCSSファイルを直接書きかえない：サーバー上のCSSファイルを直接編集しても、次回保存時に上書きされます。必ずCMSの「デザイン設定」画面から編集してください。
- システム素材は複製してから編集する：システムが用意した標準のスタイル・カラー・パーツCSSは直接編集できません。「複製して編集」で自分用のコピーを作ってから触ってください。
ブロックごとのCSS（「このブロックの CSS」欄）
ブロック設定のいちばん下にある 「このブロックの CSS」 欄には、そのブロックの中だけに効くCSSを書けます。 「このセクションだけ余白を広げたい」「このブロックの写真だけ高さを変えたい」といった、1か所だけの調整に使います。
> .cont { padding: 170px 0 185px; }
.img1 img { height: clamp(680px, 68vw, 840px); }
&.is-dark { background: var(--col-z); }
@media (max-width: 600px) {
> .cont { padding: 90px 0 100px; }
}
- セレクタはブロックから見た書き方にします。書いた内容は、表示するときにそのブロック（
.cms-block[data-block-id="番号"]）で自動的に包まれるため、ほかのブロックには漏れません。ブロック自身を指すときは&を使います（例：&.is-dark）。 @mediaはそのまま書けます。@keyframes・@font-faceも書けます（自動的に包みの外へ出されます）。@importは使えません（取り除かれます）。- 波かっこ
{ }の数が合っていないと、保存時にエラーになります。コメントや文字列の中のかっこは数えません。 - 色は
var(--col-*)などの変数を使ってください（上の「CSSを書くときの注意」と同じです）。 - いくつものブロックで使い回す指定は、この欄ではなくベーシックスタイルに書きます。この欄はあくまで「このブロックだけ」の調整用です。
- ブロックを複製すると、この欄のCSSも一緒にコピーされます。「中身の履歴」で元に戻すこともできます。
- グループ（ブロックをまとめる枠）のブロック設定に書いた場合は、グループ全体に効きます。
- 書き込まれたブロックには、編集画面で「CSS」の札が表示されます（👉 4章・5章）。
ブロックの装飾（「装飾」欄）
背景の輪・図形・斜めの面などの飾りは、パーツ（カスタムHTMLなど）で作らず、ブロック設定の 「装飾」 欄で重ねます。 飾りを「データ」として持たせることで、どのブロックに何の飾りがあるかをCMSが把握でき、ブロックを複製・移動しても飾りが迷子になりません。
装飾を登録する（ベーシックスタイル側）
装飾の形は、ベーシックスタイルにクラスとして書き、直前に @list のコメントを付けて登録します（コールクラスと同じ仕組みで、配置場所が deco になります）。
/* @list deco-01 deco-orbit 背景の輪 */
.deco-orbit { width: var(--orbit-size, 260px); aspect-ratio: 1; border-radius: 50%; ... }
- クラス名は
deco-で始める必要があります。 - 登録したものが、ブロック設定の「装飾」欄の選択肢に並びます。
装飾を置く（ブロック設定側）
- 「装飾」欄で登録済みの装飾を選んで足します（最大8個・上下の並べ替え・外すができます）。
- 1つずつに 「個別クラス」（任意・英数字と
-_）を付けられます。同じ装飾を2つ置いて、大きさや位置を変えたいときに使います。 - 表示されるHTMLは
<div class="cms-deco deco-orbit 個別クラス" aria-hidden="true"></div>で、ブロックの中身（.cont）の最後に入ります。 - 既定では
position: absolute; z-index: -1; pointer-events: none;です（写真の上・文字の下に来て、下のリンクの操作を邪魔しません）。 - 位置・大きさは「このブロックの CSS」で個別クラスを狙って指定します。
.deco-orbit.is-big { --orbit-size: 50vw; right: 13%; top: -10%; }
ワンポイント 装飾はクラスを登録したベーシックスタイルに依存します。別のサイトで同じ装飾を使うときは、そのサイトのベーシックスタイルにも同じクラスを登録してください。
スタイルテンプレートとの関係
ここで説明した「素材」（カラー・フォントセット／ベーシックスタイル／パーツCSS）は、13章で説明したスタイルテンプレートという単位で組み合わされ、ページ・投稿タイプに適用されます。 素材を直接編集しても、それがどのスタイルテンプレートに使われているかによって影響範囲が変わるので、編集前に該当のスタイルテンプレートを確認しておくと安全です。