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
2023 CSS
Search
にしはら
September 20, 2023
Technology
7
4.7k
2023 CSS
2023年に使えるようになったCSSでレイアウトや表現について紹介します。
にしはら
September 20, 2023
Tweet
Share
More Decks by にしはら
See All by にしはら
速くて安いWebサイトを作る
nishiharatsubasa
17
16k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
700
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
vue_component_from_composable
nishiharatsubasa
2
630
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.3k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7k
Other Decks in Technology
See All in Technology
OpenTelemetry の Log を使いこなそう
biwashi
3
920
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
130
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
100
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
180
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
160
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
2
250
新規事業におけるAIリサーチの活用例
ranxxx
0
100
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
190
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.8k
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
220
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
230
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Writing Fast Ruby
sferik
628
62k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Being A Developer After 40
akosma
90
590k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
2023ʹ͑ΔΑ͏ʹͳͬͨCSS ʙ৽͍͠ΞχϝʔγϣϯϨΠΞτख๏ʙ
ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social
ීஈ͜ΜͳهࣄΛॻ͍͍ͯ·͢ ಠཱͨ͠CSS translateɾrotateɾscale ϓϩύςΟ͔ͩΒͰ͖Δɺ ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ https://ics.media/entry/230830/ https://ics.media/entry/230309/ NEW !
࠷ۙ͑ΔΑ͏ʹͳͬͨCSS ɾίϯςφΫΤϦ ɾ:has() ٙࣅΫϥε ɾࡾ֯ؔ ɾಠཱͨ͠ transform ϓϩύςΟ ɾεΫϩʔϧۦಈΞχϝʔγϣϯ ɾίϯςφΫΤϦ
has() ΛͬͨɺμογϡϘʔυը໘ ɾεΫϩʔϧۦಈΞχϝʔγϣϯΛͬͨσʔλϏδϡΞϥΠθʔγϣϯ Ͱ͖ΔΑ͏ʹͳͬͨϨΠΞτ৽͍͠දݱྫ
ίϯςφΫΤϦ
ίϯςφΫΤϦͱ ...ʁ ཁૉͷ෯ʹԠͨ͡ CSSͷग़͚͕͠Մೳ ϝσΟΞΫΤϦͷཁૉόʔδϣϯΈ͍ͨͳΠϝʔδ 20232݄͔Β༻Մೳ
ϝσΟΞΫΤϦ͕ܭଌ͢Δ෯ ίϯςφΫΤϦ͕ܭଌ͢Δ෯ ϝσΟΞΫΤϦͱͷҧ͍
ίϯςφΫΤϦͷϝϦοτ ҙ ίϯϙʔωϯτ୯ҐͷϨεϙϯγϒ͕Γ͘͢ͳΔ ཁૉ͕ඞཁͳͷͰɺHTMLઃܭʹ͕ඞཁ
:has() ٙࣅΫϥε
:has() ٙࣅΫϥεͱ ...ʁ ಛఆͷࢠཁૉΛͬͨ ηϨΫλʔ͕Մೳ ࢠཁૉʹԠͨ͡ηϨΫλʔըظత FirefoxҎ֎Ͱ༻Մೳ
:has() ٙࣅΫϥεͷϝϦοτ ࢠཁૉͷঢ়ଶʹԠͨ͡ཁૉͷελΠϧมߋ͕Մೳ ˠಈతͳঢ়ଶมߋʹରͯ͠ॊೈʹରԠͰ͖Δ ʂ
ࡾ֯ؔ
CSSͷࡾ֯ؔͱ ...ʁ ࡾ֯ؔΛ͔ͭͬͨ ͷࢦఆ͕Մೳ 20233݄͔Β༻Մೳ ΈΜͳͷτϥϚ sin, cos, tan asin,
acos, atan ͕༻Մೳ
ࡾ֯ؔԁʹؔ͢Δ࠲ඪ͕ಘҙ transform: translate( calc(cos(30deg) * var(--r)), calc(sin(0deg) * var(--r)) );
30deg r cos(30deg) ʷ r sin(30deg) ʷ r x = y Σϒͷ߹ɺԼ͖͕ y ࠲ඪͷਖ਼ํʹͳΔͷͰ ֶͱҧ͏ͷͰগ͠ҙ
CSSࡾ֯ؔͷϝϦοτ ֯Λར༻ͨ͠ࢦఆ͕ՄೳʹͳΔ ԁܗͷϨΠΞτ͕Γ͘͢ͳΔ ༨ஊ ؒతʹ˽ 2 КͷΑ͏ͳΛCSSͰѻ͑ΔΑ͏ʹͳͬͨ ˠCSSมʹԫۚൺനۜൺͷΑ͏ͳΛࢉग़Ͱ͖Δ
ಠཱͨ͠transformϓϩύςΟ
ಠཱͨ͠transformϓϩύςΟͱ ...ʁ translate, rotate, scale ͕ ಠཱͨ͠ϓϩύςΟͱͯ͠༻Մೳ skew() ಠཱͤͣ 2022
8݄͔Β༻Մೳ
ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ transform: translate transform: rotate ैདྷ2ͭཁૉ͕ඞཁ
ʮճస͠ͳ͕ΒฏߦҠಈʯΞχϝʔγϣϯ translate rotate ͜Ε͔Β1ͭཁૉͰՄೳ
ಠཱͨ͠transformϓϩύςΟͷϝϦοτ ෳࡶͳΞχϝʔγϣϯهड़͘͢͠ͳΓɺ Πʔδϯάͷௐಠཱͯ͠ௐͰ͖Δ
εΫϩʔϧۦಈΞχϝʔγϣϯ
εΫϩʔϧۦಈΞχϝʔγϣϯͱ ...ʁ εΫϩʔϧྔʹԠͨ͡ ஈ֊తͳΞχϝʔγϣϯ͕Մೳ ࠓ·ͰJavaScript ͕ඞཁͩͬͨΑ͏ͳදݱͰ͖Δʂ ChromeɺEdgeͷΈ༻Մೳ
εΫϩʔϧۦಈΞχϝʔγϣϯͷϝϦοτ ύϥϥοΫεͷΑ͏ͳදݱCSSͷΈͰՄೳ ࣍ୈͰ͍Ζ͍Ζͳදݱ͕Ͱ͖Δ ҙ ಛఆ·Ͱ͖ͨΒΞχϝʔγϣϯΛ࣮ߦ͢ΔΑ͏ͳ ൃՐܕͷͷͰ͖ͳ͍
࣮ྫ
ίϯςφΫΤϦͱ :has() ٙࣅΫϥε https://ics-creative.github.io/pwa_night_vol55/container_query/
ࡾ֯ؔͱಠཱͨ͠ transformϓϩύςΟ https://ics-creative.github.io/pwa_night_vol55/container_query/
εΫϩʔϧۦಈΞχϝʔγϣϯ https://ics-creative.github.io/pwa_night_vol55/scroll_driven/
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS ͰϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/
ࢀߟจݙ CSS͚ͩͰεΫϩʔϧΞχϝʔγϣϯ͕࡞ΕΔʂ ʁ ৽ٕज़ Scroll-driven Animations ͱ https://ics.media/entry/230718/ ಠཱͨ͠CSS translateɾrotateɾscaleϓϩύςΟ͔ͩΒͰ͖Δɺ๛͔ͳΞχϝʔγϣϯςΫχοΫʂ
https://ics.media/entry/230309/ CSSͷࡾ֯ؔΛཧղ͠Α͏ ʂ sin()ͱcos() ͰͰ͖Δදݱ https://ics.media/entry/230126/