STUDIOのレスポンシブと設定のコツ
この記事ではSTUDIOのレスポンシブ設定の仕組みと、設定のコツをご紹介します。
Webサイトのレスポンシブ対応とは
レスポンシブ対応とは、デバイスの画面サイズや解像度に合わせてWebサイトのデザインやレイアウトを最適化することです。
以下の画像は、画面サイズに合わせて要素のサイズやレイアウトが調整されているWebサイト例です。
STUDIOレスポンシブ設定の仕組み
Webサイトのデザインやレイアウトが切り替わる画面幅である「ブレイクポイント」ごとにデザインやレイアウトを調整します。
ブレイクポイントは、エディタ上部で設定・調整できます。
※「画像」「テキスト文言」「グルーピング構造」はブレイクポイントごとに変化させることはできません。必要に応じて、ボックスの表示設定をご活用ください。
レスポンシブ設定の流れ
ブレイクポイントは一般的なPCサイズである「基準」を含み、最大5つ設定できます。
以下の画像で示すように、レイアウトやスタイルは基準からより小さな画面幅へ自動的に引き継がれるため、「基準でレイアウトを制作し、それを基にタブレットやモバイルのサイズへ調整する」流れでレスポンシブを設定します。
ブレイクポイントごとに別途指定したスタイルは、ハイライト表示されます。例えば、タブレットでは緑、モバイルではオレンジで表示されます。
レスポンシブ設定の解除方法
指定したブレイクポイントごとのスタイル指定は、個別に解除ができます。ハイライトされたスタイルにカーソルを当てると表示される「×」をクリックして解除します。
レスポンシブ設定のコツ
ブレイクポイントごとにレイアウトやデザインを調整する際に、役立つ機能などをご紹介します。
サイズ単位を意識して指定する
STUDIOではボックスのサイズ単位が指定できます。
例えば以下画像内の横に並ぶボックスの横幅を「%」で指定すると、画面幅に応じて自動でサイズが調整されるため、ブレイクポイント毎に「px」で数値を上書きするよりも効率よく設定できます。
他にも便利なサイズ単位が指定できます。サイズ単位の詳細については、以下の記事をご覧ください。
方向でボックスの並びを調整する
ボックスの並ぶ方向は上下左右、折り返しから選択できます。例えば、横並びのボックスをモバイルサイズで縦並びに変化させるには、並ぶボックスの1階層上の親ボックスを選択し、表示される矢印を上下のどちらかに変更します。
方向の他にもボックスをどのように配置するか指定することも可能です。詳しくは以下の記事をご覧ください。
表示設定を利用する
ブレイクポイントごとにボックスを非表示にすることができます。例えば、標準では表示するナビゲーションメニューをモバイルでは非表示にし、ハンバーガーメニューを表示する場合などでご活用いただけます。
詳しくは以下の記事をご覧ください。
レスポンシブ設定をチェックする方法
デザインエディタ上でスクリーンの幅を伸縮させると、ブレイクポイント間の画面幅での表示が簡単に確認できます。レイアウト崩れや考慮もれを探すことができます。
また、ブラウザでサイトがプレビューできる「ライブプレビュー」機能を使い、手元にあるタブレットやスマホでサイト表示がチェックできます。手元でサイトをチェックしながらエディタで調整を行うと、編集とチェックが同時に進められるので作業効率がアップします。
iPad
アイパッド