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