最初にPC向けにデザインをすると、他の端末でもその指示が共有されます。
ブラウザ幅に対する％で指定したレイヤも、
絶対値（px等）で指定したレイヤも、そのままの数値が共有されます。
特に、pxなど絶対値で指定したレイヤは端末サイズが小さくなると、
画面を飛び出すことがよくあります。
ゆえにレスポンシブデザインによる調整は必須となります。
本記事では、レスポンシブデザインの基本操作について説明します。
レスポンシブデザイン操作の基本
❶ デザイン画面ヘッダ中央にある端末アイコンで調整したい端末を選択します。
❷ 調整したいレイヤを選択します。
下図の例ではタブレットを選択しています。
❸ 調整したい要素の近くにあるデバイスアイコンをクリックします。
今回はレイヤの位置を調整したいので、位置調整パネル横のタブレットアイコンを選択します。
❹ 調整したい項目がピンクの枠で囲われたら、枠内の数値を変更します。
もちろん、キャンバス上でマウスを使って位置変更することも可能です。
💡ポイント
ピンクの枠内で設定された内容は、そのアイコンが示す端末（本記事の例ではタブレット）のみで有効となります。従って、別の端末画面に移動するとピンクの枠も表示されませんし、設定内容も共有されていないことが確認できます。
❺ 同様に端末アイコンのある設定項目はすべてレスポンシブ対応が可能です。
以上が、レスポンシブデザインの基本操作です。
❻ よくある失敗
各設定パネルの端末アイコンをクリックして項目全体が赤枠で囲まれる前に設定を変更すると、その他の端末の設定もまとめて変更されてしまいますのでご注意ください。
➐ まとめ
設定パネルで、端末アイコンが表示されている項目はすべて端末別に設定内容を変えることができますが、端末別設定の作業に慣れるまでは上記「❻ よくある失敗」をやりがちですので、手順に慣れるまでは確認しながら作業を進めましょう。
フォントのレスポンシブ対応については、以下の記事をご参照ください。
参照記事 ▷ フォントのレスポンシブ対応
端末別のレイヤの表示／非表示については、以下の記事をご参照ください。
参照記事 ▷ 端末によってレイヤを表示／非表示にする