ビルドスタイルルール
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Componentビルダーでは、スタイルルールはStylesビルダーで作る二次的な建築資産です。スタイルルールはデザインプリミティブを拡張し、それらを要素に適用できるようにします。タイポグラフィー、装飾、フィル、スペースなどのルールは、以前スタイルライブラリの基本に追加した 基本 (フォントと色)を使用しています。
ルールに カスタムCSSスタイル を追加することもできます。ルールにカスタムCSSを追加すると、そのスタイリング機能はカスタマイズされたルールで作成された要素やテーマに伝播します。
コレクション内のすべてのスタイルルールを整理でき、既存のデフォルトコレクションも含めて管理できます。
タイポグラフィルールの追加
タイポグラフィは、各フォントタイプごとに定義されたサイズを持つフォントの拡張です。
新しいタイポグラフィを追加する:
-
スタイルビルダーの左ペインで、Typographiesをクリックしてから
をクリックします。 -
タイポグラフィの名前(例: Medium headline)を入力し、そのタイポグラフィが属するCollectionをクリックします。
-
Font typeタブでフォントのいずれかをクリックします。表示されるのはフォントBasicsのみです。Basicsでまだ少なくとも1つのフォントを定義していなければ、デフォルトのフォントを使ってタイポグラフィを作成できます。
-
Settingsタブでは、フォントサイズ、行高、文字間隔、段落間隔、アイコンサイズ、ケーススタイルの値を設定できます。異なるブレークポイントごとに値を個別に設定できます。
-
タイポグラフィをスタイルライブラリに追加するにはSaveクリックしてください。
装飾ルールの追加
ブロックに視覚的なアクセントを加えるには、境界線や影を定義してスタイルDecorationsできます。
新しい装飾を加える:
-
スタイルビルダーの左ペインで、Decorationsをクリックしてから
をクリックします。 -
その勲章の名前を入力し、その勲章の属するCollectionをクリックします。
-
Corner radiusタブで、要素やブロックの形状に丸みを帯びた角を許可するかを指定します。
-
Drop shadowタブで、要素やブロックの形状に影を追加するかどうかを定義します。
-
Borderタブで、要素やブロック形状にボーダーシャドウを追加してください。
-
Saveをクリックして装飾品をスタイルライブラリに追加してください。
フィルルールを追加
カラー プリミ ティブを定義したら、カードやボタン、セクションに背景色を追加するための塗りつぶしルールを作成できます。
新しいフィルを追加するには:
-
スタイルビルダーの左ペインで、Fillsをクリックしてから
をクリックします。 -
埋め立ての名前を入力し、埋め戻しの属するCollectionをクリックしてください。
-
Colorタブでは、ドロップダウンメニューから以前に選択した色をクリックできます。また、グラデーションの角度や色の不透明度を様々なオプションで、塗りつぶし用のグラデーションを作成することも可能です。
-
Effectsタブで、塗りつぶしのぼかし強度と不透明度を定義します。
-
Saveをクリックして、Stylesライブラリにフィルを追加します。
間隔ルールの追加
スペーシングは異なるグリッド配置のプリセットを表し、CSS Flexible Box LayoutまたはFlexboxを利用しています。
間隔の定義を始めるには:
-
スタイルビルダーの左ペインで、Spacingsをクリックしてから
をクリックします。 -
間隔の名前を入力し、その間隔が属するCollectionをクリックします。
-
Spacingタブでは、ピクセル数、パーセンテージ、エミング、レム数でパディング値を定義できます。以下のいずれかの選択肢を選択できます:
-
Sync - すべてのパディングとギャップの値が同じにされる。
-
Vertical/Horizontal - 上下または水平間隔のパディング値を1つの値に組み合わせることで対称性を提供します。
-
All custom - 最も多くのパディングとギャップ値をカスタマイズできます。
3つの構成すべてに値を設定するのがベストプラクティスです。そうすることで、Component builderで自分のコンポーネントに使いたいものを簡単に選べます。
-
-
Saveをクリックして、スタイルライブラリに間隔ルールを追加してください。