本連載は、「 エキスパートへの道しるべ（Load to Expert） 」をテーマとして、初級者がエキスパートになるためのヒントを、日本を代表するエキスパートの方々に伺う企画です。
ウェブデザインの世界で欠かせない技術であるCSS。その奥深さと進化し続ける特性から、習得には時間と情熱が必要とされています。本記事では、スタートアップのプロダクトエンジニアとして活躍する鹿野壮氏に、CSSのエキスパートになるまでの道のりと、初心者が知っておくべき学習方法について詳しく伺いました。
鹿野さんをTechFeed上でフォローしよう！
CSSの魅力と進化
――まずは、簡単に自己紹介をお願いします。
鹿野: 私は鹿野壮と申します。九州大学芸術工学部音響設計学科を卒業後、現在はUbieという会社でプロダクトエンジニアとして働いています。主にフロントエンドを中心に、バックエンドやアプリ開発も行っています。
――CSSの魅力と進化について教えてください。
鹿野: CSSは基本的にWebページの装飾を担う言語です。
私は以前、画面上のインタラクションやエフェクトを表現するのにJavaScriptをよく使っていたのですが、その時は、画面の装飾やアニメーションなどを実装するために多くのコードを書く必要がありました。一方、CSSではコードが短く端的で、それでいてパフォーマンスの高い表現ができる んです。それで、CSSってすごい楽しいなと思い始めるようになりました。新しい機能もどんどん出てくるので、それを追っていくのも楽しいです。
また、CSSはどんどん進化しています。特に最近は、Internet Explorerがサポート終了となり、Microsoft EdgeもChromeと同じChromiumエンジンを採用するようになったことで、新しいCSSの機能を以前よりも気軽に使えるようになりました。各ベンダーが積極的に新機能を追加し、多くのユーザーがそれを利用できる環境が整っているのが魅力です。
CSSエキスパートになるまでの道のり
――CSSのエキスパートになるまで、どのように学んできたのでしょうか？
鹿野: 最初は本を買って、サンプルコードを丸写しし、一つ一つ動作を確認しながら学んでいましたね。
「このコードをこう書いたら動くんだ」という経験を自分でしていくことで知識を定着させていきました。
この基本的なスタンスは今も変わっていません。ブログや本、勉強会で得た知識を、実際に手を動かして確認することが大切だと思っています。
そうして学んだことに対して、自分でXやブログ、書籍を通して知識をアウトプットしていったり、人に教えることによって、より理解が深まります。
「知識を得て、発信し、現場でコードを書く」という、 インプット・アウトプット・実践の3つを繰り返す ことで、なんとかCSSの基本について理解できたというところまでいった、という感じですね。
――そうしたモチベーションを保つにはどうしたらいいのでしょうか？
鹿野: まずは続けること だと思います。
私も発信を始めたきっかけは、会社から勧められて、あまり乗り気ではなくブログを書き始めたところからだったんです。「自分の記事なんて誰も読まない」なんて後ろ向きな気持ちで書いていましたが、続けていくと、何らかの反響がある ものなんですね。ネガティブな反応ももちろんあるんですが、ポジティブな反応もいただけて、それが励みになって続けていくことができました。
そうこうしているうちに、会社のイベントでの登壇を勧められ、発表するようになりました。登壇すると、そこでまたポジティブな声をいただくことができて、次の登壇へのモチベーションになるという好循環が生まれ、気がついたらそれが習慣化されていました。
CSS初心者におすすめの学習アプローチ
――初心者のCSS学習方法について、おすすめの方法があれば教えてください。
鹿野: 私としては、まずはCSSに関する新しい情報に接することをおすすめします。 各ブラウザの公式サイトでは、新機能の情報が発信されています。
まずは面白い情報に接すること。それも、できるだけ一次情報に接すること で、自分の興味を育てていくことが大事だと思っています。その後で、深堀りしていくのがいいのではないかと。
いきなり新しい情報に接するのが難しく感じるなら、評判の良い本を一冊購入し、そこに書かれているコードを、実際に手を動かして試してみるのもいいんじゃないかと思います。
いきなり分厚い入門書を買っても、挫折しやすいとは思うのですが、ただ書くだけじゃなくて、「こう動かしてみたらこう変わるんだ」とか「これってどういう意味なんだろう」みたいなのを納得するまで調べる、みたいなことをしていくのが、知識を深める上でもおすすめです。
CSSエキスパートの情報収集方法
――普段、どのように情報収集をされていますか？
鹿野: 基本的には、ブラウザベンダーの公式ブログを定期的にチェックしています。 特にweb.devはGoogleが運営しており、ウェブに関する最新情報を日本語でも提供してくれているのでおすすめです。
他には、ChromeやWebKitのリリース情報も確認しています。また、私はTypeScriptも好きなので、Total TypeScriptというサイトも定期的にチェックしています。
得た知識は実際に触って動かしてみるだけでなく、Xなどで自分の言葉で発信することも心がけています。自分の言葉でまとめる、という作業がキーになってきますので、誰にも見られない記事でも良いので外に出す、あるいはNotionなどでメモにまとめるといった習慣も役立つのではないかと思います。
――SNSなどで特に参考にしているアカウントはありますか？
鹿野: Xでは、自分の欲しい情報がほぼ手に入る非公開のリストを作成しています。そこでは、公式ブログや高品質な情報を発信している人など、できるだけ一次情報に近い人をフォローしています。CSSに関しては、特定の専門家をフォローしているのですが、これは「秘伝のタレ」なので、後で特別にご紹介させていただきます（笑）。
鹿野さんが注目する技術トレンド
――（CSSに限らず）現在注目しているトピックを教えてください。
鹿野: CSSであれば、CSS Gridの新機能、特に サブグリッド に注目しています。
これは入れ子のようなCSS Gridを実現する機能で、従来のレイアウトを大きく変える可能性を秘めています。CSS Gridはまだ進化の余地を残していて、今後メイソンリーグリッド（※）のようなことができるようになる予定です。まだブラウザの対応は限定的ですが、今後の進化に期待しています。
もう一つは、AIエージェント です。Devin・Cursor・Cline・Claude Codes等のAIツールが、開発の世界を大きく変えつつあると感じています。
※メイソンリー（Masonry）グリッド…高さの違うカード型 UI を敷き詰めるレイアウト。PinterestのUIが有名。
鹿野さんをTechFeed上でフォローしよう！
初学者へのメッセージ
――最後に、これからCSSを学ぼうとしている読者へメッセージをお願いします。
鹿野: CSSは本当に楽しい技術です。 JavaScriptやTypeScriptとかも楽しいんですけど、もっと手軽に画面を変えたり、要素を変えたり、アニメーションしたりといった複雑な表現を、特別な環境がなくても、ブラウザさえあれば手軽に実現できるのが魅力です。
CSSは、新しい機能を覚えれば覚えるほど、普段のサイト制作やアプリ制作の仕事がどんどん楽になって、高品質にもなって、バグも少なくなって…と、いいことづくめなんですよね。
新しい機能を学ぶのは大変に感じるかもしれませんが、「急がば回れ」で、先に苦労することによって、将来の開発や制作がとても楽になります。ぜひ、楽しみながら勉強していってください。
――本日は貴重なお時間をいただき、ありがとうございました。
※鹿野さんの情報収集における「秘伝のタレ」
CSSの最先端情報を知りたい方は以下のTechFeedチャンネルをフォローしよう！
