Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

Flexboxを使ってフィンランド風国旗を作りました!

$
0
0
Flexboxを使って国旗を作る 今回はフィンランド国旗 目標:Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ~codeを書き始める前の準備~ ・構成を考える! 何をどんな風に、どうやって作るのか?  最初にある程度決めておくと後が楽になります。  例 フィンランドの国旗を調べる    <div>は何個必要なのか?    class属性名はどうしようか?     ・紙とペンで実際に枠を書いてみる(添付画像 準備出来次第掲載) ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <div class="finland"> <div class="fin"> <div class="finland1 finland1">しかく4</div> <div class="finland1 finland2">しかく2</div> <div class="finland1 finland3">しかく3</div> </div> </div> .finland { width: 700px; height: 500px; border: 1px solid black; margin: 500px auto; } .fin { width: 450px; height: 300px; background-color: white; border: 1px solid black; } .finland1 { width: 50px; height: 50px; background-color: blue; } .finland2 { height: 100%; } 上記の状態を一旦ブラウザで確認 ↓ .finland { width: 700px; height: 500px; border: 1px solid black; /* background-color: aqua; */ margin: 500px auto; display: flex; ※ justify-content: center; ※ align-items: center; ※ } 大枠のクラスにdisplay: flex; を付けてみます display: flex; で大枠をセンターにしました 次に、青い部分をdisplay: flex; にします .fin { width: 450px; height: 300px; background-color: white; border: 1px solid black; display: flex; ※ align-items: center; ※ } .finland4 { flex-grow: 1.5; ※ } .finland2 { height: 100%; flex-grow: .5; ※ } .finland3 { flex-grow: 8; ※ } フィンランド国旗完成です! 青いと解りづらいので、青い部分の色を変えてみます。 .finland1 { width: 50px; height: 50px; /* background-color: blue; */ ※ } .finland4 { background-color: pink; ※ flex-grow: 1.5; } .finland2 { background-color: blue; ※ height: 100%; flex-grow: .5; } .finland3 { background-color: yellowgreen; ※ flex-grow: 8; } 色を変えてフィンランド国旗になりました。 まとめ display: flex を上手に挙動させるためには、 『親要素』と『子要素』をきちんと把握することが大切だと感じてます。 また、『親要素』にはFlexコンテナー。  『子要素』にはFlexアイテム。 理解することが難しいですが、一個、一個理解していけば必ず完成します。 今回は以上です ありがとうございます!!

Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>