スタイルの基本を定義する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Componentビルダーでは、スタイルデザインは基本的なプリミティブの定義から始まります。これらのプリミティブにはフォント、色、グラフィック、カスタムブレークポイントが含まれており、Basicsセクションで見つけることができます。
Googleフォントを追加してください
タイポグラフィはブランド認知に重要であり、テキストコンテンツはほぼすべてのコンポーネントに含まれているため、すべてのスタイルで使えるフォントを定義しなければなりません。
Googleフォントをスタイルライブラリに追加するには:
-
スタイルビルダーの左側ペインでFontsをクリックします。
-
ページ上部のAdd font libraryをクリックしてください。
-
Font type欄でGoogleをクリックします。
-
Google font familyドロップダウンメニューで、該当するフォントをクリックしてください。
-
各スタイルオプションのチェックボックスを選択して、希望するフォントスタイルを選びます。
フォントスタイルを有効にすると、それを使ってTypographiesを作成できます。
カスタムフォントの追加方法は こちらで学べます。
色を加える
ブランドに使いたい色を定義し、異なるコレクション内で整理できます。
新しいカラーコレクションを作成するには:
-
スタイルビルダーの左側ペインでColorsをクリックします。
-
ページ上部のAdd collectionをクリックしてください。
コレクションに色を追加するには:
-
カラーコレクションで
をクリックします。 -
その色に固有のクラス名を付け、どのコレクションに属しているかを確認してください。
-
例えば、HEXまたはRGBをしたい色入力をクリックし、色の値を入力します。
-
不透明度を設定しましょう。
-
クリックSave。
カラーコレクションはスタイルルールで使え、各色をCSSに保存されてComponentビルダーで使うことができます。CSS変数をコピーするには、スタイルライブラリの色にマウスを合わせてクリックCSS variables。
ブレークポイントを追加
Componentビルダーを使えば、自分でブレークポイントを作成し、それらをコレクションに整理できます。ブレークポイント要素は各コレクション内で最大から小さいブレークポイントへ並べ替えられます。
新しいブレークポイントコレクションを作成するには:
-
スタイルビルダーの左側ペインでBreakpointsをクリックします。
-
クリックAdd collection。
-
例えば、Large、Medium、Smallなど、コレクションに名前を付けてみてください。
-
クリックSave。
各コレクションに必要なだけブレークポイントを追加できますが、ブレークポイント同士が交わらなければ可能です。
コレクションにブレークポイントを追加するには:
-
ブレークポイントコレクションで
をクリックします。 -
例えば、ブレークポイントに名前を付けてみましょう。 Extra extra large。
-
ドロップダウンメニューで、ブレークポイントが属するコレクションをクリックします。
-
ブレークポイントの開始点と終了点のピクセル値を入力します。ブレークポイント同士が交差しないように注意してください。ウェブページでレスポンシブなコンポーネントを使う際に問題が生じます。
-
クリックSave。
スタイルライブラリに構築されたすべてのブレークポイントはComponentビルダーで利用可能で、特定のデバイスタイプや特定の画面幅でのレンダリングプレビューに利用できます。閲覧者の画面サイズに応じてコンテンツやレイアウトを変えるレスポンシブデザインを構築するチームにとっては、各画面サイズごとに新しいコンポーネントバージョンを作成し、スタイルライブラリに必要なすべてのブレークポイントを用意するのがベストプラクティスです。