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
220
Tailwind CSS の小話「コンテナークエリーって便利」
2025/05/14 シネマ de LT会〜あなたのナレッジ大上映〜のLTスライドです
Yuki Yamada
May 14, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
Kubernetesで作るAIプラットフォーム
oracle4engineer
PRO
2
180
OpenTelemetry Collector internals
ymotongpoo
3
190
AIコーディング新時代を生き残るための試行錯誤 / AI Coding Survival Guide
tomohisa
8
7.7k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
370
Tenstorrent 開発者プログラム
tenstorrent_japan
0
210
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
6.1k
Vibe Codingの裏で、 考える力をどう取り戻すか
csekine
2
510
JavaのMCPサーバーで体験するAIエージェントの世界
tatsuya1bm
1
220
「伝える」を加速させるCursor術
naomix
0
320
CSSDay, Amsterdam
brucel
0
280
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.2k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
770
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Being A Developer After 40
akosma
90
590k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Building an army of robots
kneath
306
45k
Raft: Consensus for Rubyists
vanstee
138
7k
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