池田泰延さんが語る、「CSSエキスパートへの道しるべ」 — CSSの入門、学習法から最新トレンドまで

本連載は、「 エキスパートへの道しるべ（Load to Expert） 」をテーマとして、初級者がエキスパートになるためのヒントを、日本を代表するエキスパートの方々に伺う企画です。

Webの表現を根本から支えるCSS。時代とともにその機能は拡張され、もはや単なる装飾のための言語ではなくなっています。今回インタビューに応じてくださったのは、株式会社ICSでフロントエンドのテクニカルディレクションを担い、CSSの進化と表現における可能性を追い続けている池田泰延さん。
インタビューを通じて、CSSとの出会いから、表現力を支える技術の広がり、学習のアプローチ、注目する最新トピックまで、深く掘り下げていきます。

CSSエキスパート池田泰延さん

池田さんをTechFeed上でフォローしよう！

池田泰延さん — CSSを軸に、幅広い技術で表現力を支えるエキスパート

——それではまず、簡単に自己紹介をお願いします。

池田: 株式会社ICSの池田と申します。普段は、WebサイトやWebアプリのフロントエンド開発におけるテクニカルディレクションを担当しています。とくにCSSを得意としていますが、それだけにとどまらず、JavaScriptやTypeScript、WebGL（※）、WebGPU（※）、Canvas（※）といった表現系の技術全般にも関心があります。

——なるほど、CSSを中心にしつつ、よりインタラクティブでグラフィカルな表現も守備範囲に入っているのですね。

池田: そうですね。元々Flashの時代から、ユーザーにどう印象を与えるか、どう見せるかという「表現」を重視してきた背景があるので、CSSはその手段のひとつという位置づけです。

※WebGL:WebGL（Web Graphics Library）は、 ブラウザ上で3Dグラフィックスを描画するためのJavaScript API。 OpenGL ESをベースにしており、インストール不要でGPUによるハードウェアアクセラレーションを活用した高度なグラフィックス描画が可能です。ゲームやビジュアライゼーション、インタラクティブなWebアプリなどで利用されます。
参考：MDN WebGL 入門

※WebGPU: 次世代のブラウザ向けグラフィックスAPI。GPUを直接操作できる感覚で扱うことができ、高性能なグラフィックス・計算処理が可能。
参考：MDN WebGPU 解説

※Canvas:Canvas（HTML <canvas> 要素）は、 JavaScriptを使って動的に図形や画像を描画するための仕組み です。2Dグラフィックスの描画が可能で、ゲーム、チャート、画像処理、アニメーションなどに活用されます。WebGLと組み合わせれば3D描画も可能です。
参考：MDN Canvas API

CSSの魅力とは — 技術の進化と知識の組み合わせが生む表現

——では、改めてCSSという技術の概要とその魅力についてお聞かせください。

池田: CSSはWebサイトのレイアウトや色彩、アニメーションなど、視覚的な表現を制御するための技術です。その魅力は、 ここ20年での進化の大きさ にあると思っています。

2000年代前半は、 float を駆使してなんとかレイアウトを実現していた時代でした。しかし、今では Flexbox や CSS Grid、 Subgrid（※）といった強力なレイアウト手段があります。また、インタラクションもJavaScriptを使わずにCSSで実現できるようになってきました。

CSSは、知識をどれだけ持っていて、それをどう組み合わせるかで表現の幅が決まる、 いわば「知識のパズル」なんです。

※Subgrid:CSS Gridの一部として、親グリッドの構造を子要素にも引き継げるレイアウト技法。ネストしたグリッドの整列がしやすくなる。

エキスパートになるまでの道のり — 成功と失敗から得た教訓

——池田さんがCSSやWeb表現のエキスパートになるまで、どんな学び方をされたのでしょうか？

池田: 最初はWeb制作会社で広告系や製品サイトを3年間手がけていて、基礎的なCSSを実務で自然に身につけました。その後、2010年前後のHTML5の盛り上がりの中で、新しい表現が次々に登場して、「これ何ができるんだろう？」と調べることが習慣になっていったんです。
Twitter（現X）やブログでの技術発信も活発になり、 発見と発信のサイクルが学びに直結していました ね。

——CSSに関して印象的だった成功体験や失敗体験があれば教えてください。

池田: 実は、 CSSフレームワークを使って「成功した」と思えたことが一度もない んです。 たとえばBootstrap （※）。導入当初は便利で見栄えも良かったのですが、数年経つと見た目が古くなり、剥がすのも困難。負債化するケースが多いです。

今も議論が分かれる Tailwind CSS（※）なども、表現力や効率の高さと引き換えに、将来のメンテナンスコストをどう見るかが課題 です。

※Bootstrap:Bootstrapは、Twitter社が開発したオープンソースのCSSフレームワーク。あらかじめ用意されたコンポーネントやレイアウトグリッドを活用することで、短時間で見栄えのよいページを作成できます。一方で、デフォルトのデザインが強く出るため、カスタマイズの自由度が下がる、プロジェクトが大規模化すると剥がすのが困難になるといった課題も指摘されています。

※Tailwind CSS:ユーティリティファーストなCSSフレームワーク。クラス名ベースで細かくスタイルを適用できるが、HTMLが肥大化しやすい一面もある。

CSSを学ぶには — 初学者におすすめの学習法と情報源

——CSSをこれから学ぼうとする方に、おすすめの学習方法はありますか？

池田: まずはGoogleのweb.devのチュートリアルが網羅的でおすすめです。日本語翻訳されていますし、モダンな内容が多い。あとはCodeGridも非常に良質な情報源です。

情報収集においては、Chrome Platform Statusを毎月確認することをおすすめしています。新しいCSS機能の実装状況がひと目でわかります。

注目しているトピック — これからのCSSとHTMLの進化

——現在注目しているトピックがあれば教えてください。

池田: まずひとつ目は「 コンテナクエリ 」です。代表的な使い方として、 親要素のサイズに応じてスタイルを切り替えられます。 従来はウィンドウ幅に応じてレイアウトを変えるメディアクエリが一般的でしたが、コンポーネント単位での調整ができるようになります。また、サイズのクエリーに限らず、CSS変数やスクロール状態を検知できるので応用の効く技術でもあります。今後のWebデザインやUI設計の標準になっていくでしょう。

ふたつ目が、 CSSのタイポグラフィ表現 、特に word-break: auto-phrase や text-autospace 、text-box などです。細かなタイポグラフィ制御が可能になることで、日本語の美しい表示やユーザー体験の向上にもつながると感じています。

そして３つ目は、 Web上でのHDR（High Dynamic Range）表現 です。これは写真や映像などの分野では少しずつ導入が進んでいますが、いよいよWebでも使えるようになってきました。たとえばHTMLの <picture> や <video> タグ、CSSの color-gamut メディアクエリなどによって、高輝度・広色域の表示に対応する技術が整いつつあります。これが一般化すれば、Webサイトの臨場感や没入感を高められるようになります。

池田さんをTechFeed上でフォローしよう！

初学者へのメッセージ — 学びの視点を持とう

——最後に、CSSを学ぶ読者の皆さんにメッセージをお願いします。

池田: 今は、 昔JavaScriptが必要だったことがCSSとHTMLだけでできる時代 です。ただ、古い情報に基づいた学習だと、そうした進化に気づきづらいかもしれません。

学ぶときは「いつ書かれた情報か」「どの技術が使われているか」に意識を向けてください。古いやり方へのリスペクトは大切ですが、現代に合った効率的な方法を見つけて学んでいってほしいです。

参考リンク集

CSSの最先端情報を知りたい方は以下のTechFeedチャンネルをフォローしよう！