Tailwind CSS の小話「コンテナークエリーって便利」

Transcript

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


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


   自然言語処理（NLP）
 2

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

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

5. コンテナークエリーとTailwind CSS 
 コンテナークエリーはTailwind CSS では v4 から標準でサポート
 （v3まではプラグインが必要）
 5

   <div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div> </div> 基準となる要素
 基準となる要素が28rem （448px）以上の場合のス タイル設定


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


7. 応用例
 7

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


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


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


11. 応用例）コンポーネントの実装 
 ❖ ArticleCardコンポーネントの実装
 11 <div class="@container overflow-hidden rounded-xl bg-white

    shadow">
 <div class="block grid-cols-3 @lg:grid ">
 <img :src="imgSrc" :alt="alt" class="block w-full" />
 <div class="col-span-2 p-4">
 <h2 class="font-semibold text-gray-800">{{ title }}</h2>
 <div class="mt-2 line-clamp-4 text-sm text-gray-500 @lg:line-clamp-none ">
 {{ description }}
 </div>
 </div>
 </div>
 </div>


12. 応用例）擬似クラス :first-child の利用 
 ❖ グリッド側の実装
 12 <div class="grid grid-cols-4

    gap-4">
 <article-card
 class="first:col-span-4 "
 v-for="item in items"
 :key="item.id"
 :imgSrc="item.imgSrc"
 :title="item.title"
 :description="item.description"
 />
 </div>
 Tailwind CSS では :first を
 使うことで擬似クラス :first-child の スタイリングが可能


13. まとめ
 • Tailwind CSS v4 からサポートされたコンテナークエリーが便利
 
 • CSSの進化が凄い
 ◦

    従来は JavaScript を使って制御していたようなレイアウトもCSS単 体で実現できるようになっている
 ◦ Tailwind CSS を使っていると CSS のキャッチアップにもなる
 13