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