どうも！LSSです！！
ハロウィンも終わり、次の大型イベントはクリスマスですね^^
ちょっと気が早いかと思いますが、物によってはもう準備に取り掛かる必要があるのかも？
↑去年の記事ですが、たまたまルミナリエの建設してるのを見かけたのもこのぐらいの時期。
で、とりあえずブログ的には「CSSでクリスマスツリーを描いてみよう！」と思ったわけですｗ
クリスマスツリー
コード
<style><!--
.waku{
position:relative;
width:300px;
height:400px;
background-color:black;
}
.midori{
position:absolute;
right:50px;
border-color:transparent transparent green transparent;
border-width:0px 80px 100px 80px;
border-style:solid;
}
.ki{
position:absolute;
right:100px;
top:320px;
width:60px;
height:80px;
background-color:brown;
}
.hoshi{
position:absolute;
top:15px;
right:105px;
font-size:55px;
color:yellow;
}
--></style>
<div class="waku">
<div class="ki"> </div>
<div class="midori" style="top: 50px;"> </div>
<div class="midori" style="top: 120px;"> </div>
<div class="midori" style="top: 190px;"> </div>
<div class="hoshi">★</div>
</div>
ごく部分的な解説
こんな感じの絵をCSSで描くにあたり、一番ネックになるのは緑色の部分ですね。
三角形を縦に並べるのですが…CSSは基本的には三角形を用意されていなくて。
↑こんな風に裏技的に描く事は出来ます。
（あと、文字記号の▲を大きく表示する、という手もありますがｗ）
コードでいうと、
.midori{
position:absolute;
right:50px;
border-color:transparent transparent green transparent;
border-width:0px 80px 100px 80px;
border-style:solid;
}
この部分が、以前の記事と同様の方法で緑色の三角を作っている部分になります。
あとはそれを、
<div class="midori" style="top: 50px;"> </div>
<div class="midori" style="top: 120px;"> </div>
<div class="midori" style="top: 190px;"> </div>
このように「縦位置を変えて並べる」事で、木っぽい緑の形にしています。
よりクリスマスツリーとして完成度を上げるには
形、ちょっと再考の余地がありますね。（ちょっと？ｗ）
あと、自分のセンスで言うと、ピカピカ点滅する飾りが欲しいところですｗ
そこはkeyframeアニメーションで作れますね。
CSS版が完成したら、SVG版を描いてみるのもいいかも知れない^^
（あと、マイクラでも今年も作るかなｗ）
そういえば…
今年はルミナリエやるのかな？
どう考えても密は避けられないイベントだけど…とググってみたら、案の定、今年は中止らしいですね^^;
代わりに
こんなのが設置されるみたいです。
そろそろ作り始めてるのかな？
ちょっと東遊園地覗いてくるか。
去年のクリスマスに
初神戸・初ルミナリエを観にこられた、さじさん(id:conasaji)。
去年というタイミングで正解でしたね^^
お子様向けクリスマスプレゼント、イチオシ！
こども向け、室内向け。
カメラはついていて（カメラ無しでより安いモデルもあります）、このお値段！
室内で遊んでいる分には、紛失・損失の心配もだいぶ減りそうですね。
（FPV機能というのがかなり気になります）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
