ブレークポイントの作業
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
異なる画面サイズに応じてコンテンツやレイアウトを変更するレスポンシブデザインを作るチームにとっては、各画面サイズ、つまり各ブレークポイントまたはブレークポイントコレクションごとに新しいコンポーネントバージョンを作成するのがベストプラクティスです。スタイルライブラリで既に利用可能なブレークポイント設定を適用したり、カスタムブレークポイントを作成して、特定の画面幅でコンポーネントがどのようにレンダリングされるかを確認できます。
特定のブレークポイント用の設計バージョン
画面サイズごとに異なるレンダリングを作成するには、それぞれの画面サイズごとに新しいバージョンを作成する必要があります。元のコンポーネントやバージョンのいずれかを複製することで、素早くバージョンを作成できます。特定のバージョンに変更を加えた場合、選択したすべてのブレークポイントサイズに適用されます。
定義されたブレークポイント、またはブレークポイント群のバージョンを作成するには:
-
Componentビルダーで、必要なだけ複数のバージョンでコンポーネントをクローンするには、
をクリックしてからDuplicate versionをクリックしてコンポーネントをクローンします。このステップは必要なだけ繰り返します。 -
各バージョンではBreakpoint settings
をクリックし、矢印 
をクリックすると、可能なブレークポイントのドロップダウンメニューが開きます。 -
このバージョンで許可したいブレークポイントを選択してください。例えば、extra smallとsmall。このドロップダウンメニューでは、少なくとも1つのブレークポイントを選択しなければなりません。ドロップダウンメニューでブレークポイントを選択しないことは、このコンポーネントのすべてのブレークポイントを許可するのと同じです。
-
その後、指定した画面幅に合わせて、バージョンを修正・スタイリングして望むようにできます。
Breakpointsは編集には影響しません。なぜなら、コンポーネントバージョンのスタイリング、コンテンツ変更、レイアウトの更新は、プレビュー設定に関係なくすべての画面サイズやブレークポイントに適用されるからです。ブレークポイントプレビューはレンダリングサイズのみを変更し、ブレークポイントごとに異なる設定状態を保存することはありません。
異なるブレークポイントでコンポーネントを表示
特定の画面幅でコンポーネントがどのようにレンダリングされるかを確認できます。
デフォルトのブレークポイントは以下の通りです:
-
Extra extra large:1400%以上
-
Extra large: 1200 pxから1400 px
-
Large: 992 pxから1199 pxへ
-
Medium: 768 pxから991 px
-
Small: 576 pxから767 px
-
Extra small:576ピクセル未満
これらのサイズは ブートストラップで定められた慣習に従い、スタイルライブラリで定義されています。各ブレークポイントをクリックすると、キャンバスはこれらのデフォルトサイズで縮小または拡大されます。
定義されたブレークポイントでコンポーネントを表示するには:
-
Componentビルダーでブレークポイントバー
をクリックします。 -
コンポーネントの上方で、そのコンポーネントを可視化したいブレークポイントボタンのいずれかをクリックします。