レスポンシブデザイン基本の操作設定
操作手順
レスポンシブデザインは新規ページを作成した際に、ページ自体にオートレイアウトをかける必要があります。モバイルの縁をクリックすると、スタイルからオートレイアウトを設定できます。
オートレイアウトを設定すると、中央寄せや均等配置などが設定できます。
真ん中のボタンを押すと、そのページにあるものがページの中央を基準に配置され、左上に設定すると全てが左上寄せになります。
下記赤枠内の項目で余白をどのくらいつけるか設定できます。
左に余白をつけたい場合は、左のマスに10など数字を入力してください
次はそのページに配置してあるものの設定です。
今回は例として、シェイプとテキストを使用します。スタイルにある位置を「相対」に設定。
※この時、先ほどの工程でやったページ自体にオートレイアウトをかけていないと、
各パーツに「相対」の設定ができないので注意してください。
※相対に設定すると各項目マウスで動かすことはできなくなります。
左にある上から3番目のレイヤーパネルを開きます。
するとモバイルの下にシェイプとテキストの項目が表示されるようになります。
このレイヤーパネルに表示されているものが現在モバイルのページに配置されているシェイプとテキストです。レスポンシブデザインは基本的にこのレイヤーパネルで場所の入れ替えを行います。
レイヤーパネルにある「テキスト2」にカーソルを置き、 シェイプの下にドラッグすると 配置したものの場所を入れ替えをすることができます。
次に、現在配置してあるこの「テキスト」と「シェイプ」を2つとも選択し、オートレイアウトに設定します。すると周りに余白をつけたり、縦並びや横並びに配置することができるようになります。下記の画像は、縦並びに配置した状態で、オートレイアウトの中では左上寄せ、各パーツの距離は50あいている状態です。
横並びに設定すると、オートレイアウとの中では各パーツが横並びになります。
この時、タブレットやPCでは綺麗に表示されていますが、モバイルでは両サイドが途切れてしまっています。PCやモバイルのサイズ調整は後からできるので、先にモバイルのサイズ感（シェイプの幅など）を調整する必要があります。
最後に余白なども駆使しベストなポジションにしていきます。
今までグループ化していたものを、オートレイアウトのデザインでは「オートレイアウト」というひとつの「箱」として設定する形になります。各項目を細かく配置指定することにより、あらゆる端末で自動で綺麗な位置に配置することができるようになります。
【注意事項】
レスポンシブデザインは「モバイル」で設定したものが、タブレット、PCに自動で反映されるシステムになっています。3画面の配置設定を終えた後にモバイルの修正を行うと、タブレットやPCも自動で変更になってしまいまので、デザインを整える場合はモバイルの構築が全て整ってからタブレットやPCのエレメント位置の調整をしましょう。
【関連記事】