UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025

MTDDC Meetup Tokyo 2025【2025/11/29（土）開催】の発表資料。

https://www.mt-tokyo.net/mtddc2025/speaker/speaker3084563.html

■概要
ここ数年、CSSの進化は目覚ましいものがあります。これまでChromeやEdgeが先行していた新機能も、2025年には主要ブラウザで広く実用化され、日常的なUIデザインにも活用できるようになりました。 本セッションでは、ウェブで頻出するUIデザインを題材に、最新のCSSでどのように表現し、どのような点に注意すべきかを実例を交えて紹介します。

Transcript

1. UI 立 2025 CSS ICS 田 MTDDC Meetup TOKYO 2025 2 0 2 5 . 1 1 . 2 9 LINE
2. 自己 田 ( ) ICS 算 / 大 非 @clockmaker
3. : 19 ・ 14 ・ WebGPU ・ 田 ( ) ICS 算 / 大 非 @clockmaker
4. 1 . 2 . 3 . UI 4 . ／ 5 . CSS 6 . 用 UI SNS 自 #MTDDC 2024 2025
5. CSS :has() 文 @starting-style @property 文 Q. 人
6. Section 1 / 6
7. 2025 132 2025 1 月 14 2 11 月 18.3 2025 1 月 26 . 2 11 月 iOS/macOS 26 西 一 134 2025 1 月 1 45 11 月
8. 足 2022 Interop CSS 心 算
9. Announcing Interop 20 25 | WebKit https://webkit.org/blog/ 16 4 58 /announcing-interop- 2 02 5 / 202 5 力
10. web-platform-tests dashboard https://wpt.fyi/interop- 20 25
11. text-autospace Noto Sans JP text-box-trim contrast-color Section 2 / 5
12. text-autospace
13. text-autospace 18 . 4 2025 3 月 140 2025 9 月 145 2025 11 月 日 白
14. .text { text-autospace: normal; }
15. text-autospace: normal;
17. Windows Noto Sans JP
18. Windows Noto Sans JP 2025 4 月 Windows Update Windows 1 0 Noto Sans JP
19. Windows Noto Sans JP font-family: sans-serif; Noto Sans JP Chrome, Edge 非 面 非 Hi-DPI Noto Sans JP 高 小
20. Windows Google Fonts <!-- Google Fonts ͷಡΈࠐΈ --> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;900&display=swap" rel="stylesheet" /> <style> /* @font-face ͰϩʔΧϧϑΥϯτΛ༏ઌ */ @font-face { font-family: "Local Noto Sans JP"; src: local("Noto Sans JP"); } body { font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif; } </style>
21. text-box
22. text-box 18 . 2 2024 12 月 133 2025 2 月 - line-height: 1 大 白
23. .text { text-box: trim-both cap alphabetic; }
24. line-height: 2 font-size: 60 px
28. contrast-color()
29. contrast-color() 26 . 0 2025 9 月 - - 色 比 自
30. button { background-color: var(--button-color); color: contrast-color(var(--button-color)); }
31. https://codepen.io/jensimmons/pen/XJJjKMO
33. UI scroll-state() interpolate-size sibling-index() HDR Section 3 / 6
35. 26 . 0 2025 9 月 115 2023 7 月 - CSS 用 2025 Safari
37. scroll-state()
38. scroll-state() - 133 2025 2 月 - εΫϩʔϧͷঢ়ଶʹԠͨ͡৚݅ΛࢦఆՄೳ ʢεΫϩʔϧத͔Ͳ͏͔౳ʣ ίϯςφʔΫΤϦʔͷҰछ
39. https://ics-creative.github.io/ 2 5 0 52 6 _scroll-state/scrollable-hint/
40. https://ics-creative.github.io/ 2 5 0 52 6 _scroll-state/stuck-navigation/
42. (SPA) 18 . 0 2024 9 月 111 2023 3 月 144 2025 10 月 DOM 2025 Firefox
44. (MPA) 18 . 2 2024 12 月 126 2024 6 月 - HTML
45. https://ics-creative.github.io/ 2 3 0 51 0 _view_transitions_api/vta-mpa-example/index.html
47. interpolate-size
48. interpolate-size - 129 2024 9 月 - height: 0 height: auto FAQ UI 立
49. :root { interpolate-size: allow-keywords; } details { /* ΞίʔσΟΦϯ͕ด͍ͯ͡Δ࣌ͷத਎ͷελΠϧ */ &::details-content { transition: height 0.4s, content-visibility 0.4s allow-discrete; height: 0; overflow: clip; } /* ΞίʔσΟΦϯ͕։͍ͨ࣌ͷத਎ͷελΠϧ */ &[open]::details-content { height: auto; } } 😨
50. :root { interpolate-size: allow-keywords; } details { /* ΞίʔσΟΦϯ͕ด͍ͯ͡Δ࣌ͷத਎ͷελΠϧ */ &::details-content { transition: height 0.4s, content-visibility 0.4s allow-discrete; height: 0; overflow: clip; } /* ΞίʔσΟΦϯ͕։͍ͨ࣌ͷத਎ͷελΠϧ */ &[open]::details-content { height: auto; } } 👍
51. sibling-index()
52. sibling-index() - 130 2024 6 月 - ελοΨʔΞχϝʔγϣϯʹ໾ཱͭ
53. https://codepen.io/argyleink/pen/KwKXPYW
54. HDR
55. HDR 26 . 0 2025 9 月 136 2025 4 月 - HDR ・ ・ 目 HDR ・ CSS HDR ／ SDR
56. <img src="photo_HDR.avif" alt="" /> <video src="movie_HDR.mp4"></video>
58. 一 一 SDR HDR 一 SDR HDR
59. /* Ұཡը໘Ͱ͸पลUIͱͳ͡·ͤΔ */ .thumb img { /* HDRΛSDR૬౰ʹ཈͑Δ */ dynamic-range-limit: standard; } /* ৄࡉը໘ */ .detail img { /* σΟεϓϨΠͷೳྗΛͦͷ··࢖͏ */ dynamic-range-limit: no-limit; }
60. JS gsap CSS 言 HDR
62. ／ Section 4 / 6 dialog - closedby dialog - command dialog 行 用
63. dialog closedby
64. dialog closedby - 134 2025 3 月 141 2025 7 月 Ϟʔμϧͷด͡΍͢͞Λௐ੔ ϞʔμϧഎܠԡԼͰϞʔμϧΛด͡Δ͔౳Λࢦఆ
67. ޡλοϓͰดͯ͡΄͘͠ͳ͍ϑΥʔϜͷϞʔμϧ closedby="none" ϥΠτͳπʔϧνοϓతͳϞʔμϧ closedby="any"
68. dialog command/commandfor - 135 2025 4 月 144 2025 10 月 JavaScript dialog
69. https://codepen.io/argyleink/pen/xxowmGG
71. 26 . 0 2025 9 月 125 2024 5 月 - CSS ・ Interop 2 02 5
72. https://ics-creative.github.io/ 2 5 0 90 1 _dialog/styled-animation/
73. https://ics-creative.github.io/ 2 5 0 41 7 _popover-hint/
75. CSS Section 5 / 6 @scope if() @function
76. @scope
77. @scope 17 . 4 2024 3 月 118 2023 10 月 146 2025 12 月 CSS 用 2025 Firefox
80. if()
81. if() - 129 2024 9 月 - 範 ϝσΟΞΫΤϦʔ΍ίϯςφʔΫΤϦʔ౳Λ৚݅ʹࢦఆ color: if( media(width <= 768px): red; else: blue; );
82. @function
83. @function - 139 2025 8 月 - CSS @function --space(--n) returns <length> { result: calc(var(--n) * 8px); } .card { padding: --space(2); /* →16px */ }
85. 用 UI Section 6 / 6
87. - 135 2025 4 月 - HTML+CSS 用 JS swiper, slick 自 A 11 Y 高
88. https://ics-creative.github.io/ 2 5 0 51 6 _css_carousel/ 0 1 /
90. https://ics-creative.github.io/ 2 5 0 51 6 _css_carousel/ 0 2 /
91. scroll-state() 用 100% 85% transition
96. - 134 2025 3 月 - select/option HTML+CSS select 文 自 UI
97. https://ics-creative.github.io/ 2 5 0 30 7 _custom-select-style/ 02 _option-content.html
98. https://ics-creative.github.io/ 2 5 0 30 7 _custom-select-style/ 03 _selectedcontent.html
100. Chromium 心 一方 UI HTML HTML 4 TABLE / DIV HTML 5 header / main / article HTML 5 . 1 / 5 . 2 dialog UI Living Standard popover 算 長 言 UI 用 面
102. HTML+CSS 黄金 算 Golden Age of Web UI Google I/O 2 0 25
103. ICS https://ics.media/recruit/