メインコンテンツにスキップ

デザインエディタのスクリーン幅を変更する

スクリーンのドラッグ操作とツールバー操作の2つの方法で、任意のスクリーンサイズに切り替えてレスポンシブデザインの確認ができます。

今週アップデートされました

Point:Studioのレスポンシブデザイン

Studioでは、1つのページデザインを基準に、各種画面幅(ブレイクポイントごとにスタイルを調整してレスポンシブデザインを実現します。​
ボックスやテキストのレイアウト・外観・ポジションなどはブレイクポイントごとに変更できますが、画像やテキスト自体の内容、グルーピング構造は共通です。​

レスポンシブデザイン全体の考え方や関連機能については、次の記事も参考にしてください。

PCサイズでデフォルトのデザインを作成したあと、Baseボックスの幅を調整しながら、さまざまな端末での見え方を確認します。 スクリーン幅は、次の2通りの方法で変更できます。

方法 1:スクリーンの端をドラッグして変更する

  1. デザインエディタで対象ページを開きます。​

  2. スクリーン右端または左端にマウスカーソルを合わせます。​

  3. カーソルがドラッグ可能な状態に変わったら、そのまま左右にドラッグしてスクリーン幅を変更します。

方法 2:レスポンシブバーでスクリーンサイズを切り替える

  1. デザインエディタ下部のツールバーで、表示したい画面サイズに合わせたブレイクポイント([デフォルト]、[スモール]、[タブレット]、[モバイル]、[ミニ] など)をクリックします。​

  2. 選択したサイズに応じてスクリーン幅が切り替わります。


responsive SP mobile tablet small

こちらの回答で解決しましたか?