おすすめ
公開日:

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.