【初心者でもわかる】いちょう切り。part1(4つの要素を2×2に並べる方法-flexbox編-)

4つの要素を2x2に並べる方法 flexbox編 part1

どうも、7noteです。今回はflexboxを使っていちょう切り、やって行こうと思います。

「♪〜〜(オープニング曲が流れる)」
「7noteクッキングレッスンへようこそ!」
「今回はオレンジを使っていちょう切りをマスターしましょう。」
「全2パートあるので、みなさん最後までついてきてください。」

最終完成予定イメージ

今回の材料はこちら(1人前)

ファイルCSSプロパティ意味
index.html
style.csswidth: ~~;
display: flex;
flex-wrap: wrap;
横幅を設定
フレックスボックスの設定
端までいったら改行させる
orange_01.pngオレンジの画像(左上)
orange_02.pngオレンジの画像(右上)
orange_03.pngオレンジの画像(左下)
orange_04.pngオレンジの画像(右下)

作り方

  1. index.htmlに4枚のオレンジの画像を用意
  2. style.cssで、2×2に画像を並べる
  3. それぞれの間に隙間を作って完成!(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

解説・作り方のコツ

  • part1では全部親要素にCSSを書くよ。
  • [display: flex;]がないと、[flex-wrap: wrap;]は効かないから気をつけて!

明日「【初心者でもわかる】いちょう切り。part2(並べた要素に隙間を作る方法-flexbox編-)」公開予定。公開までお楽しみに!

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね!



おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)