どうも、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
<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で続きを作るよ。)
解説・作り方のコツ
- part1では全部親要素にCSSを書くよ。
- [display: flex;]がないと、[flex-wrap: wrap;]は効かないから気をつけて!
明日「【初心者でもわかる】いちょう切り。part2(並べた要素に隙間を作る方法-flexbox編-)」公開予定。公開までお楽しみに!
素材データ配布
おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)