---
title: "ビルドスタイルルール"
slug: "build-style-rules"
abstract: "以前定義したフォントや色を使ってタイポグラフィー、装飾、フィル、スペースなどのスタイルルールを作成し、カスタムCSSも含めてブランドに合ったユニークなデザインを作り出しましょう。"
---
# ビルドスタイルルール

コンポーネントビルダーでは、スタイルルールはスタイルビルダーで作成する二次的な建築資産です。スタイルルールはデザインプリミティブを拡張し、それらを要素に適用できるようにします。タイポグラフィー、装飾、塗りつぶし、スペースなどのルールは、以前スタイルライブラリの基本に追加した [基本](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/define-style-basics.html "Define style basics") (フォントや色)を使用します。

また、[ルールにカスタムCSSスタイル](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/add-custom-fonts-and-styles.html "Add custom fonts and styles") を追加することもできます。ルールにカスタムCSSを追加すると、そのスタイリング機能がカスタマイズされたルールで作成された要素やテーマに伝播します。

コレクション内のすべてのスタイルルールを整理でき、既存のデフォルトコレクションも含めて管理できます。

## タイポグラフィルールの追加

タイポグラフィは、各フォントタイプごとに定義されたサイズを持つフォントの拡張です。

新しいタイポグラフィを追加する:

1.  スタイルビルダーの左側ペインで **「タイポグラフィー**」をクリックし、その後「:mdiPlusCircle:」をクリックします。
2.  タイポグラフィの名前(例: *Medium headline*)を入力し、タイポグラフィが属する **コレクション** をクリックします。
3.  フォント **タイプ** タブで、フォントのいずれかをクリックしてください。表示されるのは [**Basics**](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/define-style-basics.html#UUID-daf0c3ad-c42f-ccf8-4628-12d1a89ceb79_section-idm4530665211764833249019058352 "Add a Google font") フォントのみです。まだ **Basics** で少なくとも1つのフォントを定義していなければ、タイポグラフィを作成するためのデフォルトフォントが利用可能です。
4.  **設定**タブでは、フォントサイズ、行高、文字間隔、段落間隔、アイコンサイズ、ケーススタイルの値を設定できます。異なるブレークポイントごとに値を個別に設定できます。
5.  タイポグラフィをスタイルライブラリに追加するには **「保存** 」をクリックしてください。

## 装飾ルールの追加

ブロックに視覚的なアクセントを加えるには、**装飾** スタイルで境界や影を定義できます。

新しい装飾を加える:

1.  スタイルビルダーの左側ペインで **「Decorations**」をクリックし、その後「:mdiPlusCircle:」をクリックします。
2.  装飾品の名前を入力し、その装飾品が属する **コレクション** をクリックします。
3.  **コーナー半径**タブで、要素やブロックの形状に丸みを帯びる角を許可するかを指定します。
4.  **Dropshadow**タブで、要素やブロックの形状に影を追加するかどうかを定義します。
5.  **ボーダー**タブで、要素やブロック形状にボーダーシャドウを追加してください。
6.  「 **保存** 」をクリックして装飾をスタイルライブラリに追加してください。

## フィルルールを追加

カラー [プリミ](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/build-style-rules.html "Build style rules") ティブを定義したら、カードやボタン、セクションに背景色を追加するための塗りつぶしルールを作成できます。

新しいフィルを追加するには:

1.  スタイルビルダーの左ペインで **「Fills**」をクリックし、その後「:mdiPlusCircle:」をクリックします。
2.  埋めてる名前を入力し **、埋める** コレクションをクリックしてください。
3.  「 **カラー」** タブでは、ドロップダウンメニューから以前に選択した色をクリックできます。また、グラデーションの角度や色の不透明度を調整するカラーグラデーションを作成することもできます。
4.  **エフェクト**タブで、フィルのぼかしの強度と不透明度を定義します。
5.  「 **保存** 」をクリックして、スタイルライブラリに塗りつぶしを追加します。

## 間隔ルールの追加

スペーシングは異なるグリッド配置のプリセットを表し、CSSのフレキシブルボックスレイアウト(Flexbox)を利用しています。

間隔の定義を始めるには:

1.  スタイルビルダーの左側ペインで「 **間隔**」をクリックし、その後「mdiPlusCircle:」をクリックします。
    
2.  間隔の名前を入力し、その間隔が属する **コレクション** をクリックしてください。
    
3.  スペース **タブでは** 、ピクセル数、パーセンテージ、エミング、レム数でパディング値を定義できます。以下のいずれかのオプションを選択できます:
    
    -   **同期** - すべてのパディングとギャップを同じ値にします。
    -   **垂直/水平** - 上下または水平間隔のパディング値を1つの値にまとめて対称性を提供します。
    -   **すべてカスタム** - 最も多くのパディングやギャップ値をカスタマイズできます。
    
    コンポーネントビルダーで選びやすいように、3つの構成すべてに値を設定するのがベストプラクティスです。
    
4.  「 **保存** 」をクリックして、スタイルライブラリに間隔ルールを追加してください。