以前投稿した、『Flexboxの基礎を徹底的な理解のためにUAEの国旗を作ってみる』からもっとシンプルにcodeを書いたので投稿します
基盤は、以前のcodeに少しシンプルにしました
目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
Css Flexboxのチートシート
～codeを書き始める前の準備～
・構成を考える！ 何をどんな風に、どうやって作るのか？
最初にある程度決めておくと後が楽になります。
例 UAEの国旗を調べる
<div>は何個必要なのか？
class属性名はどうしようか？
ここまで出来たらcodeを書いていきます♪ ※head部分は省略
組み立てのポイント！
『あか』と『みどり、しろ、くろ』の向きが違うのでそれぞれに親要素をつけてあげる
<div class="uae11">
<div class="uae13"></div>
<div class="uae12">
<div class="uae14"></div>
<div class="uae15"></div>
<div class="uae16"></div>
</div>
</div>
.uae11 {
width: 450px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
}
.uae12 { }
.uae13 {
background-color: red;
}
.uae14 {
background-color: green;
}
.uae15 {
background-color: white;
}
.uae16 {
background-color: black;
}
上記の状態をブラウザで一旦確認
上記のCSSにFlexboxをつける。
.uae11 {
width: 450px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
display: flex; ※追加
}
.uae12 {
display: flex; ※追加
flex-direction: column; ※追加
flex-grow: 4; ※追加
}
.uae13 {
background-color: red;
flex-grow: 1; ※追加
}
.uae14 {
background-color: green;
flex-grow: 4; ※追加
}
.uae15 {
background-color: white;
flex-grow: 4; ※追加
}
.uae16 {
background-color: black;
flex-grow: 4; ※追加
}
結果 ↓
UAE国旗完成しました！
まとめ
以前作成したUAE国旗をもっとシンプルにしてみたら、結構簡単に作成できました
無駄なcodeをなくすととても簡単に完成できます
引き続き、シンプルかつ簡単にcodeを書けるようがんばります！！
今回は以上です
ありがとうございます！
↧