Flexbox理解をするためギリシャ国旗を作りました

12624 ワード
HTML CSS 初心者 flexbox HTML テキストリンク

Flexboxを使って国旗を作る
今回はギリシャ国旗　

目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
Css Flexboxのチートシート

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　ギリシャの国旗を調べる
　　　<div>は何個必要なのか？
　　　class属性名はどうしようか？
　　　

・紙とペンで実際に枠を書いてみる（添付画像　準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略

<div class="greece">
      <div class="main">
        <div class="main1"></div>
        <div class="main2"></div>
        <div class="main1"></div>
      </div>
      <div class="sub">
        <div class="blue"></div>
        <div class="white"></div>
        <div class="blue"></div>
        <div class="white"></div>
        <div class="blue"></div>
      </div>
    <div class="sub1">
      <div class="white sub2"></div>
      <div class="blue sub2"></div>
      <div class="white sub2"></div>
      <div class="blue sub2"></div>
    </div>
  </div>

.greece {
  width: 700px;
  height: 400px;
  border: 1px solid black;
  margin: 200px auto; 
}

.main {
  width: 300px;
  height: 200px;
  background-color: rgb(12, 152, 207);
}



.sub {
  width: 400px;
  height: 200px;
  background-color: blue;
}

.sub1 {
  width: 700px;
  height: 200px;
  background-color: yellowgreen;
}

上記の状態を一旦ブラウザで確認　↓

大枠のクラスにdisplay: flex; を付けてみます

.greece {
  width: 700px;
  height: 400px;
  border: 1px solid black;
  margin: 200px auto; 

  display: flex; ※追加
  flex-wrap: wrap;　※追加
}

上記の状態を一旦ブラウザで確認　↓
大枠の完成です！

skyblue　の部分を　display: flex; で十字を作っていきます

.main {
  width: 300px;
  height: 200px;
  background-color: rgb(12, 152, 207);

  display: flex;　※追加
  justify-content: center;　※追加
  align-items: center;　※追加
}

.main1 {　※追加
  height: 40px;
  background-color: white;

  flex-grow: 2.5; ※
}

.main2 {　※追加
  height: 200px;
  background-color: white;

  flex-grow: 1;　※
}

青い部分 も作っていきます！！

.sub {
  width: 400px;
  height: 200px;
  background-color: blue;

  display: flex;　※追加
  flex-direction: column;　※追加
}

.blue { ※追加
  width: 400px;

  background-color: rgb(12, 152, 207);
  flex-grow: 2;　
}

.white {　※追加
  width: 400px;

  background-color: white;
  flex-grow: 2; 
}

あともういっちょ！！

.sub1 {
  width: 700px;
  height: 200px;
  background-color: yellowgreen;

  display: flex;
  flex-direction: column;
}

.sub2 {
  width: 700px;
}

ギリシャ国旗完成です！

まとめ

一見難しそうに見えるギリシャ国旗も、一つずつcodeを書いていけば完成します
水色と白の横線はdisplay: flex　を付けなくても完成しますが
Flexアイテムを使用したかったのでdisplay: flex　を使用しました。

また別の書き方があればそちらも採用したいと思います
こんなcodeもあるよ！と教えていただける方ご連絡いただけたら嬉しいです

今回は以上です
ありがとうございます！！