マークアップエンジニアによる 100days CSS チャレンジ

100days CSS チャレンジとは

読んで字のごとく、「CSSを100日書き続けるチャレンジ」です。
具体的には以下の流れ。

・CSSを使ったビジュアル表現の課題を1日1つこなす。

たったそれだけ。

100days CSSを始めたきっかけ

「1日1つコンポーネントでもなんでも良いから、いろんなサイト見て、「これCSSで表現できるかな？」と思って見つけたものを模写していこう」と職場の先輩が言ってくださったことがきっかけです。

というのも、業務を遂行していく中でふと、「業務をこなすだけだと、自分の知識の量が広がらないのではないか...？」と不安を覚え始めました。

・「コーディングを学習するには手を動かすことが一番だよ」
・「自分の作りたいものをまずは作ってみよう」

ということはよく言われているし、頭ではわかっているけど実際問題作りたいものが常にあるわけではないもんなぁ...と思ってたら動くはずの手も動かずどうしようかとモヤモヤしていたところに、先輩が上記のようなご助言をくださいました。

そこで、共有してくださったのが、100days CSSです。

100days CSSってどんなサービス？

・1日1つ日替わりでCSSを使ったビジュアル表現の課題が課せられる(スクリーンショットの左側)
・open templateからcodepenに遷移しそこでその日の課題をこなす
・codepenと連携でき、submitして自身のコードを公開もできる

といった、割とシンプルなサービスです。
こちらを100日間続けます。

2週間経ってみて

現時点(2018年12月6日時点)では、18日分の課題をこなしているのですが、
18日間やってみて実際にチャレンジを行う前と現状での変化は以下を感じています。

・CSSアニメーションに対する恐怖心がなくなった
・それまであまり使うことがなかったtranslateやtransition、animationの書き方を覚えた
・fill、間接セレクタの「~」など今まで業務の中で使う機会があまりなかったものに触れることができた
・「この表現どうやってるんだろう」と当たっているスタイルを覗き込んで、「こうやってできるんだ！！！」という学びが多い

など、チャレンジ中ではありますがやってよかった。と思っています。

100days cssでやった課題をsubmitするの忘れてたので、codepenの中で実際作ったものにタグをつけて管理しています。

これから

100日経つ頃には課題を確認したあとに答えを見ないで自分の力だけで表現できるようになること・CSSプロパティの挙動をきちんと理解して適切にスタイルを当てられるようになることが直近の目標です。
実業務ではまだ自分からCSSを使用したインタラクション表現を入れてみたり、提案したり等することはしていないため(効果的なインタラクション提案がまだできない)、今後はデザインをより効果的に見せられるような提案・実装ができるようになったらなと思います。