Flexboxを自由に操ってジョージア国旗を作ってみました。

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

Flexboxを使って国旗を作る
ジョージア国旗

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

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

ここまで出来たらcodeを書いていきます♪ ※head部分は省略


<div class="georgia">
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>
      <div class="gia">
        <div class="georgia1"></div>
        <div class="georgia2"></div>
        <div class="georgia1"></div>
      </div>   
  </div>

.georgia {
  width: 500px;
  height: 300px;
  background-color: red;
  border: 1px solid black;
  margin: 200px auto;
}

.gia {
  width: 220px;
  height: 125px;
  background-color: pink;
}

この状態で一旦ブラウザで確認　↓


.georgia {
  width: 500px;
  height: 300px;
  background-color: red;
  border: 1px solid black;
  margin: 200px auto;

  display: flex; ※追加
  flex-wrap: wrap;　※追加
  justify-content: space-between;　※追加
  align-content: space-between; ※　追加
}

display: flex;を使って、４個の<div>を上下左右に納めました。

.georgia1 {
  width: 40px;
  height: 20px;
  background-color: orange;
}

.georgia2 {
  width: 20px;
  height: 80px;
  background-color: aquamarine;
}

ピンク部分に
赤い十字を作っていきます　↓


.georgia1 { ※追加
  width: 40px;
  height: 20px;
  background-color: orange;
}

.georgia2 {　※追加
  width: 20px;
  height: 80px;
  background-color: aquamarine;
}

ピンクのボックスに３個の<div>の箱を作ります。
解りやすいように色を付けています

上記の３個にdisplay: flex;を付けます

.gia {
  width: 220px;
  height: 125px;
  background-color: pink;

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

最後に、色を整えてあげたら完成です。

まとめ

大きい『赤十字』を作成するのに、最初は赤い十字を作りましたが
「小さい赤十字」を上手に作成できなかったので、
赤をベースに白い箱を作り、そこにFlexboxをつけました。

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