3 min
CSSのみで開閉可能なサイドバーを実装する
CSSのみで高機能なサイドバーを実装するサンプル
23posts
4 min
CSSのみで凝ったカルーセルを実装する
CSS Overflow ModuleによるCSSのみで凝ったカルーセルを実装する例と注意点
4 min
CSSのみで実装する指向性ヘッダーアニメーション
JavaScriptによるスクロール位置の監視が必須であった複雑なヘッダーアニメーションも、Scroll State Queriesを使えばCSSのみで実装することが出来る。
2 min
Scroll Container内の絶対配置またはAG Gridのバグ
Scroll Containerが包含ブロックでない場合、内部の隔離されていない絶対配置された要素はScroll Containerの外側に配置されるため、ページの高さが大きくなるといった意図しない挙動を引き起こす。
10 min
CSSカルーセルを試す
Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法
5 min
Tailwind CSSはAIフレンドリーではない。
Tailwind CSSがAIフレンドリーである負債になりにくいといった主張について、少なくとも現状は違うという認識を持っています。
3 min
list-styleを無効化したul要素にlistロールを指定すべきなのか？
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
7 min
色空間とOKLCHを利用したカラーパレットの生成
CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。
4 min
React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。
React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。
2 min
Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった
overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。
3 min
Q. textareaに掛けたfield-sizing: content; width: 100%;が効かない
textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。
1 min
Q. position: stickyが効かない
position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。
1 min
Q. Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになった
Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。
2 min
余計なDOMを追加せずにinput[type="file"]を装飾する
file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。
4 min
2種類のスクロールバーとscrollbar-gutterによる制御
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。
2 min
Q. Noto Sansの場合、下にずれたように見える
Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。
4 min
Q. iPhoneで見るとフォーム画面が崩れる
iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。
6 min
CSS Media Queryを使うときに気を付けること及び知見
CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。
1 min
スクロール領域はそのままにスクロールバーを隠す
モダンなブラウザのみサポートする場合は、scrollbar-width: noneの指定のみでスクロールバーを隠すことが出来る。
3 min
CSS in JS 2022-10
2022年10月時点でのCSS in JSについてのメモ。Zero Runtime CSS in JSやZero-runtime CSS in JSライブラリの比較など。
5 min
CSSで印刷時の見た目を調整する
@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。
1 min
CSS 変数で色を透過したりパレットを生成する
CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。
4 min
text-align-last: ブロックの最後の行および強制的な改行の直前の行をどのように配置するか
Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。
Bits · 66 件
Baseline Newly available: field-sizing、Baseline Widely available: :has()・CSS nesting・URL.canParse()
Newly: field-sizing。Widely: :has()・CSS nesting・URL.canParse()・iframe loading・Storage Access API・createImageBitmap() など。Baseline Alerts の購読も可能になった。
CSS background-clip、border-area と text の併用
background-clip に border-area と text を同時指定すると、枠線と文字に同じグラデーションを載せつつ背景を透過にできる。対応は Chrome 150 以降に限られる。
Chrome 150
CSS text-fit、focusgroup による矢印キーナビ、background-clip: border-area を含む。
Baseline Newly available: Container style queries・:open・SharedWorker、Baseline Widely available: lh・clip-path・:user-invalid
Newly: Container style queries・:open・ToggleEvent.source・image-rendering・text-decoration-skip-ink: all・SharedWorker。Widely: lh・rlh・Navigator.userActivation・clip-path・:user-invalid。State of CSS 2026 調査は7月1日まで。
Chrome 149
CSS ギャップ装飾、bfcache 進入時の WebSocket 切断、Intl.Locale.prototype.variants の追加を含む。
Baseline Newly available: contrast-color()・Math.sumPrecise()、Baseline Widely available: search・WebAuthn public key・ARIA reflection
Newly: contrast-color()・Math.sumPrecise()。Widely: search・WebAuthn getPublicKey 系・String isWellFormed/toWellFormed・ARIA reflection。
CSS Gap Decorations が Chrome 149 で利用可能に
grid・flexbox・マルチカラムの gap を column-rule・row-rule で装飾できる。repeat()、交差での break、inset、表示条件、アニメーションをサポートする。
Tailwind CSS v4.3
v4.3 で scrollbar・コンテナサイズ・zoom・tab のユーティリティと @variant の複合指定が追加された。同日付のブログ投稿は、未紹介だった v4.2 の webpack 専用ローダーや論理プロパティ拡張、4 色のニュートラルパレットも併記している。
Baseline Newly available: WebTransport・Iterator.concat・Readable byte streams、Baseline Widely available: CSS subgrid・contain-intrinsic-size・image-set()
Newly: WebTransport・Iterator.concat・Readable byte streams・Reporting API・text-indent each-line/hanging・font-family: math。Widely: CSS subgrid・contain-intrinsic-size・image-set()・modulepreload など。
Chrome 147
要素スコープの View Transitions、contrast-color()、Math.sumPrecise の追加と、ローカルネットワークアクセス制限の拡張、Device Memory API の取りうる値の更新を含む。
Chrome 146
スクロールトリガーアニメーション、Scoped Custom Element Registry、Sanitizer API、AudioContext.playbackStatsの導入など。
Interop 2026発表
ブラウザベンダー各社によるWebプラットフォームの相互運用性向上プロジェクトInterop 2026の重点分野が発表。
CSS Anchor PositioningとNavigation APIがBaseline Newly Availableへ
Firefox 147のリリースにより、CSS Anchor PositioningとNavigation APIがBaseline Newly Availableとなった。
Stylelint 17.0.0 リリース、ESMへの移行やCSS Nesting対応など
Stylelint 17.0.0がリリースされた。ECMAScript modules (ESM) への移行、CSS Nesting対応のルール刷新、Node.js 20.19.0未満のサポート終了などの破壊的変更が含まれる。
CSS Grid Lanes が Masonry レイアウトの仕様として合意
CSS Working Group は Masonry レイアウトの仕様を「CSS Grid Lanes」として合意した。display: grid-lanes を使用する形式で、Safari 等の各ブラウザが実装を進めている。
Safari 26.2
Safari 26.2 がリリースされ、アクセシビリティの向上や CSS の新しいプロパティ・関数がサポートされた。
Chrome 143リリース
Chrome 143がリリースされた。CSS anchored fallback container queriesやfont-language-overrideプロパティなどが追加された。
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の結果が発表。
Chrome 138 リリース、AI API 搭載と CSS 新機能を提供
Chrome 138 が正式リリース。組み込み AI API、新しい CSS 関数、フォルダブルデバイス対応機能などが追加。
Chrome 137 リリース
Chrome 137 が安定版としてリリース。CSS if()関数による条件値表現の簡素化、CSS reading-flow・reading-orderプロパティでのタブ順序制御、WebAssembly JavaScript Promise Integration（JSPI）が主要な新機能。その他、Selection API 拡張、SVG transform属性対応、システムアクセントカラー対応、Ed25519 暗号化アルゴリズム追加など多数の機能改善。
Baseline Newly available: Float16Array・single color stop gradients、Baseline Widely available: grid-template アニメーション・CSS ic
Newly: Float16Array・single color stop gradients。Widely: grid-template-columns/rows のアニメーション・CSS ic 単位。VS Code Insiders・Stylelint・ESLint use-baseline・browserslist-config-baseline などツール展開も進んだ。
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 プロパティについてのデザイナーが解説する記事。
Safari 18.2
2024 年 12 月 11 日に、Safari 18.2 がリリースされた。
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リリース
text-wrap: balanceによる改行の最適化や、Popover APIの実装が追加。
Safari 16.5リリース
CSS Nesting が Safari でもサポートされ、Chrome/Edge とともに出揃った。
Chrome 113
WebGPU APIがサポートされ、最新GPU APIとの互換性向上やGPGPUのサポートが提供される。また、DevToolsでのレスポンスヘッダー上書きやCSS update Media Queryが追加された。
Chrome 112
CSSのネストがサポートされた。
Chrome 111
View Transitions APIのサポート、Style Queriesの拡張、CSS Color Module Level 4への対応など。
Chrome 110
Chrome 110のリリース。Windows 7/8/8.1のサポート終了と、CSSの:picture-in-picture疑似クラスのサポート。