レスポンシブデザインとは?

  • 様々なデバイスできれいに見れるように、サイズ別にデザインを調整することです。
  • STUDIOはPCサイズで基本のデザインを作り、Small、Tablet、Mobile、それぞれの幅で見やすいようにスタイルを上書きしてデザインをします。


レスポンシブバーの操作

  • レスポンシブバーはレスポンシブ状態を表したり、スクリーン幅を調整することができます。
  • 色がついている時は、レスポンシブモード です。
  • その幅に適応されるデザインをしています。
  • この時は、widthやマージンなど一部の設定項目のみ設定できます。
  • 全体設定をしたい時は、画面幅を伸ばしてレスポンシブモードを解除しましょう

作例

  • 3カラムのワイヤーフレームテンプレート

  • Tabletの幅(みどり色)以内では1カラムになるように設定しています。
  • ※大きな幅の設定が小さな幅にも適応されるので、Tabletのみ設定することで、Mobileのサイズ時にも1カラムとなります。

Did this answer your question?