こんにちは
HTML/CSS初心者の rudorufu1981 と申します！
今回は、よくCSSの練習サイトとして紹介されている
「CSSBattle」の最初の12問 Battle #1 - Pilot Battle
を流行りのFlexboxを使って解いてみました！
解答コードを紹介している人がググっても見つからなかったので、記事にしてみました！
Flexbox初心者の方の参考になれば嬉しいです！僕も初心者ですが
※本来のCSSBattleの楽しみ方はいかに短いコードにできるかですが、
今回はFlexboxの勉強のためにやったのでコード量は気にせずやっていきます。
今回は前編ということで、#1~#6 の6問を解いていきます。
よろしくお願いします！
記事リンク
Flexboxについての最低限の知識
【前編】 #1~#6
#1. Simply Square
Flexboxの出番がなかったですw
解答コード
#1.html
<div></div>
<style>
body {
margin: 0;
background: #5d3a3a;
}
div {
width: 200px;
height: 200px;
background: #b5e0ba;
}
</style>
#2. Carrom
遂にFlexboxの出番です
解答コード(flex-direction: column を使うVer)
#2.html
<div class="container">
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #62374e;
}
.container {
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container > div {
display: flex;
justify-content: space-between;
}
.container > div > div {
width: 50px;
height: 50px;
background: #fdc57b;
}
</style>
解説(イメージ図)
別解(align-content: space-between を使うVer)
#2_Sub.html
<div class="container">
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #62374e;
}
.container {
width: 300px;
height: 200px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.container > div {
width: 100%;
display: flex;
justify-content: space-between;
}
.container > div > div {
width: 50px;
height: 50px;
background: #fdc57b;
}
</style>
別解の解説(イメージ図)
#3. Push Button
Flexboxの真骨頂が発揮されました！中央揃えがしやすい！！！
解答コード
#3.html
<div id="s1"></div>
<div class="circle" id="c1"></div>
<div class="circle" id="c2"></div>
<div class="circle" id="c3"></div>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
background: #6592CF;
}
div {
position: absolute;
}
#s1 {
width: 300px;
height: 150px;
background: #243D83;
}
.circle {
border-radius: 50%;
}
#c1 {
width: 250px;
height: 250px;
background: #6592CF;
}
#c2 {
width: 150px;
height: 150px;
background: #243D83;
}
#c3 {
width: 50px;
height: 50px;
background: #EEB850;
}
</style>
#4. Ups n Downs
divを6個置くという発想ができるかという発想力の問題！
※別解はdiv3個Ver。translateで移動させる実装は、なぜか負けた気がする(誰と戦ってるんだ
)
解答コード(transform: translateを使わないVer)
#4.html
<div class="conteiner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #62306D;
}
.conteiner {
display: flex;
width: 300px;
height: 200px;
flex-wrap: wrap;
}
.conteiner > div {
width: 100px;
height: 100px;
}
.conteiner > div:nth-child(2) {
border-radius: 50% 50% 0 0;
background: #F7EC7D;
}
.conteiner > div:nth-child(2N+4) {
border-radius: 0 0 50% 50%;
background: #F7EC7D;
}
</style>
別解(transform: translateを使うVer)
#4_Sub.html
<div></div>
<div></div>
<div></div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #62306D;
}
div {
width: 100px;
height: 100px;
background: #F7EC7D;
}
div:nth-child(odd) {
border-radius: 0 0 50% 50%;
transform: translate(0, 50px);
}
div:nth-child(even) {
border-radius: 50% 50% 0 0;
transform: translate(0, -50px);
}
</style>
#5. Acid Rain
図形が重なったら流石にtranslateを使うしかない！
今度はz-indexを使うとなぜか負けた気がしたので、意地でも使わない方針で実装しました！
解答コード
#5.html
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<style>
body {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
background: #0B2429;
}
div {
width: 120px;
height: 120px;
}
#d1 {
border-radius: 50%;
transform: translate(-60px, -60px);
background: #F3AC3C;
}
#d2 {
border-radius: 50% 0 50% 50%;
transform: translate(0, 0);
background: #998235;
}
#d3 {
border-radius: 50% 0 50% 50%;
transform: translate(60px, 60px);
background: #F3AC3C;
}
</style>
#6. Missing Slice
#2のようにcontainerクラスのdivで囲うのが正統派だが、
遂にtranslateの魔力に負けた実装をしてしまった・・・！
translateは依存性が強いです
解答コード
#6.html
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<style>
body {
display: flex;
justify-content: center;
align-items:center;
background: #E3516E;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
#d1 {
border-radius: 100% 0 0 0;
transform: translate(-50px, -50px);
background: #51B5A9;
}
#d2 {
border-radius: 0 100% 0 0;
transform: translate(50px, -50px);
background: #FADE8B;
}
#d3 {
border-radius: 0 0 0 100%;
transform: translate(-50px, 50px);
background: #F7F3D7;
}
</style>
以上です！
次回は後編ということで、#7~#12 の6問を解いていきます。