【bubble】レスポンシブデザインを理解しよう！②Apply a max widthとCollapse margins

NoCoderのつかさです！今回は前回の続きで、さらにレスポンシブデザインについて深く学習していきましょう。

Apply a max widthについて

“Apply a max width”は要素の最大幅の設定を行います。ここに✔がついていないと、画面サイズを大きくした時に要素も一緒に横長に引き伸ばされます。要素の最大幅を固定したい時はこの”Apply a max width”を使用するようにしましょう。

■Apply a max widthに✔がついていない時の挙動

■Apply a max widthに✔がついている時の挙動

画面を大きくした場合でも要素の最大幅が固定されレイアウトが崩れません。

まず非エンジニアの方に対してはmarginsとは何かについてご説明する必要があるかもしれません。

詳しくは下記リンクを参照していただきたいのですが、ざっくり言ってしまうと要素の外側にある余白の部分だと思ってください。

それでは”Collapse margins when container width ≤”が何かというと、”要素幅一定以下になった時にマージンを削除する”ということになります。

つまり「画面サイズを縮小した時にマージンを削除する＝要素の幅が伸びる」ということになります。

実際に挙動を確認してもらった方が早いので御覧ください。今回は667px以下になった時”Collapse margins”を発動させています。

２行だった文字列が１行に伸びていることが分かります。

今回は文字列でやりましたが、スマホに切り替えた時に画像をフルサイズ表示させたい時やボタンを画面の横幅いっぱいに拡大したい時なのに役立ちます。