CSS 達人への道①

自称SASSエンジニアの岩森です。
達人への道シリーズはCSSの達人レベルに近づけるように、
フロントエンド開発者に役立つCSS情報をお伝えしてきます。

## 学習ゲームの紹介

まずは最初に学習サイトのご紹介です。
`Flexbox / Grid Layout`を学ぶならこの2つの学習サイトがおすすめ！

https://flexboxfroggy.com/#ja

https://cssgridgarden.com/#ja

ただ勘のいい人だったり、なんとなくクリアできたって人も中にはいるかもしれません。
ちゃんと`Flexbox / Grid Layout`基礎を勉強しないでいざ実装すると、
デザイン通りにレイアウトが組めないという事態に。。。

しっかり基礎を固めましょう。

https://dotinstall.com/lessons/basic_cssgrid_v2

## CSSBattleについて

`CSSBattle`では他のユーザーとバトルすることができます。
書いたコードによるユーザー同士のスコア勝負です。
与えられた図形をより少ないHTMLとCSSを使って作って行きます。
コードが少なければ少ないほどハイスコアになります。

## 実際にチャレンジしてみる

すこし簡単な問題ですが、下記リンクのお題を実装してみてください。
自分も実装したコードを載せときます。

https://cssbattle.dev/play/99

:writing_hand:
:writing_hand:
:writing_hand:
:writing_hand:
:writing_hand:
:writing_hand:
:writing_hand:
:writing_hand:
:writing_hand:
:writing_hand:

### 実装①

:neutral_face: リボンがあって、4つの白いボックス
:neutral_face: 実装するとこんな感じ

```html
<div class="gift-box">
  <div class="gift-box__ribbon"></div>
  <div class="gift-box__body">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
```

```css
body {
  background-color: #AC474B;
}
.gift-box {
  width: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gift-box__ribbon {
  border: 10px solid #fff;
  border-radius: 50% 50% 0 50%;
  width: 20px;
  height: 20px;
  -webkit-box-reflect: right -10px;
  margin-bottom: 20px;
  margin-left: 35px;
}
.gift-box__body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 140px;
}
.gift-box__body > div {
  width: 60px;
  height: 60px;
  background: #fff;
}
.gift-box__body > div:nth-child(4),
.gift-box__body > div:nth-child(3) {
  align-self: flex-end;
}
```

### 実装②

:neutral_face: リボンがあって、4つの白いボックス。
いやちょっと見方を変えて、白いボックスに縦棒と横棒の組み合わせで実装できる。

```html
<div class="gift-box">
  <div class="gift-box__ribbon"></div>
  <div class="gift-box__body"></div>
</div>
```

```css
body {
  background-color: #AC474B;
}
.gift-box {
  width: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gift-box__ribbon {
  border: 10px solid #fff;
  border-radius: 50% 50% 0 50%;
  width: 20px;
  height: 20px;
  -webkit-box-reflect: right -10px;
  margin: 0 0 20px 35px;
}
.gift-box__body {
  background: #fff;
  height: 140px;
  position: relative;
}
.gift-box__body::before,
.gift-box__body::after {
  content: "";
  background-color: #AC474B;
  position: absolute;
}
.gift-box__body::before {
  width: 100%;
  height: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.gift-box__body::after {
  width: 20px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
```

### 実装③

参考程度に`-webkit-box-reflect`を使ってもっとコード量を少なく実装するやり方です。

```html
<b><r></r></b>
```

```css
<style>
* {
  background: #AC474B;
  position: fixed;
}
b {
  width: 20px;
  height: 20px;
  border: 10px solid #fff;
  border-radius: 50% 50% 0;
  top: 50;
  left: 165;
  -webkit-box-reflect: right -10px;
}
r {
  border: 30px solid #fff;
  top: 110px;
  left: 130px;
  -webkit-box-reflect: below 20px;
}
</style>
```

## 最後に

如何だったでしょうか？
今回のお題は簡単でした？難しかったですか？

いきなり実装③の方法で実装できる人もまぁいないでしょう。
`CSSBattle`でのハイスコアを狙い方もわかってきたと思いますが、
無理にハイスコアは狙わず、実装①②でちゃんと作りきることが大切です。

ぜひチャレンジしてみてください！