Tweet
Tweet

Slide 1

Slide 1 text

Tailwind CSS の小話 
 「コンテナークエリーって便利」 
 CSSの進化を刮目せよ


Slide 2

Slide 2 text

自己紹介📝
 名前：やまだゆうき
 Twitter：@wf_o4
 所属：SIerで働いてます
 
 普段の業務内容
 生成AIのアプリケーション開発をしています
 
 得意な技術領域
 Webフロントエンド、Azure、Python
 自然言語処理（NLP）
 2

Slide 3

Slide 3 text

今日、伝えたいこと 📢
 ● Tailwind CSS v4 からサポートされたコンテナークエリーが便利
 3

Slide 4

Slide 4 text

コンテナークエリー 
 メディアクエリーの代替となるもので、親要素を基準にスタイルを設定できる CSSの機能
 4 画像出典元URL: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries

Slide 5

Slide 5 text

コンテナークエリーとTailwind CSS 
 コンテナークエリーはTailwind CSS では v4 から標準でサポート
 （v3まではプラグインが必要）
 5
基準となる要素
 基準となる要素が28rem （448px）以上の場合のス タイル設定


Slide 6

Slide 6 text

コンテナークエリーで何が嬉しいか 
 コンテナークエリーはメディアクエリーと異なり画面サイズではなく
 親要素を基準にできるのでコンポーネントベースの実装と相性が良い
 6 コンポーネント自身のサイズでスタイリング


Slide 7

Slide 7 text

応用例
 7

Slide 8

Slide 8 text

応用例）全体のレイアウトの把握 
 8 全体のレイアウトは Gridで構成


Slide 9

Slide 9 text

応用例）グリッドを構成する要素の特徴の把握 
 9 Grid内の最初の要素
 （:first-child）


Slide 10

Slide 10 text

応用例）作成するコンポーネントの把握 
 10 コンテナークエリーで
 同一のコンポーネントと して実装


Slide 11

Slide 11 text

応用例）コンポーネントの実装 
 ❖ ArticleCardコンポーネントの実装
 11



 




{{ title }}




 {{ description }}










Slide 12

Slide 12 text

応用例）擬似クラス :first-child の利用 
 ❖ グリッド側の実装
 12

 


 Tailwind CSS では :first を
 使うことで擬似クラス :first-child の スタイリングが可能


Slide 13

Slide 13 text

まとめ
 ● Tailwind CSS v4 からサポートされたコンテナークエリーが便利
 
 ● CSSの進化が凄い
 ○ 従来は JavaScript を使って制御していたようなレイアウトもCSS単 体で実現できるようになっている
 ○ Tailwind CSS を使っていると CSS のキャッチアップにもなる
 13