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
240
Tailwind CSS の小話「コンテナークエリーって便利」
2025/05/14 シネマ de LT会〜あなたのナレッジ大上映〜のLTスライドです
Yuki Yamada
May 14, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
120
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.2k
GitHub Copilot の概要
tomokusaba
1
130
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
730
本が全く読めなかった過去の自分へ
genshun9
0
270
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Gamification - CAS2011
davidbonilla
81
5.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Making Projects Easy
brettharned
116
6.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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