レスポンシブデザインの作成

レスポンシブデザインの鍵となる「ブレークポイント」について学ぼう！

PCとスマホでは画面サイズが全然違うよね。

同じデザインだと、スマホでは文字が小さすぎたり、逆にPCでは間延びしたりするんだ。

だから、デバイスごとに最適なデザインに切り替える必要があるんだよ！

ATOMZでは、3つの主要なブレークポイントが用意されているよ！

これだけでほぼすべてのデバイスをカバーできるんだ。

いい質問だね！

細かく分けすぎると、管理が大変になるんだ。

この3つで主要なデバイスをカバーできるし、シンプルで分かりやすいよ！

簡単だよ！エディター上部のボタンで切り替えられるんだ。

一緒にやってみよう！

エディター上部の中央あたりを見てごらん。

「1280px」って書いてあるボタンがあるよね。それをクリック！

クリックすると、メニューが開くよ。

そう！クリックするだけで、そのデバイスの表示に切り替わるよ。

選んだら、キャンバスの幅が変わるのが分かるはずだよ。

その通り！各デバイス用に設定したデザインが自動的に適用されるよ。

まだ設定していない場合は、パソコンのデザインがそのまま表示されるんだ。

だから、最初はどのデバイスでも同じ見た目になるよ。

完璧！その通りだよ。

例えば、スマホ表示に切り替えて「この見出し大きすぎるな」と思ったら、その場で小さくすればOK。

変更は自動的にスマホ専用のデザインとして保存されるんだ。

それぞれのデバイスの特徴を見てみよう！

PCは画面が広いから、3列レイアウトとか、サイドバーを配置したりできるんだ。

その通り！

PCほど広くないから、2列くらいが見やすいね。

あと、タッチで操作するから、ボタンは少し大きめにするといいよ。

正解！スマホは1列が基本だよ。

横に並べると小さくなりすぎて見づらいからね。

縦スクロールで見る前提でデザインするんだ。

そうなんだ！ATOMZでは、デバイスごとに異なるデザインを設定できるよ。

これがレスポンシブデザインの肝心なところなんだ。

デバイスごとのデザイン設定は、とっても簡単だよ！

具体例を見てみよう！

PC表示で横幅150pxのボックスを、スマホでは画面幅100%に変更したりできるんだ。

よく気づいたね！これがとても重要なポイントなんだ。

ATOMZでは、デバイス固有の設定値が設定されている場合、入力欄の色が変わるんだよ！

その通り！オレンジや緑の入力欄を見れば、

「あ、ここはスマホ専用に調整したんだな」ってすぐわかるんだ。

複雑なレスポンシブデザインでも、管理がしやすくなるよ！

ATOMZでは、パソコンから作り始めるのが基本だよ！

PCで基本デザインを完成させたら、

タブレット、スマホの順に表示を確認して調整していくんだ。

例えば、3列のレイアウトを、タブレットで2列、スマホで1列に変更したりするよ！