キャリア

CSSは簡単かつ奥が深い!フリーランスは細かい案件で稼ぎやすい

フリーランスのCSS
ポン
ポン
こんにちは、ポンです。

今日はだいたいのプログラミング学習者の方が最初に勉強するHTMLとCSSのCSSについて書いていきます。CSSはプログラミングの初歩ではありますが、実はとても奥深い技術です。クラウドソーシング系のサービスと組み合わせるとかなり稼ぎやすい副業にもなりますのでぜひチェックしてみてください。

CSSとは?

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略称で、カスケーディングとは「階段状に連続する滝」とか「連鎖的に伝わる」という意味。歴史的には1996年に誕生し当時はCSS1という名前だったが、InternetExplorerやNetScapeが主流の時代で両者ともCSS1をサポートしていなかったためまだ流行らず。

その後1998年にCSS2が誕生し、2000年以降ブラウザにサポートされていくようになり次第に人気になっていく。CSS3とCSS4に関しては該当のバージョンがアップデートされたのではなく、新たな機能をモジュールとして実装している。総称として便郡上CSS3とCSS4が存在するが現状はCSS3と呼びCSS4は策定段階。

CSSはただの装飾機能だけではない

CSSを学んでいく際、HTMLでサイトの骨格を作りCSSでサイトの装飾をしたりレイアウトを整えていく…という説明が多くあります。実際にそのとおりで何も間違ってはいないのですが、実際にはCSSでアニメーションの設定などもかなり深い範囲までできます。これは百聞は一見にしかずと言いますので、ぜひこちらのサイトをご覧ください。

臆病な魔女は、Webサイトに魔法をかけた。
https://yui540.graphics/#/

ハイスピードで進んでいく約100秒間のアニメーションですが、これらはCSSで構成されています(Twitterでご本人が発言されています)。
クオリティがとてつもないレベルです。これを初めて見た時に私は「CSSは確かに初心者向けの技術ではあるけれど、上級者になればこんなことまで可能になるのか」と衝撃を受けました。HTML+CSSという組み合わせを軽視していたつもりはありませんが、改めて見直す良いきっかけになりました。ではここからはCSSアニメーションについて書いていきます。

CSSアニメーションを使うメリットとは

CSSアニメーションを使うメリットはまず処理が早く動きがなめらかになります。またJavaScriptを使う必要がなくなります。ただしデメリットとしてはコードの量が増えてしまうことと、レガシーブラウザでは表示が出来ない場合があるということです。
技術的にはCSSにはTransitionとAnimationという機能があり、これは用いることによってアニメーション作成が可能です。Transitionは単純な動きのアニメーション、Animationは細かい繊細な動きのアニメーションです。

CSSのアニメーション書き方の種類一覧

bounce 弾む
shake 左右に揺れる
wobble ぐらぐらする
flash 点滅する
headshake ちょっと揺れる
jello ゼリーのように震える
pulse 脈打つ
swing フラフラ揺れる
rubberBand 輪ゴムのように収縮する
tada 一度小さくなってから大きく強調する
fadeIn だんだん現れる
fadeout だんだん消える
flip クルッと回る
rotateIn 回転しながら現れる
rotateOut 回転しながら消える
rollIn 回転しながら1方向から現れる
rollout 回転しながら1方向に消える
zoomIn ズームインしながら現れる
zoomOut ズームアウトしながら消える
slideIn スライドしながら1方向に消える
slideOut スライドしながら1方向に消える
lightSpeedIn 傾いて素早く現れる
lightSpeedOut 傾いて素早く消える
hinge 引っかかて落ちてくる
などがあります。

ホームページ制作やウェブデザインの案件数は多い

そんな奥深いCSSですが、フリーランスのエンジニアとしてCSS一本で食べていくにはまだ大手のサービスを見ても案件数はそんなに多くない印象です。ただし案件単価3〜5万円程度のものであればCrowdWorksやLancersには結構あります。
実際に今手元で調べてみただけでもCrowdWorksでは「ホームページ制作・Webデザイン」で228件、Lancersでは「HTML・CSSコーディング」のカテゴリーで343件見つかりました。

フリーランスとしてコーディングで稼ぐには

多くの団体・サービス・個人がWebを活用するようになってコーディングの需要は日に日に高まっています。そしてクラウドソーシングサービス系でのコーディング案件は「負担はそんなに大きく、ほどほどに稼げる」という案件が多いのが特徴です(クラウドソーシングでは大規模な案件や自社サービスの大きなリニューアルとかは少ないので)。
稼ぎ方としては1つの仕事だけではそこまで稼げませんが、月に3〜4本程度仕事を受注できるにようになればそこそこ稼げる副業になります。

CSS案件はガッツリ職場でコーディングしてももちろん稼げると思いますが、個人的には月単価3〜5万円とかの小さい依頼の方がオススメです。これらの細々とした案件は慣れるまでは数日間かかったりして時給換算あまり稼げないのですが、5件10件こなすようになると爆速で処理できるようになってくるので時給換算がとても高くなります。またクラウドソーシングサービスの場合は基本的に人と会う必要が無いのでリモートワークとしても回せるのが魅力的です。

まとめ

CSSですが、現在の業界ではHTMLと共に最初に学ぶプログラミングの初歩の様に扱われています。ですが実際にはまだまだ誕生してから20年と少ししか立っていない技術で、これからますます多くの方が発信者になりWebサービスが増えてくるに連れてコーディングやデザインスキルの需要は高まってくるかと思います。
何かのプログラミング言語に秀でようと思った時に、CSSがかなり使えてプラスでPhotoshopやJavaScriptがかなり書けるなどの技術があればかなり重宝される人材になれるでしょう。