Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

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

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

最終完成予定イメージ

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 オレンジの画像(右下)

作り方

  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編-)」公開予定。公開までお楽しみに!

素材データ配布

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

おそまつ!

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

7note
フロントエンジニア4年目。3〜4人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away