ボックスのレイアウト
要素を横に並べたり、縦に並べたりするのってどうやるの？
ボックスのレイアウト設定を使えば、自由に並び方を制御できるよ！
方向、配置、間隔など、いろいろな設定があるんだ。
方向の設定
まずは方向から見ていこう！
これで、子要素を横に並べるか、縦に並べるかを決められるんだ。
アイコンがいくつかあるけど、それぞれ何が違うの？
全部で5種類あるんだ。それぞれこんな感じだよ：
| パターン | 説明 |
|---|---|
| ↓縦並び | 子要素を縦一列に並べる |
| →横並び | 子要素を横一列に並べる |
| ↩︎横並び（改行あり） | 横に並べて、スペースがなくなったら次の行へ |
| ←横並び（逆方向） | 子要素を逆方向に横一列に並べる |
| ↑縦並び（逆方向） | 子要素を縦一列に縦一列に並べる |
実際に変更するとどうなるの？
やってみよう！
まず、初期状態では要素が縦に並んでいるよ。
方向アイコンをクリックして、「→」アイコンを選択すると...
要素が横一列に並ぶよ！
一番よく使うのはどれ？
パソコン画面のブログの記事一覧は「→」アイコンをよく使うよ。
スマホ画面は画面が小さくて横に並べると見にくいから、「↓」アイコンをよく使うかな。
配置の設定
方向はわかったけど、他にも設定できることあるの？
あるよ！次は「配置」を見ていこう。
これは、子要素をどこに寄せるかを決められる設定なんだ。
配置をクリックすると、3つのパターンから選べるよ：
| パターン | 説明 |
|---|---|
| 中央寄せ | 要素を中央に配置 |
| 両端揃え | 要素を両端に配置して、間隔を均等に |
| 均等配置 | 要素の周りに均等な間隔を作る |
うーん、ちょっと難しいかも...実際にどう変わるか見てみたい！
いいよ！実際に見てみよう。
まず「中央寄せ + 右寄せ」にすると、こんな感じになるよ。
おお！真ん中に寄ってる！
次は「均等寄せ + 中央寄せ」だとこうなる。
要素の周りに均等な間隔ができるんだ。
バランスよく配置されてていい感じ！
最後は「両端揃え + 中央寄せ」。
要素が両端にピッタリ配置されるよ。
なるほど！それぞれ全然違う雰囲気になるね。
配置パターンを変えるだけで、デザインの印象がガラッと変わるでしょ？
状況に応じて使い分けてみてね。
間隔の設定
要素と要素の間って、もっと広げたりできないの？
もちろん！それは間隔設定で簡単にできるよ。
子要素同士の間隔を一括で設定できるから、すごく便利なんだ。
やってみたい！どうやるの？
じゃあ、さっき横並びにした要素の間隔を40pxに設定してみよう。
間隔の数値に「40」って入力するだけだよ。
わあ、要素の間が広がった！
でしょ？一瞬で調整できるから楽ちんだよね。
すごく便利！
いちいち余白を設定しなくていいんだね。
そうそう！カード一覧とかボタングループを作る時、この間隔設定があるとすごく助かるよ。
表示/非表示の設定
あ、そういえば要素を一時的に非表示にしたい時ってどうすればいいの？
それも簡単だよ！表示設定で切り替えられるんだ。
表示設定は2つから選べるよ：
| 選択肢 | 説明 |
|---|---|
| 表示 | 要素を表示する |
| 非表示 | 要素を非表示にする（レイアウトから消える） |
え、これってデバイスごとに表示・非表示を変えたりできるの？
できるよ！「表示」のアイコンをクリックすると、デバイスごとの設定画面が開くんだ。
| 表記 | デバイス | 説明 |
|---|---|---|
| PC | パソコン | デスクトップやノートパソコンでの表示 |
| TB | タブレット | iPadやタブレット端末での表示 |
| SP | スマートフォン | iPhoneやAndroidスマホでの表示 |
この画面で、PC・タブレット・スマホそれぞれの表示/非表示を切り替えられるんだ。
目のアイコンをクリックするだけで切り替わるよ。
すごく便利！具体的にどんな時に使うの？
よく使うパターンはこんな感じかな：
| 使い方 | 例 |
|---|---|
| PCでは表示、スマホでは非表示 | 大きな画像やサイドバー |
| スマホでは表示、PCでは非表示 | ハンバーガーメニュー |
なるほど！レスポンシブデザインに必須の機能だね。
そうなんだ。レイアウト設定を使いこなせば、デザインの自由度がグッと広がるよ！
次は、ボックスを美しく装飾する「デザイン」について学んでいこう。