> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# カスタムCSS

> カスタムCSSを追加して、組み込みのデザイン設定を超えてAftersell Cartを細かく調整します。

組み込みの[デザイン設定](/ja/aftersell/cart/design-settings)では足りない場合、独自の**カスタムCSS**を追加してカートをスタイリングできます。

<div id="where-to-add-it">
  ## 追加する場所
</div>

カートエディターで**Cart settings → Custom CSS**を開きます。CSSは**カート全体に適用され**、カートのベーススタイルの**後に**読み込まれるため、あなたのルールが優先されます。

<div id="target-public-classes-only">
  ## パブリッククラスのみを対象にする
</div>

カートのスタイリングには**パブリックな`cart-external-*`クラス**を使用してください。エディターはこれらをオートコンプリートし、それ以外に対しては警告を表示します。

* **`cart-external-*`**：パブリックでサポートされている対象です。これらを使用してください。それ自体にはスタイルがなく、あなたのCSSがフックするためだけに存在します。
* **`cart-internal-*`**：カート自身の内部構造で、組み込みのスタイリングがすべてここにあります。これらに対するセレクターはエディターがエラーとしてフラグを立てます。既存のすべてのカートが依存しているため軽々しく変更されることはありませんが、これらはあなたとの契約ではなくカート側が変更できるものです。代わりに対応する`cart-external-*`を通じてスタイルを変更してください。
* エディターが認識しないその他の`cart-*`クラスは警告としてフラグが立てられます。

<Note>
  マークアップ内には`cart-internal-*`クラスが表示されます。各ブロックのデフォルトの[カスタムテンプレート](/ja/aftersell/cart/custom-templates)にも含まれます。これは想定どおりです。これらがブロックに組み込みの外観を与えているものだからです。ここでのルールは、カートがレンダリングするクラス名ではなく、このパネルで**あなたが書くセレクター**についてのものです。

  ブロックのDOM構造を変更するカスタムテンプレートを書く場合は、どのクラス名を残しどれを外すべきかについて[カスタムテンプレートのスタイリング](/ja/aftersell/cart/custom-templates#styling-a-custom-template)を参照してください。
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM：カートは自己完結している
</div>

ストアフロントでは、カート全体が独自の**shadow DOM**内でレンダリングされます。これは次のことを意味します。

* テーマのCSSはカートに漏れ込まず、カートのCSSも外に漏れ出ないため、カスタムCSSは自動的にカートにスコープされ、サイトの他の部分と衝突しません。
* セレクターは**カート内部の**要素とクラスを参照する必要があります。カート外のページ要素を対象にしたセレクターは内部に届きません。

同じ境界はJavaScriptにも適用されます。`document.querySelector`もドロワーの中を見ることはできません。カート要素にアクセスするスクリプトは[`shadowRoot`](/ja/aftersell/cart/sdk-overview#shadowroot)を経由する必要があり、同じ`cart-external-*`クラスを対象にします。

<div id="when-to-use-design-settings-instead">
  ## 代わりにデザイン設定を使うべきとき
</div>

色、角丸、余白、幅については、組み込みの[デザイン設定](/ja/aftersell/cart/design-settings)の方がシンプルで安全なので、カスタムCSSはデザイン設定でカバーできないものにのみ使用してください。

<div id="where-to-go-next">
  ## 次に読むべきページ
</div>

* **[デザイン設定](/ja/aftersell/cart/design-settings)**：組み込みのスタイリングコントロールで、最初に試すべきものです。
* **[カスタムテンプレート](/ja/aftersell/cart/custom-templates)**：CSSだけでは実現できない場合に、ブロックのマークアップを完全に置き換えます。
* **[Cart SDK](/ja/aftersell/cart/sdk-overview)**：外観ではなく動作のために。