#CSS
RSSフィードCSSのみで実装する指向性ヘッダーアニメーション
JavaScriptによるスクロール位置の監視が必須であった複雑なヘッダーアニメーションも、Scroll State Queriesを使えばCSSのみで実装することが出来る。
All Posts
CSSのみで実装する指向性ヘッダーアニメーション
JavaScriptによるスクロール位置の監視が必須であった複雑なヘッダーアニメーションも、Scroll State Queriesを使えばCSSのみで実装することが出来る。
Scroll Container内の絶対配置またはAG Gridのバグ
Scroll Containerが包含ブロックでない場合、内部の隔離されていない絶対配置された要素はScroll Containerの外側に配置されるため、ページの高さが大きくなるといった意図しない挙動を引き起こす。
CSSカルーセルを試す
Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法
list-styleを無効化したul要素にlistロールを指定すべきなのか?
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
色空間とOKLCHを利用したカラーパレットの生成
CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。
Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった
overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。
Q. textareaに掛けたfield-sizing: content; width: 100%;が効かない
textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。
Q. position: stickyが効かない
position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。
Q. Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになった
Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。
余計なDOMを追加せずにinput[type="file"]を装飾する
file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。
2種類のスクロールバーとscrollbar-gutterによる制御
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。
Q. Noto Sansの場合、下にずれたように見える
Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。
Q. iPhoneで見るとフォーム画面が崩れる
iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。
CSS Media Queryを使うときに気を付けること及び知見
CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。
スクロール領域はそのままにスクロールバーを隠す
モダンなブラウザのみサポートする場合は、scrollbar-width: noneの指定のみでスクロールバーを隠すことが出来る。
CSSで印刷時の見た目を調整する
@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。
CSS 変数で色を透過したりパレットを生成する
CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。
text-align-last: ブロックの最後の行および強制的な改行の直前の行をどのように配置するか
Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。
News bits
Chrome 146リリース
スクロールトリガーアニメーション、Scoped Custom Element Registry、Sanitizer API、AudioContext.playbackStatsの導入など。
Interop 2026発表
ブラウザベンダー各社によるWebプラットフォームの相互運用性向上プロジェクトInterop 2026の重点分野が発表。
Stylelint 17.0.0 リリース、ESMへの移行やCSS Nesting対応など
Stylelint 17.0.0がリリースされた。ECMAScript modules (ESM) への移行、CSS Nesting対応のルール刷新、Node.js 20.19.0未満のサポート終了などの破壊的変更が含まれる。
Introducing CSS Grid Lanes
CSS Working Groupでの長年の議論の末、Masonryレイアウトの仕様が「CSS Grid Lanes」として合意された。 WebKit(Safari)だけでなく、Chrome、Edge、Firefoxもこの新しい仕様(display: grid-lanes)へ移行・実装を進めている。
Safari 26.2
Safari 26.2がリリースされた。アクセシビリティの向上として、フォーカスされた画面外の要素が自動的にスクロールインするようになったほか、aria-colindextextとaria-rowindextextのサポートが追加された。 CSSでは、疑似要素でのcursorプロパティ、position-visibility、math-shift、random()関数、@scope(:host)などがサポートされた。また、text-decoration-lineでのspelling-errorとgrammar-errorの値も利用可能になった。 Animationsでは、Animation.prototype.overallProgressのサポートや、::view-transitionでのアニメーションプロパティの継承に関する修正などが含まれる。 ### 参考文献
Chrome 143リリース
Chrome 143がリリースされた。主な新機能として、CSS anchored fallback container queries、background-position-x/yの辺相対構文、font-language-override CSS propertyが追加された。
Safari 26.1リリース
Safari 26.1がリリースされた。iOS 26.1、iPadOS 26.1、visionOS 26.1、macOS 26.1、macOS Sequoia、macOS Sonomaで利用可能。
Chrome 142リリース
Chrome 142がリリースされた。主な新機能として、スクロールマーカー用の:target-beforeと:target-after疑似クラス、スタイルコンテナクエリとif() CSS関数での範囲構文サポート、interestfor属性が追加された。
Safari 26.0、Web GPUやScroll-driven Animationsなど多数の新機能
Safari 26.0リリース。多数の新機能が追加。
CSSコンテナクエリがBaseline Widely availableに
2023年にすべての主要ブラウザエンジンに導入されたCSSコンテナクエリがBaseline Widely availableになった。コンテナクエリを利用することで、デバイスの画面サイズだけでなく要素のサイズに基づいたスタイルの変更が可能になり、よりフレキシブルでスタイルがカプセル化された実装が可能になる。
Learn CSSコースが大幅リフレッシュ、9つの新モジュールを追加
web.devのLearn CSSコースが4年ぶりに大幅リフレッシュされ、9つの新モジュールが追加された。
Chrome 140がリリース、ToggleEventとCSS機能が強化
Chrome 140がリリースされた。ToggleEventの改善、CSSカウンター機能、フォントバリエーション設定などの新機能が追加された。
State of CSS 2025 結果発表
2025年のCSSの現状調査を行ったState of CSS 2025の結果が発表。
GitHub Actions の fine-grain 権限設定がカスタムリポジトリロールに提供
GitHub Actions の fine-grain 権限設定がカスタムリポジトリロールで正式に利用可能になった。
ECMAScript 2025 が正式承認
Ecma International の第 129 回総会で ECMAScript 2025 言語仕様が正式に承認され、標準となった。編集者は Shu-yu Guo、Michael Ficarra、Kevin Gibbons が担当。
Chrome 138 リリース、AI API 搭載と CSS 新機能を提供
Chrome 138 が正式リリース。組み込み AI API、新しい CSS 関数、フォルダブルデバイス対応機能などが追加。
Vite 7.0 リリース、Node.js 18 ドロップとブラウザターゲット変更
Vite 7.0 が正式リリース。Node.js 18 の EOL(2025 年 4 月末)に伴い、Node.js 20.19+、22.12+が必要になった。新しいバージョン範囲ではrequire(esm)がフラグなしでサポートされるため、Vite 7.0 を ESM-only で配布しながら、CJS モジュールから Vite JavaScript API を使用することが可能。
Playwright v1.53.0 リリース、Trace Viewer と HTML レポーター機能強化
Playwright v1.53.0 が正式リリース。Trace Viewer と HTML レポーターに新しい Steps 表示機能、カスタムタイトル設定、ロケーター記述機能などが追加。
Chrome 137 リリース
Chrome 137 が安定版としてリリース。CSS if()関数による条件値表現の簡素化、CSS reading-flow・reading-orderプロパティでのタブ順序制御、WebAssembly JavaScript Promise Integration(JSPI)が主要な新機能。その他、Selection API 拡張、SVG transform属性対応、システムアクセントカラー対応、Ed25519 暗号化アルゴリズム追加など多数の機能改善。
Chrome 136 リリース
Chrome 136 がリリース。RegExp.escape静的メソッドのベースライン入りや:visitedリンク履歴のパーティショニングなど。
h1 要素のデフォルトスタイル変更
ブラウザベンダーが、、、内の要素に対する UA スタイルシートのデフォルトスタイルを廃止する動きを開始した。これらの変更により、入れ子になったセクション見出しのスタイリングが変わる。
Chrome 135 リリース
Chrome 135 がリリース。非常に多くの機能追加や変更が行われている。以降ではいくつかピックアップして紹介する。
Tailwind CSS 4.1.0 リリース
Tailwind CSS 4.1.0 がリリース。
New to the web platform in March
3 月の Web Platform の新機能について、まとめた記事が公開された。
Safari 18.4 リリース
Safari 18.4 がリリース。非常に多くの機能追加や変更が行われている。以降ではいくつかピックアップして紹介する。
ESLint CSS
ESLint が正式に CSS のサポートを開始。
ruby-align is Baseline Newly available
ruby-alignがベースラインに追加。
Chrome 133
2025 年 2 月 4 日に Chrome 133 がリリース。
Why I'm excited about text-box-trim as a designer
Safari 18.2 で先行サポートされた text-box 系の CSS プロパティについてのデザイナーが解説する記事。
Chrome 131
Chrome 131 がリリース。
CSS sprite sheet animations
CSS スプライトを利用したアニメーションについての記事。
State of CSS 2024
State of CSS 2024 の結果が公開された。
Material-UI v6
Material-UI v6 がリリースされた。
Chrome 127
2024 年 7 月 24 日に Chrome 127 がリリースされた。
Safari 17.6
2024 年 7 月 29 日に Safari 17.6 がリリースされた。新機能が少ないからか、あまり話題になっていない。
`@property`が Baseline に追加
@propertyは、CSS のカスタムプロパティを定義するためのルールで、--で始まるプロパティを定義するためのもの。これにより、カスタムプロパティを定義する際に、プロパティの型や初期値を指定できるようになる。
Chrome 125
Chrome 125 がリリースされました。
Safari 17.5
5 月 13 日に Safari 17.5 がリリースされました。
Chrome 123
2024 年 3 月 19 日に Chrome 123 がリリースされました。
Safari 17.4
2024 年 3 月 5 日に Safari 17.4 がリリースされました。
Chrome 121
Chrome 121 がリリースされました。
Safari 17.2
2023 年 12 月 11 日に Safari 17.2 がリリースされました。
Chrome 120
2023 年 12 月 5 日に Chrome 120 がリリースされました。
Getting started with CSS container queries | MDN Blog
MDN による CSS の Container query の紹介記事。基本的な使い方が丁寧に解説されている。
Chrome 119
2023 年 10 月 31 日に Chrome 119 がリリースされました。
Chrome 118
https://developer.chrome.com/blog/new-in-chrome-118/
Safari v17
https://webkit.org/blog/14445/webkit-features-in-safari-17-0/
Chrome 117
Chrome 117 がリリース。
CSS Animation で display と content-visibility が適用可能に
今までは display や content-visibility を keyframe に書いても適用されず、次のようなコードでは透明になるだけでしたが、これからは display が適用されるようになったため 100%になった段階で要素が消えます。段階的に display や content-visibility が変化するわけではありません。
CSS Motion Path
以前からpath() はほとんどのブラウザで利用できましたが、circle()、ellipse()、rect()、inset()、xywh()、polygon()、ray()、url() などを利用したパスの指定ができるようになりました。
Chrome 115
Chrome 115 がリリース。
Chrome 114
Chrome 114 がリリース。
Safari 16.5
Safari 16.5 がリリース。
Chrome 113
Chrome 113 がリリース。
Chrome 112
Chrome 112 がリリース。
Chrome 111
Google Chrome 111 リリース。Google Chrome 111 には、話題になっている機能以外にも多くの興味深い機能が追加されている。
Chrome 110
Chrome 110 で、Windows 7/8/8.1 などの OS のサポートが終了しました。 なお 2023 年 1 月に、Microsoft は Windows 7/8/8.1 のほとんどのバージョンのサポートを終了しています。
著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.