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
Web UIの黄金時代 - WebとCSSの最新アップデート
Search
LINEヤフーTech (LY Corporation Tech)
PRO
June 12, 2024
Technology
2
160
Web UIの黄金時代 - WebとCSSの最新アップデート
「Recap: Google I/O 2024」の発表資料です。
https://lycorptech-jp.connpass.com/event/319039/
LINEヤフーTech (LY Corporation Tech)
PRO
June 12, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
AdKDD2025 Keynote から見る広告ランキングシステムのトレンド
lycorptech_jp
PRO
0
39
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
Java 25 Overview 並行処理とGC周りの新機能
lycorptech_jp
PRO
0
41
Rust In Python
lycorptech_jp
PRO
9
380
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
2
350
How to quickly drive the track to Android Auto
lycorptech_jp
PRO
1
32
Yahoo!ショッピングにおけるQAエンジニア
lycorptech_jp
PRO
0
300
組織横断のQAエンジニア組織
lycorptech_jp
PRO
0
330
LINEギフト/ショッピングタブ
lycorptech_jp
PRO
1
290
Other Decks in Technology
See All in Technology
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
200
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
150
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
190
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
920
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
490
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
400
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
Railsの話をしよう
yahonda
0
160
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Speed Design
sergeychernyshev
32
1.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Transcript
-:$PSQPSBUJPO 8FC6*ͷԫۚ࣌ 8FCͱ$44ͷ࠷৽Ξοϓσʔτ 3FDBQ(PPHMF*0 5BNBEB"LJIJSP TQSJOHSBJOJOH
-:$PSQPSBUJPO ͜ͷηογϣϯͰऔΓ্͛Δ͜ͱ w (PPHMF*0Ͱൃද͞ΕͨҎԼͷηογϣϯΛத৺ʹऔΓ্͛·͢ w 8FCͷ༰Ͱ͕͢ɺ"OESPJEͳํʹ͔ΔൣғͰհ͠·͢ w ࣌ؒͷڐ͢ݶΓݸผͷ༰ΛऔΓ্͛·͢ IUUQTJPHPPHMFFYQMPSFECBBFBGCEEDBDGEG IUUQTJPHPPHMFFYQMPSFDBBDEE
-:$PSQPSBUJPO l"HPMEFOFSBGPS8FC6*z
-:$PSQPSBUJPO 8FC6*ͷԫ͕ۚ࣌౸དྷ w *&ͷαϙʔτऴྃʹΑΓɺશͯͷओཁͳϒϥβͰࣗಈΞοϓσʔτ ͷԸܙΛड͚ΒΕΔΑ͏ʹͳͬͨ w ݹ͍ϒϥβΛαϙʔτ͠ଓ͚Δඞཁ͕ͳ͘ͳΓɺ͜Ε͔Β৽͍͠ 8FC"1*Λੵۃతʹಋೖ͢Δ͜ͱ͕Ͱ͖Δ w 8FC6*Ͱ࣮ݱՄೳͳ͜ͱ͕ͲΜͲΜ૿͍͑ͯΔ
-:$PSQPSBUJPO ۙՃ͞ΕΔ8FC"1*ͷಛ w શ͘৽͍֓͠೦͕૿͑Δɺͱ͍͏͜ͱͦΕ΄Ͳͳ͍ w ͜Ε·Ͱ+BWB4DSJQUΛΘͳ͍ͱ࣮ݱͰ͖ͳ͔ͬͨ6*͕ɺ)5.- $44ͷΈͰɺ͘͠ΑΓগͳ͍+BWB4DSJQUίʔυͰ࣮ݱͰ͖ΔΑ͏ ʹͳΔύλʔϯ͕ଟ͍ w ৽͘͠8FCΛֶͿʹͱͯྑ͍λΠϛϯά
w ٯʹݱঢ়ͷࣝͷ··ͰকདྷԽͯ͠͠·͏Մೳੑʜʁ
-:$PSQPSBUJPO #BTFMJOF w ͦΕͧΕͷػೳͷαϙʔτঢ়گΛ؆୯ʹ Ѳ͢ΔͨΊͷڞ௨ͷج४ w 8"গͳ͘ͱϲ݄Ҏ্֤ϕʔεϥΠϯ ϒϥβͰαϙʔτ͞Ε͍ͯΔ w /"࠷৽ͷϕʔεϥΠϯϒϥβͰαϙʔ
τ͞Ε͍ͯΔ w -"ݶఆ͞Εͨϒϥβͷαϙʔτ IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT(MPTTBSZ#BTFMJOF$PNQBUJCJMJUZ
-:$PSQPSBUJPO ͕࣌ؒͳ͘ͳΔ·Ͱ ࠷ۙͷΞοϓσʔτʹ͍ͭͯհ
-:$PSQPSBUJPO 1PQPWFS w ϖʔδͷ্ʹผͷίϯςϯπΛදࣔ͢Δ w ʮΫϦοΫ͢Δ͜ͱͰԿ͔Λදࣔ͢Δʯͱ͍͏࣮͕+4ΛΘͣʹ࣮ ݱՄೳ <button popovertarget="p">Show popover</button>
<div popover id="p"> Popover content <button popovertarget="p" popovertargetaction="hide"> Hide popover </button> </div>
-:$PSQPSBUJPO $POUBJOFSRVFSJFT w ͋Δཁૉ $POUBJOFS ͷେ͖͞ʹԠͯ͡ɺͦͷࢠཁૉͷ$44ͷద༻ Λग़͚͠Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔ <div class="container"> <p>
Lorem ipsum, dolor sit amet … </p> </div> .container { container-type: inline-size; } @container (inline-size > 500px) { p { font-size: 150%; } }
-:$PSQPSBUJPO MJHIUEBSL w $44ͰMJHIUDPMPSͱEBSLDPMPSͷͭͷΛࢦఆ͢Δ৭ؔ w DPMPSTDIFNFϓϩύςΟͰͲͪΒͷ৭Λදࣔ͢Δ͔Λ੍ޚͰ͖Δ body { color-scheme: light
dark; color: light-dark(red, blue); } body { color-scheme: light; color: light-dark(red, blue); } 04ͷઃఆʹԠͯ͡Γସ͑ ڧ੍తʹMJHIUDPMPSΛදࣔ
-:$PSQPSBUJPO UFYUXSBQCBMBODF w ͦΕͧΕͷߦ͕ಉ͙͡Β͍ͷ͞ʹͳΔΑ͏ɺۉʹվߦͤ͞Δ p { text-wrap: balance; }
-:$PSQPSBUJPO XPSECSFBLBVUPQISBTF w #VEPV9ʹΑΔຊޠͷઅ۠Γͷ݁Ռʹͱ͖ͮɺࣗવͳҐஔͰ ͷվߦΛࢼΈΔ p { word-break: auto-phrase; }