Wix Studio エディタ：ブレイクポイント全体をデザインする
読了時間：5分
Wix Studio エディタでは、ブレイクポイントごとにサイトをカスタマイズできるため、常に見栄えの良いサイトにすることができます。ブレイクポイントとは画面サイズの範囲のことで、訪問者が使用する傾向のある画面とデバイス（例：タブレット、モバイルなど）を表します。
デスクトップで作成したデザインは、タブレットやモバイルにも適用されます。ただし、オーバーライドを作成して、より小さな画面にデザインを合わせてることができます。上部のブレイクポイントアイコンをクリックして始めましょう。
ヒント：
クライアントのサイトのすべてのページの各ブレイクポイントでデフォルトの編集サイズ（画面の幅）を設定できます。
Wix Studio アカデミーにアクセスして、その他の Wix Studio ウェビナー、チュートリアル、コースをご覧ください。
ブレイクポイントを定義する
Wix Studio エディタには 3つのブレイクポイントが組み込まれており、いつでもカスタマイズして再定義することができます：
- デスクトップ：1001px 以上
- タブレット：751px - 1000px
- モバイル：320px - 750px
最大 3つのブレイクポイントを追加して、特定の画面サイズに合わせてデザインをより正確にすることができます。
サイトページごととマスターセクションごとに個別にブレイクポイントを定義します。つまり、マスターセクションとマスターセクションのページには、完全に異なるブレイクポイントを設定することができます。
たとえば、以下のページでは 5つのブレイクポイントが定義されています：
... そのページのマスターヘッダーには 3つのブレイクポイントが定義されています：
ヒント：
サイト訪問者に表示されるブレイクポイントは、ビューポート幅によって異なります。たとえば、iPad Pro ユーザー（例：1024px 幅）には、デスクトップブレイクポイント（1001px 以上）が表示されます。各モードでは、画面幅が異なり、ブレイクポイントの範囲も異なるため、縦向きモードまたは横向きモードによっても違ってきます。
カスケードデザイン
Wix Studio エディタでは、複数のブレイクポイントをデザインする際にカスケードの概念を使用します。大きなブレイクポイントに加えた変更は、小さなブレイクポイントにまで及びますが、小さなブレイクポイントでの変更は大きなブレイクポイントには影響しません。
たとえば、デスクトップで紫色にデザインされたボタンは、タブレットとモバイルでは自動的に紫色になります。モバイルで色を変更しても、タブレットとデスクトップではボタンは紫色のままです。
注意：
一部の変更は、すべてのブレイクポイントに適用されます。たとえば、要素を別のものに変更または削除した場合などです。これらの変更点の詳細については、以下のセクションをご覧ください。
追加のデスクトップブレイクポイントを作成した場合：
2番目に最大のブレイクポイントを削除すると、すでにオーバーライドを作成している場合でも、最大のブレイクポイントの設定が小さなブレイクポイントに自動的に適用されます。たとえば、最大のブレイクポイントでのみ非表示にされていた要素は、小さなブレイクポイントでも非表示になります。この問題を解決するには、オーバーライドを再度作成してください。
すべてのブレイクポイントに適用される変更
一部のアクションは、すべてのブレイクポイントに自動的に適用され、特定のビューポートにはカスタマイズできません。
データの変更
要素のコンテンツを編集すると、実質的にそのデータも変更されます。たとえば、要素に適用されているリンクや画像のソースを変更すると、すべてのブレイクポイントに適用されます。
もう 1つの例は、ページの要素を置き換えたり削除したりする場合です。要素はすべてのブレイクポイントで自動的に置き換え / 削除されます。
ヒント：
特定のブレイクポイントから要素を非表示にすることができます。該当するブレイクポイントに移動し、要素を右クリックして「非表示」を選択してください。
構造の変更
ページの階層における要素の場所の変更です。たとえば、要素をスタックしたり、要素を別のセルに移動させたりすると、ページ構造が変更され、すべてのブレイクポイントに反映されます。
ブレイクポイントでオーバーライドを作成する
オーバーライドは、特定のブレイクポイントで要素のデザインを変更したときに発生します。つまり、その上の大きなブレイクポイントからデザイン値を引き出さなくなることを意味します。ただし、これらのオーバーライドは、より小さなブレイクポイントにまで及びます。
作成できるオーバーライドには 2種類あります：
- デザイン：色、枠線、フォントなど、要素のプロパティを変更します。
- レイアウト：別の親要素に移動しない限り、要素の位置とサイズを変更します。
ヒント：
Wix Studio エディタの要素とセクションには、レスポンシブ動作が組み込まれています。これは、小さなブレイクポイントでのサイズ変更方法を制御するため、すべて手動で設定する必要はありません。
特定のブレイクポイントのデザインオーバーライドを削除する
要素のデザインとレイアウトは、最大のブレイクポイントでいつでもそのプロパティにリセットできます。
小さなブレイクポイント上の要素のプロパティは影響を受けません。影響を受けるのは元に戻す要素を含むブレイクポイントだけです。たとえば、タブレットでオーバーライドを削除しても、モバイルには影響しません。
ブレイクポイントのデザインオーバーライドを削除する方法：
- 該当する要素を選択します。
ヒント：キャンバス上、またはレイヤーパネルで直接選択できます。 - 「その他のアクション」アイコン
をクリックします。 - 「オーバーライドを削除」をクリックします。
ヒント：
レスポンシブ AI ツールを使用して、すべてのブレイクポイントのセクションのレイアウトをすばやく最適化することができます。