Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tailwind CSS の小話「コンテナークエリーって便利」
Search
Yuki Yamada
May 14, 2025
Technology
0
250
Tailwind CSS の小話「コンテナークエリーって便利」
2025/05/14 シネマ de LT会〜あなたのナレッジ大上映〜のLTスライドです
Yuki Yamada
May 14, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
350
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3.1k
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1.1k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
970
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
350
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
130
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
30
1.1k
The Cult of Friendly URLs
andyhume
79
6.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
KATA
mclloyd
30
14k
BBQ
matthewcrist
89
9.7k
Code Review Best Practice
trishagee
69
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
Tailwind CSS の小話 「コンテナークエリーって便利」 CSSの進化を刮目せよ
自己紹介📝 名前:やまだゆうき Twitter:@wf_o4 所属:SIerで働いてます 普段の業務内容 生成AIのアプリケーション開発をしています 得意な技術領域 Webフロントエンド、Azure、Python
自然言語処理(NLP) 2
今日、伝えたいこと 📢 • Tailwind CSS v4 からサポートされたコンテナークエリーが便利 3
コンテナークエリー メディアクエリーの代替となるもので、親要素を基準にスタイルを設定できる CSSの機能 4 画像出典元URL: https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries
コンテナークエリーとTailwind CSS コンテナークエリーはTailwind CSS では v4 から標準でサポート (v3まではプラグインが必要) 5
<div class="@container"> <div class="flex flex-col @md:flex-row"> <!-- ... --> </div> </div> 基準となる要素 基準となる要素が28rem (448px)以上の場合のス タイル設定
コンテナークエリーで何が嬉しいか コンテナークエリーはメディアクエリーと異なり画面サイズではなく 親要素を基準にできるのでコンポーネントベースの実装と相性が良い 6 コンポーネント自身のサイズでスタイリング
応用例 7
応用例)全体のレイアウトの把握 8 全体のレイアウトは Gridで構成
応用例)グリッドを構成する要素の特徴の把握 9 Grid内の最初の要素 (:first-child)
応用例)作成するコンポーネントの把握 10 コンテナークエリーで 同一のコンポーネントと して実装
応用例)コンポーネントの実装 ❖ 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>
応用例)擬似クラス :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 の スタイリングが可能
まとめ • Tailwind CSS v4 からサポートされたコンテナークエリーが便利 • CSSの進化が凄い ◦
従来は JavaScript を使って制御していたようなレイアウトもCSS単 体で実現できるようになっている ◦ Tailwind CSS を使っていると CSS のキャッチアップにもなる 13