【CSSBattle】最初の12問を解いてみた(後編)【Flexbox】


こんにちは:laughing:
HTML/CSS初心者の rudorufu1981 と申します！

今回は、よくCSSの練習サイトとして紹介されている
**「[CSSBattle](https://cssbattle.dev/battle/1)」の最初の12問** `Battle #1 - Pilot Battle`
を流行りの**Flexbox**を使って解いてみました！
解答コードを紹介している人がググっても見つからなかったので、記事にしてみました！
**Flexbox**初心者の方の参考になれば嬉しいです！僕も初心者ですが:sweat_smile:

※本来のCSSBattleの楽しみ方はいかに短いコードにできるかですが、
今回は**Flexbox**の勉強のためにやったのでコード量は気にせずやっていきます。

:::note info
**今回は後編ということで、#7~#12 の6問を解いていきます。
よろしくお願いします！**
:::

***

#### 記事リンク
- [【CSSBattle】最初の12問を解いてみた(前編)【Flexbox】](https://qiita.com/rudorufu1981/items/eecbd783c1ceac0b163b)
- [【CSSBattle】最初の12問を解いてみた(後編)【Flexbox】](https://qiita.com/rudorufu1981/items/744648f2ceca1f7b94ac) ←本記事
***

#### Flexboxについての最低限の知識
- [CSSの中央寄せはFlexbox万能説](https://qiita.com/utf8sjis/items/4b69c864aa0f4f79bc94)
- [日本語対応！CSS Flexboxのチートシートを作ったので配布します](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

***
# 【後編】 #7~#12
## #7. Leafy Trail
画像が重なるのでもちろん`translate`で実装します！
![#7. Leafy Trail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/bdebafa3-c027-2834-7ffc-0dbcc4483e02.png)

<details><summary>解答コード</summary><div>

```#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>
```
</div></details>

## #8. Forking Crazy
12問の中で最難関の問題！
10px下に`translate`するのを思いつくかどうかの発想力の勝負な気がします・・・:sweat_smile:
![#8. Forking Crazy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/771b028b-c840-c2d3-6a82-8773105db518.png)



<details><summary>解答コード</summary><div>

```#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>
```
</div></details>


## #9. Tesseract
**Flexbox**に慣れてきたら、もうこのくらいの問題は簡単！
![#9. Tesseract.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/e76130ed-33a7-2327-3ec3-ee43d1eb99c0.png)

<details><summary>解答コード</summary><div>

```#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>
```
</div></details>

## #10. Cloaked Spirits
勉強も兼ねて擬似要素を使って実装してみました！
![#10. Cloaked Spirits.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/5f2363d5-5b27-c164-ed9a-0451c2ea29f3.png)

<details><summary>解答コード</summary><div>

```#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>
```
</div></details>

## #11. Eye of Sauron
伝家の宝刀`translate`で簡単！
![#11. Eye of Sauron.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/48b994e0-853b-0ffa-6dda-4f5256c16caf.png)

<details><summary>解答コード</summary><div>

```#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>
```
</div></details>

## #12. Wiggly Moustache
こちらも伝家の宝刀(ry
![#12. Wiggly Moustache.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/fcb6c8c7-14a0-fd9b-d601-a805459b88a0.png)


<details><summary>解答コード</summary><div>

```#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>
```
</div></details>

***

**以上です！**
後編は伝家の宝刀`translate`に頼りすぎました:laughing::laughing::laughing:
是非、Flexboxで`translate`をなるべく使わずに解いてみてください！
お疲れ様でした！

**CSSBattle楽しい〜！Flexbox最高！！！**