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もあるよ！と教えていただける方ご連絡いただけたら嬉しいです
今回は以上です
ありがとうございます！！
↧