Labo 241: 複数のバナーを並べる
Labo 241: 複数のバナーを並べる
分割して出来たモジュールのコーディングをする
ページ下部コンテナに含まれる、2つのバナー画像を配置する
PC 向けレイアウトの時は橫に、モバイル向けレイアウトの時は縦に奈良無
フレックスボックスを使用した配置例のひとつ
バナーがくっつかない様に配置するために、マージン設定に注意する
2つのバナー画像を、フレックスボックスを使って並べる
PC 向けレイアウトの時は橫に、モバイル向けレイアウトの時は縦に並べる
並べる方向の切り替えににはフレックスボックスを使う
並べる方向を変えるだけではバナー同士がくっついてしまうので、各バナーにマージンを設定する
バナーを橫に並べたり、縦に並べたりするのは flex-direction プロパティを使う
flex-direction プロパティを row にしたとき、フレックスボックスの子要素は横一列に並ぶ
フレクスボックスの初期設定の動作では、横一列に収まる様に子要素の幅が縮小する
flex-direction プロパティが column の時は子要素が縦に並ぶ
子要素の幅は、親要素の幅に収まる様に縮小する
バナーを挿入すると、いままで問題なくくっついていたページ下部コンテナとフッターコンテナとの間に、スペースが空いてしまう
原因は、バナーを囲む親要素（<div class="banner"> ～ </div>）に設定した 30px の下マージン
このマージンは、次のモジュール（SNS ボタン）との間にスペースを作るために付けたもの
すべてのモジュールを組み込めば正しい表示になるが、現時点では親要素のページ下部コンテナの下にマージンが空いているように見える
親要素の下マージンの部分にスペースが空いているか、それは マージンのたたみ込み と呼ばれる CSS の仕様
マージンのたたみ込みとは、2つの要素に設定した上下マージンが隣接するとき、どちらか大きい方が採用されるというルール
たたみ込まれるのは上下マージンだけで、左右のマージンが隣接してもたたみ込まれない
マージンのたたみ込みが発生するのは 3パターンがある
上下に隣接する兄弟要素にマージンが設定されているとき、上マージン、下マージンがたたみ込まれる
親要素と子要素のマージンのパターン
親要素の上マージンと最初の子要素の上マージン
親要素の下マージンと最後の子要素の下マージン
いずれも親要素の外側にマージンが作られる
親要素の上下マージンが 0 でもたたみ込まれ、子要素のマージンが親要素の外側にできる
親要素と子要素のマージンがたたみ込まれるのは、あくまでマージンが隣接しているときだけ
親要素にボーダーやパディングが設定されていると、マージンはたたみ込まれない
height: 0; が指定されているなどして、高さが ⓪ になっていて、かつコンテンツが空で、その要素の上下マージンが隣接する場合、たたみ込まれる
<p style="height: 0;"> </p>
ボックスにフロート（float）、位置指定（position）、フレックスボックス、グリッドレイアウトなどが適用されているときは、マージのたたみ込みが発生しない