クリスマスツリーをCSSで作ってみた

# はじめに
アドベントカレンダーといえばクリスマス。
クリスマスといえばツリー。
ということで、とってもありきたりですがクリスマスツリーをCSSで作ってみることにしました。

# 用意するもの
* もみの木
* 電飾
* てっぺんの星
* オーナメント

# 作ってゆく
## もみの木
まずはもみの木から。これがないと始まりませんからね。
何となくもみの木は3段のイメージでいたんですが、画像検索してみるとそんなことないんですね。
いいんです。気にしません。borderを使っていい感じの三角形を作って、よしなに重ねていきます。
幹の部分もborderを使って台形を作り背面に置きます。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="sasakiy0819" data-slug-hash="vYEXQOb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tree">
  <span>See the Pen <a href="https://codepen.io/sasakiy0819/pen/vYEXQOb">
  tree</a> by sasakiy (<a href="https://codepen.io/sasakiy0819">@sasakiy0819</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 電飾
とにかくもう何が何でもキラキラ光らせたかったので、オーナメントの前にこれを作ります。
作り方は簡単。適当なサイズの円を作り、アニメーションを使ってbox-shadowで光彩を加えていきます。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="sasakiy0819" data-slug-hash="eYmBavY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="light">
  <span>See the Pen <a href="https://codepen.io/sasakiy0819/pen/eYmBavY">
  light</a> by sasakiy (<a href="https://codepen.io/sasakiy0819">@sasakiy0819</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## てっぺんの星
まず、五角形の星型の内角の和は180°になるということを思い出すところから始めます。
正五角形の星型にするには頂点の角度は36°にしたいところなので、36°-36°-108°の三角形を３つ用意して、それらを重ねて正五角形を作ります。
これに黒丸背景を重ねればサッポロビールのロゴの完成ですね。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="sasakiy0819" data-slug-hash="OJPbbKY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="star">
  <span>See the Pen <a href="https://codepen.io/sasakiy0819/pen/OJPbbKY">
  star</a> by sasakiy (<a href="https://codepen.io/sasakiy0819">@sasakiy0819</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## オーナメント
本当は杖とかヒイラギの葉とか作りたかったんですが、断念しました。
プレゼントの箱を用意することにします。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="sasakiy0819" data-slug-hash="ZEYKOeY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ornament">
  <span>See the Pen <a href="https://codepen.io/sasakiy0819/pen/ZEYKOeY">
  ornament</a> by sasakiy (<a href="https://codepen.io/sasakiy0819">@sasakiy0819</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 組み立てる
用意したパーツたちをひたすら並べて組み上げていきます。
アクセントにアニメーションで雪を降らせてみたりします。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="sasakiy0819" data-slug-hash="yLybJxY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="merged">
  <span>See the Pen <a href="https://codepen.io/sasakiy0819/pen/yLybJxY">
  merged</a> by sasakiy (<a href="https://codepen.io/sasakiy0819">@sasakiy0819</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# まとめ
CSSってなんでもできますねー。
普段の業務ではなかなか機会のなさそうな使い方ですが、きっとどこかで約には立つのではないかと思います。