こんにちは
HTML/CSS初心者の rudorufu1981 と申します！
今回は、よくCSSの練習サイトとして紹介されている
「CSSBattle」の最初の12問 Battle #1 - Pilot Battle
を流行りのFlexboxを使って解いてみました！
解答コードを紹介している人がググっても見つからなかったので、記事にしてみました！
Flexbox初心者の方の参考になれば嬉しいです！僕も初心者ですが
※本来のCSSBattleの楽しみ方はいかに短いコードにできるかですが、
今回はFlexboxの勉強のためにやったのでコード量は気にせずやっていきます。
今回は後編ということで、#7~#12 の6問を解いていきます。
よろしくお願いします！
記事リンク
Flexboxについての最低限の知識
【後編】 #7~#12
#7. Leafy Trail
画像が重なるのでもちろんtranslateで実装します！
解答コード
#7.html
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #0B2429;
}
div {
width: 150px;
height: 150px;
position: absolute;
border-radius: 100px 0 100px 0;
}
#d1 {
transform: translate(-50px);
background: #1A4341;
}
#d2 {
transform: translate(0);
background: #998235;
}
#d3 {
transform: translate(50px);
background: #F3AC3C;
}
</style>
#8. Forking Crazy
12問の中で最難関の問題！
10px下にtranslateするのを思いつくかどうかの発想力の勝負な気がします・・・
解答コード
#8.html
<div class="conteiner">
<div class="top">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="mid"></div>
<div class="bot"></div>
</div>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
background: #6592CF;
}
.conteiner {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.top {
display: flex;
}
.top > div {
width: 20px;
height: 100px;
}
.top > div:nth-child(odd) {
border-radius: 10px 10px 0 0;
background: #060F55;
}
.top > div:nth-child(even) {
border-radius: 0 0 10px 10px;
transform: translate(0, 10px);
background: #6592CF;
}
.mid {
width: 140px;
height: 100px;
border-radius: 0 0 70px 70px;
background: #060F55;
}
.bot {
width: 20px;
height: 50px;
background: #060F55;
}
</style>
#9. Tesseract
Flexboxに慣れてきたら、もうこのくらいの問題は簡単！
解答コード
#9.html
<div id="d1"></div>
<div class="container">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #222730;
}
div {
position: absolute;
}
#d1 {
width: 400px;
height: 150px;
background: #4CAAB3;
}
.container {
display: flex;
justify-content: center;
align-items: center;
transform: rotate(45deg);
}
#d2 {
width: 250px;
height: 250px;
background: #222730;
}
#d3 {
width: 150px;
height: 150px;
background: #4CAAB3;
}
#d4 {
width: 50px;
height: 50px;
background: #393E46;
border-radius: 50%;
}
</style>
#10. Cloaked Spirits
勉強も兼ねて擬似要素を使って実装してみました！
解答コード
#10.html
<div class="container1">
<div></div>
<div></div>
<div></div>
</div>
<div class="container2">
<div></div>
<div></div>
<div></div>
</div>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #62306D;
}
.container1 {
height: 300px;
display: flex;
align-items: end;
position: absolute;
}
.container1 > div:nth-child(odd) {
width: 100px;
height: 100px;
background: #F7EC7D;
}
.container1 > div:nth-child(even) {
width: 100px;
height: 200px;
background: #F7EC7D;
}
.container2 {
height: 200px;
display: flex;
position: absolute;
}
.container2 > div:nth-child(odd) {
width: 100px;
height: 100px;
border-radius: 50%;
align-self: flex-end;
position: relative;
background: #AA445F;
}
.container2 > div:nth-child(odd)::after {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 20px;
left: 20px;
border-radius: 50%;
background: #E38F66;
}
.container2 > div:nth-child(even) {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
background: #E38F66;
}
.container2 > div:nth-child(even)::after {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 20px;
left: 20px;
border-radius: 50%;
background: #AA445F;
}
</style>
#11. Eye of Sauron
伝家の宝刀translateで簡単！
解答コード
#11.html
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #191210;
}
div {
position: absolute;
}
#d1 {
width: 100px;
height: 50px;
border-radius: 0 0 100px 100px;
transform: translate(-100px, 25px);
background: #ECA03D;
}
#d2 {
width: 60px;
height: 60px;
border-radius: 100%;
transform: translate(-100px, 0);
background: #191210;
}
#d3 {
width: 140px;
height: 140px;
border-radius: 100%;
background: #ECA03D;
}
#d4 {
width: 100px;
height: 100px;
border-radius: 100%;
background: #191210;
}
#d5 {
width: 50px;
height: 50px;
border-radius: 100%;
background: #84271C;
}
#d6 {
width: 100px;
height: 50px;
border-radius: 100px 100px 0 0;
transform: translate(100px, -25px);
background: #ECA03D;
}
#d7 {
width: 60px;
height: 60px;
border-radius: 100%;
transform: translate(100px, 0);
background: #191210;
}
</style>
#12. Wiggly Moustache
こちらも伝家の宝刀(ry
解答コード
#12.html
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #F5D6B4;
}
div {
position: absolute;
}
#d1 {
width: 20px;
height: 20px;
border-radius: 100%;
transform: translate(-120px, 0);
background: #D86F45;
}
#d2 {
width: 100px;
height: 50px;
border-radius: 0 0 100px 100px;
transform: translate(-80px, 25px);
background: #D86F45;
}
#d3 {
width: 60px;
height: 60px;
border-radius: 100%;
transform: translate(-80px, 0);
background: #F5D6B4;
}
#d4 {
width: 100px;
height: 50px;
border-radius: 100px 100px 0 0 ;
transform: translate(0, -25px);
background: #D86F45;
}
#d5 {
width: 60px;
height: 60px;
border-radius: 100%;
transform: translate(0, 0);
background: #F5D6B4;
}
#d6 {
width: 100px;
height: 50px;
border-radius: 0 0 100px 100px;
transform: translate(80px, 25px);
background: #D86F45;
}
#d7 {
width: 60px;
height: 60px;
border-radius: 100%;
transform: translate(80px, 0);
background: #F5D6B4;
}
#d8 {
width: 20px;
height: 20px;
border-radius: 100%;
transform: translate(120px, 0);
background: #D86F45;
}
</style>
以上です！
後編は伝家の宝刀translateに頼りすぎました
是非、Flexboxでtranslateをなるべく使わずに解いてみてください！
お疲れ様でした！
CSSBattle楽しい〜！Flexbox最高！！！