CSSで図形を描く復習

この記事は、フィヨルドブートキャンプ Part 2 Advent Calendar 2020 12日目の記事です。 前日はgallardoさんの forEach()メソッド(配列) - gallardo diaryでした。

adventar.org

クリスマスなので…🎄

私がこれまでフィヨルドブートキャンプで履修したプラクティスの中でも上位に楽しかった「CSS」で、復習を兼ねてクリスマスツリーを描くことにしました🙂

https://codepen.io/takopom55/pen/WNGrVGb

See the Pen simple-christmas-card by takopom (@takopom55) on CodePen.

(↑この埋め込み表示で見ると背景が崩れていますね…!!)
(↓作成中はこのような表示でした…!!)

f:id:takopomm:20201212180333p:plain

borderで描いた三角形を使っています。

星は3つの三角形を回転させる技を使うことで実現できるとわかりました。凄…!

ラクティスに着手した当時は、CSSについては、「色やマージンを指定する」くらいの知識しか持ち合わせていなかったので、様々な図形が作れることにとても驚いたのでした👀 「CSSで何でもできるじゃない…!!」と感動しました〜!

Flexboxのことも思い出し、よい復習になりました。

もうひとつ🎄

Ruby2Dという2D描画系のgemを見つけたので、息抜きにFlappy Birdをリスペクトしたものを作ろう〜とちまちま進めていましたが、カレンダー当日に間に合いきれず😱💦 GitHubに途中経過ですが置きました。

github.com

このようなものができました。(ゆくゆくは動画をアップしたい…) f:id:takopomm:20201212175332p:plain

ruby main.rbと実行するとデスクトップアプリが立ち上がり、2D描画が行われます。 基本的な2D描画に必要な機能はあるようですし、使い方もシンプルなので、Rubyで2Dゲームを作れます✨

素材

おわりに

他のみなさんの記事とは毛色が違ってしまって恐縮です…!
CSSにもう少し慣れてみたい」「クリスマスっぽいことをしたい」という気持ちを消化できてよかったです🙂

学習については、進捗がかなりゆっくりな生徒なので、どんどん他の受講生のみなさんに追い抜かれていますが😭、細々と続けてきました。ようやく終盤です〜😭
今年の春は、思い切って休会したこともありました。 仕事をしているから、子どもがいるから、などと言い訳にしたくないと細々やっていましたが、コロナ休園休校で自宅保育+在宅勤務の時は、もう限界だ〜…と学習はお休みしていました。。 ふたたび学習を始めると、やっぱり楽しいなぁと、心満たされる気持ちでいっぱいになりました。
「自分がやりたいことをできる」とは、なんて素晴らしいことなんだろう…!!
そんな、当たり前のことすら幸せだなと思う一年となりました!