【STUDIO】画像をBoxに入れる？直接配置する？初心者向けに動画で徹底解説！
こんにちは！Web制作ツールのSTUDIOを使っている皆さん、こんな経験はありませんか？
- 「画像を配置したけど、画面を小さくしたら一部が見切れてしまった…」
- 「スマホで見たら画像が小さくなりすぎて見栄えが悪い…」
これは、画像を配置する際に「Box」に入れたか、それとも「直接配置」」したかの違いで起こることがほとんどです。一見同じように見えるこの2つの方法ですが、実は裏側の仕組み（CSS）が全く違うんです。
今回は、この挙動の違いを、実際に動画を見ながら一緒に確認していきましょう！
1. 動画で見る「Box」と「画像」の配置
まずは、こちらの動画をご覧ください。
(0:00〜1:20) 動画の冒頭では、横幅を540pxに設定したモバイルプレビュー上で、2つの画像の配置を比較しています。
まず、上の画像を配置する手順を見てみましょう。 画面左の「追加」タブから「Box」をドラッグ＆ドロップし、その中に画像を配置していますね。このBoxは、言わば「コンテンツを入れるための器」です。
次に、下の画像を配置する手順です。 Boxを使わず、画像を画面に直接ドラッグ＆ドロップしています。画像自体がひとつの独立した要素として扱われるのが分かります。
2. なぜ挙動が違うのか？CSSの仕組みを理解しよう
(1:00〜1:10) では、画像ボックスのBoxモードからImgモードを切り替えています。この使い分けを理解していないと意図した画像表示ができてなく悩むことになります。また、Imgモードに切り替えた時に上部にあるパネルの縦幅がautoになったのがわかります。実はここがポイントです。
(1:40〜1:48) 動画のハイライト部分です。ビューポート（画面）の横幅を狭くしていくと、2つの画像で全く違う挙動が起こります。
- 上の画像：画面を狭くすると、画像の左右が見切れて、一部が見えなくなってしまいます。
- 下の画像：画面を狭くしても、画像はアスペクト比（縦横比）を保ったまま、全体が縮小されます。
この違いは、それぞれの配置方法がCSSの異なるプロパティに対応しているからです。
✔ 上の画像（Boxに画像を入れる） この方法は、画像をBoxの背景として扱う仕組みです。CSSでいうと、background-image プロパティが使われています。
特に、background-size: cover; という設定がされており、画像は親要素（Box）全体を覆うように拡大・縮小されます。そのため、親要素の形が変わると、画像の一部が見切れてしまうのです。背景として使いたい、または画像の上に文字を重ねたい場合に適しています。
✔ 下の画像（画像を直接配置する） この方法は、画像を独立したコンテンツとして扱う仕組みです。CSSでは、<img> タグが使われます。
<img> タグの画像は、特別な設定をしない限り、常にアスペクト比を保とうとします。画面の幅が変われば、それに合わせて縦横比を崩さずにサイズを調整してくれます。そのため、見切れることなく、常に画像全体を見せたい場合に最適です。
もっと詳しく知りたい方はこちらをお読みください
3. 結論：使い分けが重要！
このように、STUDIOのツールはCSSの基本的な仕組みを直感的に扱えるように設計されています。この違いを理解しておくと、レスポンシブデザインの調整がスムーズになり、より意図した通りのデザインを実現できますよ。
どちらの方法が良い、悪いということはありません。作りたいWebサイトの意図に合わせて使い分けることが大切です。
【ポイント】
- 背景として使いたい、または見切れてもよい場合は 「Boxに画像を入れる」
- 画像全体を見せたい、またはアスペクト比を保ちたい場合は 「画像を直接配置する」
ぜひ、皆さんのSTUDIOでの制作に役立ててください！
