CSS 達人への道①

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

学習ゲームの紹介

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

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

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

CSSBattleについて

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

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

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

実装①

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

<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>

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;
}

実装②

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

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

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を使ってもっとコード量を少なく実装するやり方です。

<b><r></r></b>

<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でのハイスコアを狙い方もわかってきたと思いますが、
無理にハイスコアは狙わず、実装①②でちゃんと作りきることが大切です。

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