ブレイクポイントとは
ブレイクポイントは、レスポンシブデザインで画面サイズに応じてレイアウトを切り替えるための基準となる画面幅です。設定した画面幅を境に、ボックスのサイズや色などのスタイルを変更できます。
プロジェクト単位でブレイクポイントの追加・編集が可能です。設定内容はプロジェクト内で共通となり、ページごとに変更することはできません。
各ブレイクポイントで調整したスタイルは、エディタ上で以下の色でハイライト表示されます：
ブレイクポイント | ハイライト色 |
デフォルト（PC） | ハイライトなし |
スモール | 青 |
タブレット | 緑 |
モバイル | オレンジ |
ミニ | ピンク |
ブレイクポイントの切り替え方法
ブレイクポイントの切り替えボタンは常に表示されていません。下記手順でボタンを表示し、切り替えます。
手順
エディタで作業エリア外（白いスクリーンの外側）をクリックします。
表示されるブレイクポイント切り替えボタンで、確認したい画面サイズを選択します。
ブレイクポイントの追加方法
初期状態では、デフォルトに加えて「タブレット: 840px」「モバイル: 540px」の2つのブレイクポイントが設定されています。これらに加えて「スモール」と「ミニ」が追加できます。
手順
エディタで作業エリア外（白いスクリーンの外側）をクリックします。
上部スタイルバーの[レスポンシブ]メニュー右端の三点リーダーにカーソルを当てて、[ブレイクポイントの編集]をクリックします。
追加したいブレイクポイントの[＋]マークをクリックします。
[編集を完了]ボタンをクリックして変更を保存します。
ブレイクポイントの編集方法
下記の手順で各ブレイクポイントの数値を調整します。
手順
エディタで作業エリア外（白いスクリーンの外側）をクリックします。
上部スタイルバーの[レスポンシブ]メニュー右端の三点リーダーにカーソルを当てて、[ブレイクポイントの編集]をクリックします。
ブレイクポイント幅を下記どちらかの方法で編集します。
変更したいブレイクポイントの数値を直接入力
画面上の縦ラインをドラッグして調整
[編集を完了]ボタンをクリックして変更を保存します。
ブレイクポイントの削除方法
下記の方法で、ブレイクポイントが削除できます。なお、「デフォルト」のブレイクポイントは削除することができません。
手順
エディタで作業エリア外（白いスクリーンの外側）をクリックします。
上部スタイルバーの[レスポンシブ]メニュー右端の三点リーダーにカーソルを当てて、[ブレイクポイントの編集]をクリックします。
削除したいブレイクポイントにカーソルを合わせます。 表示される右上の[×]をクリックします。
