本デモサイトの技術仕様をご説明します。
Review WCAG contrast ratings for ACSS global colors, including optional semantic colors and shade comparisons.
* For your convenience, the content on this page is presented in both English and Japanese (English first).
※ 英語圏、日本語圏の方がスムーズに読めるように、本ページでは、英語、日本語の順に同一の文章を掲載しています。
* Plugin links are listed in the following order: the official page, a usage guide page, and a YouTube tutorial video. Usage guide pages and YouTube tutorial videos are included only if they exist.
※ プラグインのリンクは、公式ページ、使用方法の解説ページ、Yotubueの解説動画の順に入れております。使用方法の解説ページ、Yotubueの解説動画は、存在する場合のみ入れております。
Page Builder used on this site
このサイトで使用されているページビルダー
A very lightweight page builder releasing in 2026.
2026年リリースの非常に軽量なページビルダー。
Fonts used on this site
このサイトで使用されているフォント
Main plugins used on this site（In alphabetical order）
このサイトで使われている主なプラグイン（A、B、Cの順に表記）
Manage colors, fonts, typography, and spacing.
色、フォント、タイポグラフィー、スペースを管理
https://automaticcss.com/https://docs.automaticcss.com/【Youtube】ACSS PlaylistXserver Development's Free Security Plugin
エックスサーバー開発の無料セキュリティープラグイン
https://wpplugin.cloudsecure.ne.jp/Email Collection and Email Marketing
メール収集とメール送信マーケティング
https://getwpfunnels.com/email-marketing-automation-mail-mint/https://getwpfunnels.com/mail-mint-docs/【Youtube】MailMint PlaylistDatabase Optimization
データベース最適化
https://devdoit-sweep.com/Add AI Chatbot
Add AI Chatbot
https://fancychatbot.com/https://fancychatbot.com/docs/Add animation
アニメーション追加
https://fancyanimations.com/https://fancyanimations.com/docs/install-the-plugin-and-activate-the-license/Improve display speed
表示速度アップ
https://fastpixel.io/https://fastpixel.io/docs/Detection of site layout issues, form submission testing
サイトの形崩れ検知、フォームの送信テスト
https://flowguardwp.io/https://docs.flowguardwp.io/Task management plugin for multiple users
複数名でのタスク管理プラグイン
https://fluentboards.com/https://fluentboards.com/docs/【Youtube】FluentBoards PlaylistForm submission and post-submission email sending
フォーム送信とメール送信
https://fluentforms.com/https://docs.fluentforms.com/【Youtube】FluentForms PlaylistSending a monthly email with traffic statistics
月1回のアクセス数のメール送信
https://independentwp.com/【Youtube Channel】Independet AnalyticsAI-driven operation
AIによる操作
https://novamira.ai/https://novamira.ai/docs/【Youtube】Novamira PlaylistSupport Etch
Etchをサポート
https://ohmyetch.com/https://docs.ohmyetch.com/Support Automatic.css
Automatic.cssをサポート
https://schemawp.com/https://schemawp.com/docs/【Youtube】SchemaWP ChannelCookie Consent Plugin
クッキー同意プラグイン
https://trustwards.io/Snippet Management
スニペット管理
https://wpcodebox.com/https://docs.wpcodebox.com/Perform a daily backup to an external service such as Google Drive or Dropbox.
Google Driveや、Dropboxなどの外部へ1日1回バックアップを取得
https://wpvivid.com/https://docs.wpvivid.com/1）Aside from FastPixel, there are no additional fees at or after delivery. If you are satisfied with the site's loading speed, you do not need to install FastPixel.
1）FastPixelを除いて、納品時、納品後に上記の追加料金はかかりません。納品後のサイトの表示速度にご不満がない場合は、FastPixelをインストールする必要はありません。
2）If you contract with us for monthly maintenance and management, we will install and operate the paid version of FastPixel at no extra cost. *Monthly maintenance fees will be quoted based on the scope and requirements of your website.
2）弊社に月額保守管理をご依頼いただいた場合、FastPixel有料版を追加費用なし（弊社負担）で導入・運用いたします。※保守管理費はサイト規模やサポート内容に応じてお見積もりいたします。
3）Licenses for paid page builders and plugins belong to the developer (production agency).
3）有料ページビルダー、及び、有料プラグインのライセンスは、制作者（制作会社）に帰属します。
4）If you wish to contact or ask the developer of a paid plugin, please do so through us (the license holder).
4）有料プラグインの開発者に質問したい場合は、ライセンス保有者である制作者を介して質問してください。
5）We cannot transfer licenses for page builders or plugins after delivery if the request does not involve a website development project.
5）納品後に、サイト制作を伴わないページビルダー、プラグインのライセンス移動には応じかねます。
6）After delivery, standard fees of 11,000 yen (incl. tax) will apply for the reactivation of paid plugin licenses required due to a domain change.
6）納品後、ドメイン変更に伴う有料プラグインのライセンス再有効化は、税込11,000円で対応します。
7) If you wish to use the AI features of the plugin after delivery, additional fees for API keys or MCP-connected AI tools will apply.
7）納品後にプラグインが持つAI機能を使う場合は、APIキー代やMCP接続用AIツール代が別途発生します。
8) Issues caused by updates to themes, plugins, or other components are automatically detected by Flowguard, which resolves them by rolling back the plugin and sending an email notification. If the issue persists, the maintenance manager will manually restore the site using backup data from WPvivid Pro.
8）テーマ、プラグイン等のアップデートにより発生した不具合はFlowguardが自動検知、プラグインをロールバックにより修正しメール通知します。それでも直らない場合は保守管理者が手動でWPVivid Proのバックアップデータによりサイトを復元します。
9) If you have any questions regarding plugins or similar topics, you can obtain answers by taking a screenshot and asking an AI, or by setting the documentation as a source in Gemini Notebook and asking your question in Japanese.
9）プラグイン等のご不明点は、スクリーンショットを撮り、AIに質問、または、Gemini Notebookにドキュメンテーションを情報源に設定し、日本語で質問することで回答を得ることが可能です。
10) If Fluentboards and Mail Mint are not going to be used, the site will be delivered without installing them. Alternatively, they can be pre-installed upon delivery and uninstalled later by a maintenance administrator. B2B business sites generally have ample server resources, so using Fluentboards is recommended.
10）FluentboardsとMail Mintを使わない場合、インストールしないで納品します。FluentboardsとMail Mintをインストールして納品し、後日、保守管理者がアンインストールすることも可能です。BtoBのビジネスサイト等では、一般にサーバーリソースに余裕があり、Fluentboardsの活用が推奨されます。
Heading levels, text sizes, and font families — all driven by Automatic.css variables. Sizes are fluid and responsive out of the box.
見出しレベル、文字サイズ、フォントファミリーは、すべてAutomatic.cssの変数によって制御されています。サイズは初期状態で可変（フルード）かつレスポンシブに対応しています。
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Each card prints the family its token resolves to, read from the rendered specimen. ACSS declares –heading-font-family and –text-font-family only when a font is entered in its dashboard. On a site that sets its fonts elsewhere the token does not exist, the card says so, and reports the family the headings actually render in.
各カードには、そのトークンが解決される先のフォントファミリーが表示されます（これは実際にレンダリングされたサンプルから読み取られたものです）。ACSSは、ダッシュボードでフォントが指定された場合にのみ、`–heading-font-family` および `–text-font-family` を定義します。別の場所でフォントが設定されているサイトでは、これらのトークンは存在しないため、カードにはその旨が表示され、見出しが実際にどのフォントファミリーでレンダリングされているかが示されます。
This is a standard body text paragraph rendered at the default text size with your configured line-height and max-width.
これは、設定された行間と最大幅を適用し、デフォルトの文字サイズで表示した標準的な本文の段落です。
A second paragraph demonstrates content spacing. ACSS Smart Content Spacing handles the vertical rhythm between paragraphs, headings, lists, and other elements automatically.
2つ目の段落は、コンテンツの間隔を示しています。「ACSS Smart Content Spacing」は、段落、見出し、リスト、その他の要素間の垂直方向のリズムを自動的に調整します。
The six ACSS color families with auto-generated shades (OKLCH in v4). Each swatch uses the corresponding CSS variable — change your ACSS dashboard and this guide updates instantly. Use color-mix() for transparencies.
自動生成されたシェード（v4ではOKLCHを使用）を持つ6つのACSSカラーファミリーです。各カラーサンプルには対応するCSS変数が使用されており、ACSSダッシュボードの設定を変更すると、このガイドの表示も即座に更新されます。透明度を調整する際は、`color-mix()` を使用してください。
Your action color — buttons, links, CTAs.
Your secondary brand color.
Your third brand color.
Your least-used brand color — sparingly for emphasis.
Your preferred neutral color — backgrounds, text, borders.
Black, white, and shades of grey.
Success, warning, info and danger, with the same eight-shade scale as the brand colours. All four slots ship switched off: until they are enabled in the dashboard's Semantic Colors panel, ACSS emits nothing for them, and a hatched swatch below means exactly that.
「Success（成功）」「Warning（警告）」「Info（情報）」「Danger（危険）」の各項目には、ブランドカラーと同様に8段階の階調が用意されています。これら4つの項目は、初期状態ではすべて無効化されています。ダッシュボードの「Semantic Colors」パネルで有効にしない限り、ACSSはそれらに関するスタイルを出力しません。その下にある斜線入りの見本は、まさにその状態（無効）であることを示しています。
ACSS emits light-dark() for every palette variable. Shades invert, so –primary-ultra-light shows the ultra-dark value and –white and –black swap. Main colours and hover variants do not invert: they hold the same value in both schemes, which is why –primary and –secondary are identical above. That is the documented behaviour, not a broken demo, and Main Color Override in the dashboard is where you change it. Force a scheme on any element with .scheme–light or .scheme–dark.
ACSSは、すべてのパレット変数に対して`light-dark()`を出力します。色調は反転するため、`–primary-ultra-light`は「ウルトラ・ダーク（ultra-dark）」の値をとり、`–white`と`–black`は入れ替わります。一方、メインカラーやホバー時のバリエーションは反転せず、どちらのスキームでも同じ値を維持します（そのため、上記の例では`–primary`と`–secondary`が同一になっています）。これは仕様通りの動作であり、デモの不具合ではありません。変更を行う場合は、ダッシュボードの「Main Color Override（メインカラーのオーバーライド）」設定を使用してください。特定の要素に`.scheme–light`や`.scheme–dark`クラスを適用することで、スキームを強制的に指定することも可能です。
Standard linkPrimary ButtonBoth cards paint this button with the same fill on purpose: –primary is a main colour and does not invert. Its label does, because a label colour is a shade. Measured here: fill oklch(0.664 0.107 202) in both cards, label lightness 0.95 in light against 0.10 in dark. That asymmetry is what makes some solid buttons unreadable under a dark scheme, see Buttons on Assigned Backgrounds.
両方のカードで、このボタンの塗り（fill）の色が意図的に同じにされています。`–primary` はメインカラーであり、反転しないためです。一方、ラベルの色は「シェード（明度変化）」であるため、反転します。具体的には、塗り（fill）は両カードとも `oklch(0.664 0.107 202)` ですが、ラベルの明度はライトモードで `0.95`、ダークモードで `0.10` となっています。こうした非対称性こそが、ダークモードにおいて一部の塗りつぶし（ソリッド）ボタンが読みづらくなる原因です（「特定の背景色上のボタン」の項を参照）。
ACSS emits light-dark() for every palette variable. Shades invert, so –primary-ultra-light shows the ultra-dark value and –white and –black swap. Main colours and hover variants do not invert: they hold the same value in both schemes, which is why –primary and –secondary are identical above. That is the documented behaviour, not a broken demo, and Main Color Override in the dashboard is where you change it. Force a scheme on any element with .scheme–light or .scheme–dark.
ACSSは、すべてのパレット変数に対して`light-dark()`を出力します。色調は反転するため、`–primary-ultra-light`は「ウルトラ・ダーク（ultra-dark）」の値をとり、`–white`と`–black`は入れ替わります。一方、メインカラーやホバー時のバリエーションは反転せず、どちらのスキームでも同じ値を維持します（そのため、上記の例では`–primary`と`–secondary`が同一になっています）。これは仕様通りの動作であり、デモの不具合ではありません。変更を行う場合は、ダッシュボードの「Main Color Override（メインカラーのオーバーライド）」設定を使用してください。特定の要素に`.scheme–light`や`.scheme–dark`クラスを適用することで、スキームを強制的に指定することも可能です。
Standard linkPrimary ButtonBoth cards paint this button with the same fill on purpose: –primary is a main colour and does not invert. Its label does, because a label colour is a shade. Measured here: fill oklch(0.664 0.107 202) in both cards, label lightness 0.95 in light against 0.10 in dark. That asymmetry is what makes some solid buttons unreadable under a dark scheme, see Buttons on Assigned Backgrounds.
両方のカードで、このボタンの塗り（fill）の色が意図的に同じにされています。`–primary` はメインカラーであり、反転しないためです。一方、ラベルの色は「シェード（明度変化）」であるため、反転します。具体的には、塗り（fill）は両カードとも `oklch(0.664 0.107 202)` ですが、ラベルの明度はライトモードで `0.95`、ダークモードで `0.10` となっています。こうした非対称性こそが、ダークモードにおいて一部の塗りつぶし（ソリッド）ボタンが読みづらくなる原因です（「特定の背景色上のボタン」の項を参照）。
Content spacing and contextual gaps. All values are fluid and responsive via ACSS clamp() functions. Nested containers show how each spacing level relates to the others — padding is applied to all sides so you can see both block and inline simultaneously.
コンテンツの間隔と文脈に応じた余白。すべての値はACSSのclamp()関数により、可変かつレスポンシブに制御されます。入れ子状のコンテナは、各間隔レベルの相互関係を示しています。すべての辺にパディングが適用されているため、ブロック方向とインライン方向の両方の余白を同時に確認できます。
Every downward pairing of the scale exists as one fluid token, –space–to-, 15 for content spacing and the same 15 again for section spacing. A bridge spans a wider range than either end alone: desktop of the large size down to mobile of the small one. At desktop width a bridge and its plain counterpart print almost the same value below; narrow the window and the bridge falls faster.
スケール上の各「上位から下位へ」の組み合わせは、`–space–to-` という一つの流動的なトークンとして定義されています。コンテンツ間の余白用に15種類、セクション間の余白用にも同じく15種類が用意されています。「ブリッジ（可変値）」は、単一の端点（固定値）がカバーする範囲よりも広い領域を網羅します。具体的には、デスクトップ向けの大きなサイズから、モバイル向けの小さなサイズに至るまで対応します。デスクトップ幅では、ブリッジとそれに対応する固定値（プレーンな値）はほぼ同じ数値を出力しますが、ウィンドウ幅を狭めていくと、ブリッジの値の方がより急激に減少していきます。
The section scale has the identical matrix, –section-space-xl-to-m and friends, for section padding that has to collapse harder on mobile than the fluid calculation alone would.
セクションのスケール設定には、`–section-space-xl-to-m` といった一連の変数（マトリックス）が用意されています。これらは、モバイル環境において、単なる可変（フルード）計算だけでは不十分なほどセクションの余白を大きく縮小させる必要がある場合に使用されます。
Vertical rhythm between sections. Each ring shows its actual padding-block value — the visible vertical space is the real section padding applied by ACSS.
セクション間の垂直方向のリズム。各リングは実際の `padding-block` 値を示しており、目に見える垂直方向のスペースは、ACSSによって適用された実際のセクションパディングです。
ACSS's utility grids and the Content Grid. The zones are additive offsets on one shared width: feature is content plus 2 × –feature-width, feature-max adds –feature-max-width on top, full spans everything. So a content width that already fills the container leaves the zones nowhere to go, and every child renders the same width with no error.
ACSSのユーティリティグリッドと「コンテンツグリッド」について解説します。これらは共通の幅を基準とした「加算的なオフセット（ずれ）」として機能します。具体的には、`feature`はコンテンツ幅に`–feature-width`の2倍を加えた幅となり、`feature-max`はそこに`–feature-max-width`を上乗せした幅となります。一方、`full`は全体に広がります。そのため、コンテンツ幅がすでにコンテナいっぱいに広がっている場合、これらのゾーンを適用する余地がなくなり、すべての要素（子要素）はエラーを起こすことなく同じ幅でレンダリングされます。
ACSS 4 is variable-first: the .grid–* utility classes were removed with most class modules, and grids are built from variables on your own class or, as here, inline. Each demo below is one declaration, grid-template-columns: var(–grid-N), with gap riding the contextual –grid-gap. The auto variants pack columns by available space.
ACSS 4は「変数ファースト」の設計を採用しています。`.grid–*` ユーティリティクラスやその他のクラスモジュールの多くは廃止され、グリッドは独自のクラスで変数を指定するか、あるいはここでの例のようにインラインで変数を定義して構築します。以下の各デモは、`grid-template-columns: var(–grid-N)` という単一の宣言で構成されており、ギャップ（間隔）はコンテキストに応じた `–grid-gap` 変数によって制御されます。「auto」バリアントでは、利用可能なスペースに合わせてカラムが配置されます。
One grid with named zones. Children land in the centred content zone by default and opt out sideways with a class. The bands below are live children of a real .content-grid, their widths measured off the rendered page. Here full is the section's inner width; on a real page it is the viewport.
名前付きの領域（ゾーン）を持つグリッドです。子要素はデフォルトで中央の「content」ゾーンに配置されますが、クラスを指定することでそこから外れ、横方向に配置されるようになります。下にある帯状の要素は、実際の `.content-grid` の子要素であり、その幅はレンダリングされたページ上で計測されています。ここでの「full」はセクションの内部幅を指しますが、実際のページではビューポートの幅に相当します。
Two traps worth naming. The zone rules select direct children, so wrapping a grid's content in a container silently disables every zone class below it. And because –content-width does double duty, a wide container setting collapses all zones onto the content width with no error. Opt a single box out of a defaulted grid with .content-grid–off.
特に注意すべき「落とし穴」が2つあります。ゾーンのルールは直下の子要素を対象とするため、グリッドのコンテンツをコンテナで囲むと、その内側にあるすべてのゾーンクラスが（エラーなどは出ずに）無効化されてしまいます。また、`–content-width` は複数の役割を兼ねているため、コンテナの幅を広く設定すると、すべてのゾーンがその幅に収まるように縮小・統合されてしまいます。デフォルトのグリッドから特定のボックスだけを除外したい場合は、`.content-grid–off` を使用してください。
The tokens this guide borrows for its own chrome, finally shown as specimens. –radius is one dial, not a scale: –radius-m resolves straight to –radius here, and the remaining radius tokens are fixed geometry, 0, 50% and 50vw. The composites assemble the pieces: –border is –border-size –border-style –border-color-dark.
本ガイドのUI要素（クローム）に採用されているトークンを、実例として示します。`–radius`は「スケール（段階的な値のセット）」ではなく単一の「ダイヤル（設定値）」として機能します。ここでは`–radius-m`が直接`–radius`の値として解決され、その他のradiusトークン（`0`、`50%`、`50vw`）は固定値として定義されています。複合トークンはこれらを組み合わせたもので、例えば`–border`は`–border-size`、`–border-style`、`–border-color-dark`を統合した構成になっています。
–border paints with –border-color-dark, a translucent mix of –black, so it rides any light surface. –border-light is the same composite built on –white, for dark surfaces, shown here on a bg–dark strip.
「–border」は「–border-color-dark」（「–black」を半透明に混合した色）で描画されるため、明るい色の表面に重ねても馴染みます。一方、「–border-light」は「–white」をベースに同様の混合処理を施したもので、暗い色の表面に適しています（ここでは「bg–dark」の帯の上に表示されています）。
Deliberately a single dial. Each square carries its token as border-radius and prints the value it resolves to. Squares, not bars: –radius-50 and –radius-circle only read correctly on one.
意図的に単一のダイヤルとしています。各正方形は、自身のトークンを `border-radius`（角丸）として適用し、その結果として得られる値を表示します。バー（帯）ではなく正方形である理由は、`–radius-50` や `–radius-circle` といった値が、正方形に対してのみ正しく適用されるためです。
A divider is a border on its own line. –divider assembles –divider-size and –divider-style with whichever colour the dashboard's Default Divider Scheme picks; –divider-dark and –divider-light are the same composite pinned to one colour, shown here on a light and a dark surface. Below that, each dashboard setting on its own. –divider-gap rides –content-gap so the spacing follows the site's rhythm and sits on both sides of the rule, margin above and padding below, as the ?divider-all recipe lays it out, and –divider-inline-size is for dividers drawn as pseudo-elements rather than borders. Every value is measured.
「divider」は、独立した行に配置される境界線です。`–divider` は、ダッシュボードの「デフォルトの区切り線スキーム（Default Divider Scheme）」で選択された色を使用し、`–divider-size` と `–divider-style` を組み合わせて構成されます。一方、`–divider-dark` と `–divider-light` は同様の構成要素ですが、それぞれ特定の色に固定されており、ここでは明色および暗色の背景上で表示されています。その下には、各ダッシュボード設定が個別に示されています。`–divider-gap` は `–content-gap` に連動してサイトのスペーシングのリズムに合わせられ、`–divider-all` レシピのレイアウトに従って、区切り線の両側（上部にマージン、下部にパディング）に間隔が設けられます。また、`–divider-inline-size` は、境界線ではなく擬似要素として描画される区切り線のために使用されます。すべての値は計測に基づいています。
on a light surface
on bg–dark
First item
Second item
Third item
Three steps per scale, 1 to 3, each black mixed at increasing opacity and blur; shipped 4.0.1 has no six-step ladder and no -subtle step. The specimens sit on a fixed light panel because a shadow on a dark page is invisible, which is a property of shadows, not of the tokens.
各スケールは1から3までの3段階で構成され、黒色は段階的に不透明度とぼかしを強めて混合されています。なお、製品版（バージョン4.0.1）には、6段階のグラデーションや「subtle（微細）」な段階は含まれていません。サンプルは固定式のライトパネル上に配置されています。これは、暗い背景上では影が見えなくなるためですが、この現象は影の性質によるものであり、トークン自体の性質によるものではありません。
–text-shadow-1
–text-shadow-2
–text-shadow-3
filter: drop-shadow() follows the rendered contour instead of the box, which only shows on a non-rectangular shape. The filter sits on a parent and the clip-path on a child; on one element the clip would cut the shadow away with it.
`filter: drop-shadow()` はボックス（矩形）ではなく描画された輪郭に沿って影を落とすため、その効果は非矩形の形状においてのみ確認できます。このフィルターを親要素に、`clip-path` を子要素に適用するのは、単一の要素に両方を適用すると、クリッピングによって影まで切り取られてしまうからです。
Default link styles, link color variations on light and dark surfaces, and the ACSS button system. All buttons inherit global variables from the ACSS dashboard.
デフォルトのリンクスタイル、明暗の背景色に応じたリンク色のバリエーション、そしてACSSのボタンシステム。すべてのボタンは、ACSSダッシュボードのグローバル変数を継承します。
Light surface (default)
Here is a paragraph with a standard inline link embedded in the middle of the text to show how it reads in context. Links should be clearly distinguishable from surrounding body text.
文脈の中でどのように表示されるかを示すため、テキストの途中に標準的なインラインリンクを埋め込んだ段落をここに示します。リンクは、周囲の本文とはっきりと区別できるようにする必要があります。
Under a dark colour scheme these two panels invert. Measured on this install, .bg–dark computes oklch(0.25) in light and oklch(0.85) in dark, so a section that reads as dark in one scheme reads as light in the other. Background assignments are scheme-aware. Main colours are not, and that pairing is why some labels below drop out: the button text colour is a shade, so it inverts to the dark end, while the fill is a main colour and stays put. .btn–neutral measured 1.02:1 here. The fix is per colour, under Main Color Override in the ACSS dashboard.
ダークカラーの配色設定では、これら2つのパネルの色が反転します。今回の設定で測定すると、`.bg–dark`はライトモードで`oklch(0.25)`、ダークモードで`oklch(0.85)`と算出されます。そのため、一方の配色では「暗い」と認識されるセクションが、もう一方では「明るい」と認識されることになります。背景色の割り当ては配色設定に連動しますが、メインカラーはそうではありません。下にある一部のラベルが見えなくなってしまうのは、この組み合わせが原因です。ボタンのテキスト色は「シェード（shade）」であるためダークモード側へ反転しますが、塗りつぶし色は「メインカラー」であるため変化しないからです。ここで`.btn–neutral`を測定したところ、コントラスト比は1.02:1でした。この問題は、ACSSダッシュボードの「Main Color Override（メインカラーのオーバーライド）」設定にて、色ごとに修正可能です。
bg–dark
Buttons
All six variants paint the same colour here, and that is ACSS working as designed. Automatic Color Relationships assign one Button Style per background context, and the rule matches on the btn– prefix, so the variant class is never read. Add .unrelate to a button to opt it out, as in the row below.
これら6つのバリアントはすべて同じ色で表示されますが、これはACSSが意図した通りの動作です。「Automatic Color Relationships（自動カラー関連付け）」機能は、背景のコンテキストごとに1つのボタン・スタイルを割り当てます。その際、ルールは `btn–` というプレフィックスに基づいて適用されるため、バリアント用のクラスは無視されてしまうのです。これを除外したい場合は、下の行にあるようにボタンに `.unrelate` クラスを追加してください。
Buttons with .unrelate
Links
Links are the one element Color Assignments leaves alone by default: the Link Color input for this background is blank on this install, and blank means a link keeps its global –link-color on any surface. The variants here set a light shade per link instead, which is the manual route until that input is filled.
「Color Assignments（配色設定）」において、デフォルトで唯一変更が加えられない要素が「リンク」です。今回のインストール環境では、この背景に対する「Link Color（リンク色）」の入力欄が空欄になっています。空欄の場合、リンクはどのサーフェス上でもグローバル設定の「–link-color」が適用されます。一方、ここで設定されているバリエーションでは、リンクごとに明るめの色調が指定されています。これは、当該入力欄に値が設定されるまでの間、手動で色を指定する手法をとっているためです。
bg–ultra-dark
Buttons
All six variants paint the same colour here, and that is ACSS working as designed. Automatic Color Relationships assign one Button Style per background context, and the rule matches on the btn– prefix, so the variant class is never read. Add .unrelate to a button to opt it out, as in the row below.
これら6つのバリアントはすべて同じ色で表示されますが、これはACSSが意図した通りの動作です。「Automatic Color Relationships（自動カラー関連付け）」機能は、背景のコンテキストごとに1つのボタン・スタイルを割り当てます。その際、ルールは `btn–` というプレフィックスに基づいて適用されるため、バリアント用のクラスは無視されてしまうのです。これを除外したい場合は、下の行にあるようにボタンに `.unrelate` クラスを追加してください。
Buttons with .unrelate
Links
Links are the one element Color Assignments leaves alone by default: the Link Color input for this background is blank on this install, and blank means a link keeps its global –link-color on any surface. The variants here set a light shade per link instead, which is the manual route until that input is filled.
「Color Assignments（配色設定）」において、デフォルトで唯一変更が加えられない要素が「リンク」です。今回のインストール環境では、この背景に対する「Link Color（リンク色）」の入力欄が空欄になっています。空欄の場合、リンクはどのサーフェス上でもグローバル設定の「–link-color」が適用されます。一方、ここで設定されているバリエーションでは、リンクごとに明るめの色調が指定されています。これは、当該入力欄に値が設定されるまでの間、手動で色を指定する手法をとっているためです。
The background utility classes and the assignment tokens behind them. A .bg–* class does more than paint: Automatic Color Relationships assign text, heading, link and button treatment for that context, which is why this guide's own panels carry these classes instead of colours.
背景用ユーティリティクラスと、それらに紐づくアサインメントトークンについて解説します。「.bg–*」クラスの役割は単に背景色を適用することだけではありません。「自動カラーリレーションシップ（Automatic Color Relationships）」の仕組みにより、その背景色に応じたテキスト、見出し、リンク、ボタンのスタイルが自動的に割り当てられます。本ガイドのパネルに特定の色指定ではなくこれらのクラスが適用されているのも、まさにこのためです。
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
このサーフェス上のテキストカラーは『自動カラー連動』によって決定され、ガイドによる設定は反映されません。
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
このサーフェス上のテキストカラーは『自動カラー連動』によって決定され、ガイドによる設定は反映されません。
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
このサーフェス上のテキストカラーは『自動カラー連動』によって決定され、ガイドによる設定は反映されません。
Text on this surface is assigned by Automatic Color Relationships, not set by the guide.
このサーフェス上のテキストカラーは『自動カラー連動』によって決定され、ガイドによる設定は反映されません。
The tokens the classes resolve to. –text-color, the body default, is –text-dark-muted, a translucent mix, not –text-dark; opaque body text is an explicit override.
各クラスが最終的に適用するトークンについて説明します。本文のデフォルト色である `–text-color` は、不透明な `–text-dark` ではなく、半透明な色合いを混ぜ合わせた `–text-dark-muted` となっています。不透明な本文テキストにする場合は、明示的な上書き設定が必要です。
There is no .bg–primary in ACSS 4: the contextual classes are exactly the four assigned ones above, and everything else went variable-first when the utility class modules were removed. A brand surface is painted with the token directly, and because no class is involved, Automatic Color Relationships do not fire: foreground and background are picked by hand, as in the strip below.
ACSS 4には `.bg–primary` は存在しません。コンテキストに応じたクラスは上記の4つのみであり、ユーティリティクラスのモジュールが廃止されたことに伴い、それ以外の要素はすべて「変数（トークン）を優先する」方式に移行しました。ブランドサーフェスにはトークンが直接適用されるため、クラスを介さず、したがって「自動カラー関係（Automatic Color Relationships）」の機能も作動しません。つまり、下のストリップにあるように、前景と背景の色は手動で選択されることになります。
No class, no relationship: this pairing is a manual choice. Both tokens are shades from one family on purpose, shades invert together under a colour scheme, so the pairing holds in light and dark. Pairing a shade with the main colour does not: the shade flips, the main colour stays, and the two meet.
クラスや関連性によるものではなく、この組み合わせは意図的な選択によるものです。両方のトークンは意図的に同じ系統の色調（シェード）で構成されており、カラースキームの切り替えに伴って共に反転するため、明・暗どちらのモードでもその組み合わせが成立します。一方、メインカラーと色調を組み合わせた場合はそうはいきません。色調は反転するもののメインカラーは変化しないため、両者の関係性が変わってしまうからです。
The focus system is context-aware: –focus-color is reassigned by every background relationship, so the ring on a dark panel is not the ring on the page. Every link and button in this guide is a real target, so the whole document is keyboard-testable.
フォーカスシステムはコンテキストを認識します。`–focus-color` は背景との関係に応じて再設定されるため、ダークなパネル上のフォーカスリングと、ページ上のフォーカスリングは異なる見た目になります。このガイド内のすべてのリンクやボタンは実際に機能する要素であり、ドキュメント全体をキーボードで操作してテストすることが可能です。
Tab through the row below. The ring is ACSS's own focus styling, a specimen; the guide adds nothing to it.
下の行をTabキーで移動してみてください。そのリングはACSS独自のフォーカス・スタイリングの一例であり、ガイド自体はそれに何も付け加えていません。
ACSS wraps its motion output in prefers-reduced-motion guards, and this guide follows the same signal: smooth scrolling and the scheme switch transition turn off when the OS asks for less motion. There is nothing to see here unless your system requests it, which is the point.
ACSSはモーションを伴う出力を`prefers-reduced-motion`（視差効果の低減）設定に対応させており、本ガイドもその設定に従います。つまり、OS側で「視差効果の低減」が求められている場合、スムーズスクロールやカラースキーム切り替え時のアニメーションは無効化されます。システム側から要求されない限り、これらの動きが目に見えることはありません。それこそが、この仕組みの狙いなのです。