どうも、7noteです。今回はflexboxを使っていちょう切り、やって行こうと思います。
「♪〜〜(オープニング曲が流れる)」
「7noteクッキングレッスンへようこそ!」
「今回はオレンジを使っていちょう切りをマスターしましょう。」
「全2パートあるので、みなさん最後までついてきてください。」
最終完成予定イメージ
![](https://naruweb.com/wp-content/uploads/2023/09/orange_fix.png)
今回の材料はこちら(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
<div class="dish">
<img src="orange_01.png" alt="オレンジ左上">
<img src="orange_02.png" alt="オレンジ右上">
<img src="orange_03.png" alt="オレンジ左下">
<img src="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で続きを作るよ。)
![orange.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F603f32c0-0e1f-0771-b1e7-34931e798f09.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f2b8f5f7c123341e05a7d5865e860639)
解説・作り方のコツ
- part1では全部親要素にCSSを書くよ。
- [display: flex;]がないと、[flex-wrap: wrap;]は効かないから気をつけて!
明日「【初心者でもわかる】いちょう切り。part2(並べた要素に隙間を作る方法-flexbox編-)」公開予定。公開までお楽しみに!
素材データ配布
![](https://naruweb.com/wp-content/uploads/2023/09/orange_01.png)
![](https://naruweb.com/wp-content/uploads/2023/09/orange_02.png)
![](https://naruweb.com/wp-content/uploads/2023/09/orange_03.png)
![](https://naruweb.com/wp-content/uploads/2023/09/orange_04.png)
おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)