この記事は、フィヨルドブートキャンプ Part 2 Advent Calendar 2020 12日目の記事です。 前日はgallardoさんの forEach()メソッド(配列) - gallardo diaryでした。
クリスマスなので…🎄
私がこれまでフィヨルドブートキャンプで履修したプラクティスの中でも上位に楽しかった「CSS」で、復習を兼ねてクリスマスツリーを描くことにしました🙂
https://codepen.io/takopom55/pen/WNGrVGb
See the Pen simple-christmas-card by takopom (@takopom55) on CodePen.
(↑この埋め込み表示で見ると背景が崩れていますね…!!)
(↓作成中はこのような表示でした…!!)
border
で描いた三角形を使っています。
星は3つの三角形を回転させる技を使うことで実現できるとわかりました。凄…!
プラクティスに着手した当時は、CSSについては、「色やマージンを指定する」くらいの知識しか持ち合わせていなかったので、様々な図形が作れることにとても驚いたのでした👀 「CSSで何でもできるじゃない…!!」と感動しました〜!
Flexbox
のことも思い出し、よい復習になりました。
- 色: こちらのカラーコードを使いました
- フォント: Google Fontsで探しました
- 参考記事
もうひとつ🎄
Ruby2Dという2D描画系のgem
を見つけたので、息抜きにFlappy Birdをリスペクトしたものを作ろう〜とちまちま進めていましたが、カレンダー当日に間に合いきれず😱💦
GitHubに途中経過ですが置きました。
このようなものができました。(ゆくゆくは動画をアップしたい…)
ruby main.rb
と実行するとデスクトップアプリが立ち上がり、2D描画が行われます。
基本的な2D描画に必要な機能はあるようですし、使い方もシンプルなので、Rubyで2Dゲームを作れます✨
素材
- ほとんどこちらの素材でできています
- flaticonはサイトの雰囲気が好みでよく覗いてしまいます
おわりに
他のみなさんの記事とは毛色が違ってしまって恐縮です…!
「CSSにもう少し慣れてみたい」「クリスマスっぽいことをしたい」という気持ちを消化できてよかったです🙂
学習については、進捗がかなりゆっくりな生徒なので、どんどん他の受講生のみなさんに追い抜かれていますが😭、細々と続けてきました。ようやく終盤です〜😭
今年の春は、思い切って休会したこともありました。
仕事をしているから、子どもがいるから、などと言い訳にしたくないと細々やっていましたが、コロナ休園休校で自宅保育+在宅勤務の時は、もう限界だ〜…と学習はお休みしていました。。
ふたたび学習を始めると、やっぱり楽しいなぁと、心満たされる気持ちでいっぱいになりました。
「自分がやりたいことをできる」とは、なんて素晴らしいことなんだろう…!!
そんな、当たり前のことすら幸せだなと思う一年となりました!