どうも、7noteです。今回はflexboxを使っていちょう切り「part2」やって行こうと思います。
part1まだの方はこちらからどうぞ！
【初心者でもわかる】いちょう切り。part1（4つの要素を2×2に並べる方法-flexbox編-）
「・・・（CM明け）・・・」
「さて、4等分にしたオレンジを並べるのはできたでしょうか？」
「上手くできなかった、という方はコメントくださいね！」
「ここからは、2×2に並べたオレンジに隙間を作っいきます。」
「ラストスパートがんばっていきましょう！」
最終完成予定イメージ
今回の材料はこちら(1人前)
| ファイル | CSSプロパティ | 意味 |
|---|---|---|
| index.html | ||
| style.css | background: ~~; justify-content:space-between; display: inline-block; margin: ~~; | 背景の色を設定 横並びを等間隔に設定 隙間を当てるため 隙間を設定 |
| orange_01.png | オレンジの画像（左上） | |
| orange_02.png | オレンジの画像（右上） | |
| orange_03.png | オレンジの画像（左下） | |
| orange_04.png | オレンジの画像（右下） |
作り方
- 前回part1で作ったindex.htmlを用意。見やすいように背景に色を入れます。
- 5pxの縦線の隙間を作ります。（垂直方向の隙間）
- 5pxの横線の隙間を作ります。（水平方向の隙間）
- 見えない隙間に注意して完成！
1. 前回part1で作ったindex.htmlを用意。見やすいように背景に色を入れます。
style.css
.dish{width:400px;display:flex;flex-wrap:wrap;/*--ここから下を追加--*/background:#CCC;/*見やすいように背景色を指定*/}2. 5pxの縦線の隙間を作ります。（垂直方向の隙間）
今回は親要素（dish）の横幅を広げて簡単に行いますが、親要素が動かせない時は、子要素の大きさを変更して対応しましょう。
子要素の大きさを変えてやる方法はまたいつか記事書こうかな。
style.css
.dish{width:405px;/*400pxから405pxに変更*/display:flex;flex-wrap:wrap;background:#CCC;/*--ここから下を追加--*/justify-content:space-between;/*要素を左右均等に水平方向に並べる*/}3. 5pxの横線の隙間を作ります。（水平方向の隙間）
style.css
/*--ここから下を追加--*/.dishimg{display:inline-block;/*marginを当てるために必要*/margin-bottom:5px;/*下方向に5pxの隙間を作成*/}4. 見えない隙間に注意して完成！
ぱっと見できてそうに見えるが、これでは綺麗なコーディングとは呼べません！
一工夫しましょう！
今起きている問題はここです。
オレンジ色の部分がmarginです。
03と04（オレンジの下半分）にもmargin-bottomがついてしまっているので、
01と02にだけborder-bottomが効くように変えてみましょう。
style.css
.dishimg{display:inline-block;/*marginを当てるために必要*/}/*--ここから下に変更--*/.dishimg:nth-child(-n+2){/*最初から2番目にまで適応*/margin-bottom:5px;/*下方向に5pxの隙間を作成*/}＼完成／
解説・作り方のコツ
- 隙間を開ける方法は他にもいろいろありますが、今回は簡単に隙間を作る方法を紹介しました！違う方法もまたそのうち記事書こうかな。
素材データ配布
真似して作りたい人はこの画像をダウンロードして使ってね！
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）