要素にルールを適用する

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

また、要素にカスタムCSSスタイル を追加することもできます。カスタムCSSを要素に追加すると、そのスタイリング機能はカスタマイズされた要素で作成されたテーマに伝播します。

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

  • Text elementsには異なる見出し、段落テキスト、リストが含まれます。すべてのテキスト要素はタイポグラフィやカラー設定を適用できます。

  • Block elementsにはセクション、カード、コンテナが含まれます。ブロック要素は親要素(Section)の水平空間全体を占め、垂直空間はその内容物の高さに等しいです。Block elementsはフィル、装飾、間隔設定を取ることができます。

  • Inline elementsにはボタン、バッジ、チップが含まれます。Inline elementsは、その内容によって定義された領域のみを占める非テキスト要素です。ブロック要素と同様に、インライン要素もフィル、装飾、間隔設定を取ることができます。Inline elementsはタイポグラフィやリンク設定も取り組むことができます。

リミットスタイルルール

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

Screenshot of the selector used to limit style rules

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

  • Allow all - スタイルルールのすべての制限を取り除くこと。

  • Only selected - 選択された要素のみを許可すること。

  • None - カスタムCSSを使えるようにするため。

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

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

各コレクションで作成されたText elementsには対応する要素タグが付与されます。例えば、Heading 1にテキスト要素を追加すると自動的にH1タグが付与され、そのように続きます。

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

  1. スタイルビルダーの左側ペインでText elementsをクリックします。

  2. 追加したいテキスト要素の種類はAdd styleをクリックしてください。

  3. テキスト要素の名前を入力してください。オプションで説明文を入力してください。

  4. TypographyタブとColor and link styleタブで、このテキスト要素に使いたいスタイルを選択します。

  5. クリックSave。

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

Inline elementsにはボタン、バッジ、リンクが含まれます。

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

  1. スタイルビルダーの左側ペインでInline elementsをクリックします。

  2. スタイルを追加したい要素タイプまでスクロールします。

  3. クリックAdd style。

  4. 属性スタイルの名前を入力してください。オプションで説明を追加することもできます。

  5. Typography、Spacing、Decoration、Fill、Text colorタブで、このインライン要素で利用したいスタイルだけを選択します。

  6. クリックSave。

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

Block elementsにはセクション、カード、コンテナが含まれます。コンテナはスタイリングされておらず、中身を保持しています。

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

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

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

  1. スタイルビルダーの左側ペインでBlock elementsをクリックします。

  2. スタイルを追加したい要素タイプまでスクロールします。

  3. クリックAdd style。

  4. ブロック要素の名前を入力してください。オプションで説明を追加することもできます。

  5. Fill、Decoration、Spacingタブでは、このブロック要素に使いたいスタイルだけを選択します。

  6. クリックSave。

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

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

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

  1. スタイルビルダーの右上でAdd custom typeをクリックします。

  2. カスタムブロック要素の名前を入力してください。オプションで説明を追加することもできます。

  3. Saveカスタム要素タイプです。

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

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、