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)
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
280
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
370
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
9
730
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
360
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
3
430
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
2
880
Yahoo!知恵袋におけるフロントエンド開発
lycorptech_jp
PRO
0
1.1k
"LINE Planet" and AI: Conversations with AI
lycorptech_jp
PRO
0
83
Seamless inventory management with AI
lycorptech_jp
PRO
0
41
Other Decks in Technology
See All in Technology
浸透しなさいRFC 5322&7208
hinono
0
120
JavaScript 研修
recruitengineers
PRO
3
190
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
670
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.4k
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
570
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
250
広島銀行におけるAWS活用の取り組みについて
masakimori
0
140
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
630
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
110
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2k
How to Ace a Technical Interview
jacobian
279
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A designer walks into a library…
pauljervisheath
207
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Building Adaptive Systems
keathley
43
2.7k
Statistics for Hackers
jakevdp
799
220k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
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; }