---
title: "要素にルールを適用する"
slug: "apply-rules-to-elements"
abstract: "コンポーネントビルダーでは、特定の要素に適用できるスタイルルールを定義できます。"
---
# 要素にルールを適用する

コンポーネントビルダーでは、基本的な色、フォント、グラフィック、ブレークポイントをスタイルライブラリに追加し、それらをスタイルルールにまとめた後、どのスタイルルールを特定の要素に適用できるかを定義する必要があります。これにより、コンポーネントビルダーに組み込まれているスタイルライブラリ内で、ブランドに合ったカスタマイズされたスタイルのみを選択できるようになります。

また、[要素にカスタム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を要素に追加すると、そのスタイリング機能はカスタマイズされた要素で作成されたテーマに伝播します。

要素はテキスト要素、ブロック要素、インライン要素に分類されています。

-   テキスト要素には異なる見出し、段落テキスト、リストが含まれます。すべてのテキスト要素はタイポグラフィや色設定を適用できます。
-   ブロック要素にはセクション、カード、コンテナが含まれます。ブロック要素は親要素(セクション)の水平空間全体を占め、垂直空間はその内容物の高さに等しいです。ブロック要素はフィル、装飾、間隔設定を取ることができます。
-   インライン要素にはボタン、バッジ、チップが含まれます。インライン要素は、内容によって定義された空間のみを占める非テキスト要素です。ブロック要素と同様に、インライン要素は塗りつぶし、装飾、間隔設定も取ることができます。インライン要素はタイポグラフィやリンク設定も取ることができます。

## リミットスタイルルール

各要素には適用できる独自のスタイルルールのリストがあります。各スタイルルール内には、その要素に適用できるルールを制限できるセレクターがあります。

![Screenshot of the selector used to limit style rules](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/none.png)

利用可能なスタイルルールを選択するには、以下をクリックしてください:

-   **すべての - が** スタイルルールの制限をすべて取り除くことを許可してください。
-   **選択のみ** - 選択された要素のみを許可します。
-   **いない** - カスタムCSSを使えるようにするためだ。

## テキスト要素、スタイルとタグを追加する

テキスト要素には6つのデフォルトのコレクションがあります:見出し1、見出し2、見出し3、見出し4、見出し5、そして段落です。

各コレクションで作成されたテキスト要素には対応する要素タグが付与されます。例えば、見出し1にテキスト要素を追加すると自動的にH1タグが付与され、以下も同様です。

テキスト要素スタイルを追加するには:

1.  スタイルビルダーの左ペインで「 **テキスト要素**」をクリックします。
2.  追加したいテキスト要素の種類は「 **スタイルを追加** 」をクリックします。
3.  テキスト要素の名前を入力してください。オプションで説明文を入力してください。
4.  **タイポグラフィ**と**カラー、リンクスタイル**タブで、このテキスト要素に使いたいスタイルを選択します。
5.  **「保存**」をクリックします。

## インライン要素スタイルを追加してください

インライン要素にはボタン、バッジ、リンクが含まれます。

インライン要素にスタイルを追加するには:

1.  スタイルビルダーの左側ペインで「 **インライン要素**」をクリックします。
2.  スタイルを追加したい要素タイプまでスクロールします。
3.  「 **スタイルを追加」**をクリックします。
4.  元素スタイルの名前を入力してください。オプションで説明を追加してください。
5.  **タイポグラフィ**、**間隔**、**装飾**、**塗りつぶ**し、**テキストの各**タブで、このインライン要素に利用したいスタイルだけを選択します。
6.  **「保存**」をクリックします。

## ブロック要素のスタイルを追加

ブロック要素にはセクション、カード、コンテナが含まれます。コンテナはスタイルが不要で、コンテンツを保持します。

セクションは最も上位のブロックと考えられています。多くの場合、セクションはウェブサイト内の全幅パネルや、カラム内の最初のコンテナであることがあります。

カードは、セクション内で使われるネスト可能なボックスで、コンテンツの視覚的なフレーミングを提供します。

セクションやカードにスタイルを追加するには:

1.  スタイルビルダーの左側ペインで「 **ブロック要素**」をクリックします。
2.  スタイルを追加したい要素タイプまでスクロールします。
3.  「 **スタイルを追加」**をクリックします。
4.  ブロック要素の名前を入力してください。オプションで説明を追加してください。
5.  **Fill**、**Decoration**、**Spacing**のタブで、このブロック要素に使いたいスタイルだけを選択します。
6.  **「保存**」をクリックします。

## カスタムインラインおよびブロック要素の作成

デフォルトでは、インライン要素にはボタン、バッジ、リンクのコレクションが付属しています。ブロック要素にはデフォルトのセクションとカードのコレクションが付属しています。インライン要素とブロック要素の両方で、独自のカスタムブロック要素を作成することも可能です。

自分だけのカスタムブロックタイプを作成するには:

1.  スタイルビルダーの右上で「 **カスタムタイプを追加**」をクリックします。
2.  カスタムブロック要素の名前を入力してください。オプションで説明を追加してください。
3.  **カスタム要素タイプを保存してください。**

カスタムインラインやブロック要素にスタイルを追加できます。