どうも、7noteです。今回はflexboxを使っていちょう切り、やって行こうと思います。
「♪〜〜（オープニング曲が流れる）」
「7noteクッキングレッスンへようこそ！」
「今回はオレンジを使っていちょう切りをマスターしましょう。」
「全2パートあるので、みなさん最後までついてきてください。」
最終完成予定イメージ
今回の材料はこちら(1人前)
| ファイル | CSSプロパティ | 意味 |
|---|---|---|
| index.html | ||
| style.css | width: ~~; display: flex; flex-wrap: wrap; | 横幅を設定 フレックスボックスの設定 端までいったら改行させる |
| orange_01.png | オレンジの画像（左上） | |
| orange_02.png | オレンジの画像（右上） | |
| orange_03.png | オレンジの画像（左下） | |
| orange_04.png | オレンジの画像（右下） |
作り方
- index.htmlに4枚のオレンジの画像を用意
- style.cssで、2×2に画像を並べる
- それぞれの間に隙間を作って完成！（part2で作ります。）
1. index.htmlに4枚のオレンジの画像を用意
index.html
<divclass="dish"><imgsrc="orange_01.png"alt="オレンジ左上"><imgsrc="orange_02.png"alt="オレンジ右上"><imgsrc="orange_03.png"alt="オレンジ左下"><imgsrc="orange_04.png"alt="オレンジ右下"></div>2. style.cssで、2×2に画像を並べる
style.css
.dish{width:400px;/*200pxの画像を2×2で並べるので400pxを指定*/display:flex;/*子要素を横並びにさせます。*/flex-wrap:wrap;/*並べたコンテンツが親要素からはみでたら、次の行にコンテンツを改行させる*/}＼完成／（part2で続きを作るよ。）
解説・作り方のコツ
- part1では全部親要素にCSSを書くよ。
- [display: flex;]がないと、[flex-wrap: wrap;]は効かないから気をつけて！
明日「【初心者でもわかる】いちょう切り。part2（並べた要素に隙間を作る方法-flexbox編-）」公開予定。公開までお楽しみに！
素材データ配布
真似して作りたい人はこの画像をダウンロードして使ってね！
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）