実物のクリスマスツリーは邪魔になるからCSSで作ってみる

実物のクリスマスツリーは邪魔になるからCSSで作ってみる

  • 2016.12.21
  • ひらの

|^・ω・)/< こんにちは、ひらのです。

今年もいよいよやってまいりました。クリスマスシーズンです。

この時期になると、子供の頃に毎年クリスマスツリーの飾り付けをするのが楽しみだった…
そんな記憶が蘇ります。

クリスマスツリー可愛いけれど、実物を家に置くのには少々邪魔ですよね…
実用性ないし。

なので今年はCSSで2次元クリスマスツリーを飾り付けることにしました。(・ω・)/

ブラウザで見るツリーなら邪魔にならない&片付けも楽ちん
といい事づく目な感じがします。

もみの木を配置

モミの木
まずはCSSでもみの木を作成して、
画面の真ん中にババーンと もみの木 を配置します。

色も変えられますが、今回はオーソドックスにグリーンのもみの木。
大きくすると迫力が増しますが、オーナメントがたくさん必要になるので悩みどころです。

オーナメントの準備

オーナメント
オーナメントをCSSで作成します。
好きな形・色でバンバン作ってください。

今回は、てっぺんの星・リボン・ひし形・ボール・プレゼントボックス を作成。
何色かバリエーションを作成するとツリーが賑やかになると思います。

飾り付け

装飾1
もみの木のてっぺんに星を飾ります。
私は最初に星を差すのが好きです。

装飾2
続いて、モミの木にリボンを巻き付けます。

装飾3
ひし形のオーナメントをいろんなサイズで配置します。

装飾4
お次はボールのオーナメントを配置。

実物のボールオーナメントはラメなどが付いていて手が汚れてしまいますがCSSならその心配もいりません( ˘ω˘)

装飾5
ツリーの下にプレゼントボックスを置いて、演出します。

気分を盛り上げる

装飾5
最後に電飾を付けて完成です!!!

クリスマスプレゼントも用意

クリスマスといえば、プレゼント。
今年は宝石のルビーを用意しました。(横からVer.)
ルビー

いかがだったでしょうか( ˘ω˘)
今回、CSSでクリスマスツリーを作成するにあたって
下記のサイトを参考にさせていただきました。
css-tricks

おまけ

と、いうわけで今回のCSSクリスマスツリーのコードになります。
※Chrome以外のブラウザでは表示が崩れる場合があります

最後までお付き合いいただきありがとうございました(`・ω・´)ノ

HTML

CSS

PAGE TOP

PAGE TOP