---
title: "スタイルの基本を定義する"
slug: "define-style-basics"
abstract: "スタイルライブラリの構築は原子設計プロセスに従い、フォント、色、グラフィック、ブレークポイントなどのプリミティブや基本を定義することから始まり、これらはルールや要素、最終的にはテーマに伝播されます。"
---
# スタイルの基本を定義する

コンポーネントビルダーでは、スタイルデザインは基本的なプリミティブの定義から始まります。これらのプリミティブにはフォント、色、グラフィック、カスタムブレークポイントが含まれており、これらは **「ベーシック」** セクションで見つけることができます。

## Googleフォントを追加する

タイポグラフィはブランド認知に重要であり、テキストコンテンツはほぼすべてのコンポーネントに含まれているため、すべてのスタイルで使えるフォントを定義しなければなりません。

スタイルライブラリにGoogleフォントを追加するには:

1.  スタイルビルダーの左側ペインで **「フォント**」をクリックします。
2.  ページ上部の **フォントライブラリを追加** をクリックします。
3.  フォント **タイプ** 欄で **Google**をクリックしてください。
4.  **Googleフォントファミリー**のドロップダウンメニューで、該当するフォントをクリックしてください。
5.  各スタイルオプションのチェックボックスを選択して、希望するフォントスタイルを選びます。

![Screenshot of a Google font family in the Styles builder](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/fonts.jpg)

フォントスタイルが有効化された後は、タイ **[ポグラフィー](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/build-style-rules.html#UUID-e2a2648e-3e30-6ee6-3bdc-8c18f6d1e60e_section-idm4530665167881633249035984124 "Add typography rules")**を作成するために使えます。

カスタムフォントの追加方法は [こちらで](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")学べます。

## 色を加える

ブランドに使いたい色を定義し、異なるコレクション内で整理できます。

新しいカラーコレクションを作成するには:

1.  スタイルビルダーの左ペインで **「カラーズ**」をクリックします。
2.  ページ上部の **「コレクションを追加** 」をクリックしてください。

コレクションに色を追加するには:

1.  カラーコレクションでは、:mdiPlusCircle:をクリックしてください。
2.  その色に固有のクラス名を付け、どのコレクションに属しているかを確認してください。
3.  例えば **HEX** や **RGB** など、希望する色入力をクリックして色の値を入力します。
4.  不透明度を設定しましょう。
5.  **「保存**」をクリックします。

![colors.jpg](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/colors.jpg)

カラーコレクションはスタイルルールで使用でき、各色をCSSに保存されてコンポーネントビルダーで使うことができます。CSS変数をコピーするには、スタイルライブラリでカラーにマウスを合わせて**CSS変数**をクリックします。

## ブレークポイントを追加

コンポーネントビルダーを使えば、自分でブレークポイントを作成し、コレクションに整理できます。ブレークポイント要素は各コレクション内で最大から小さいブレークポイントの順に並べ替えられます。

新しいブレークポイントコレクションを作成するには:

1.  スタイルビルダーの左側ペインで「 **ブレークポイント**」をクリックします。
2.  **コレクションを追加**をクリックします。
3.  例えば、 *Large*、 *Medium*、 *Small*など、コレクションに名前を付けてみてください。
4.  **「保存**」をクリックします。

各コレクションに必要なだけブレークポイントを追加できますが、ブレークポイント同士が交わらなければ可能です。

コレクションにブレークポイントを追加するには:

1.  ブレークポイントコレクションで:mdiPlusCircle:をクリックしてください。
2.  例えば、ブレークポイントに名前を付けて「 *エクストララージ*」としましょう。
3.  ドロップダウンメニューで、ブレークポイントが属するコレクションをクリックします。
4.  ブレークポイントの開始と終了のピクセル値を入力します。ブレークポイント同士が交差しないように注意してください。ウェブページでレスポンシブバージョンのコンポーネントを使う際に問題が生じます。
5.  **「保存**」をクリックします。

![Screenshot of a collection of breakpoints in the Styles library](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/breakpoints.jpg)

スタイルライブラリで構築されたすべてのブレークポイントはコンポーネントビルダーで利用可能で、特定のデバイスタイプや特定の画面幅でのレンダリングをプレビューできます。閲覧者の画面サイズに応じてコンテンツやレイアウトを変更するレスポンシブデザインを作るチームにとっては、各画面サイズごとに新しいコンポーネントバージョンを作成し、必要なブレークポイントをすべてスタイルライブラリに用意するのがベストプラクティスです。