(BUSAN.SASHIMI)
週刊ダイジェスト // STYLING — 2026年 第19週
palette週刊レポート

Tailwind CSS v4.3：Scrollbar、新色など — 2026年 第19週 CSS・スタイリング

今週のスタイリング分野はTailwind CSSが中心でした。v4.2とv4.3が同時公開され、v4.2ではmauve・olive・mist・taupeの4つのニュートラルカラーパレット、PostCSS経由と比べてビルド時間を2倍以上短縮する専用webpackプラグイン、論理プロパティユーティリティの拡充が追加されました。v4…

calendar_todaysummarize2026年 第19週
Tailwind CSS v4.3：Scrollbar、新色など
タグ: フレームワーク読了_時間: 7分

Tailwind CSS v4.3：Scrollbar、新色など

Tailwind CSS v4.2とv4.3が1つのブログ記事でまとめて公開され、2リリース分の新機能を網羅しています。v4.2ではmauve・olive・mist・taupeの4つのニュートラルカラーパレット、PostCSS経由と比べビルド時間を2倍以上短縮する専用webpackプラグイン、pbs-*・mbs-*・inline-size・block-size・inset-s-*・inset-e-*などの論理プロパティユーティリティ拡充、font-feature-settingsを制御するfont-features-*ユーティリティが追加されました。v4.3ではscrollbar-width(scrollbar-auto・scrollbar-thin・scrollbar-none)・scrollbar-color(scrollbar-thumb-*・scrollbar-track-*)・scrollbar-gutterを網羅するスクロールバーユーティリティ、cqb/cqhユニット向け@container-sizeユーティリティ、CSSのzoomプロパティ用zoom-*ユーティリティ、tab-size用tab-*ユーティリティ、CSS内でのスタック・複合@variantサポート、--default()による@utilityデフォルト値指定が導入されました。
記事を読むarrow_forward
チャレンジ

Frontend DeveloperがCSS Battleに挑戦 — 10分Challenge

Kevin Powellは自己設定の10分タイマーのもとCSS Battleチャレンジ251・252・253に取り組み、リアルタイムの意思決定プロセスを解説します。チャレンジ251は上側2角にborder-radius: 100vwを適用したスタックdivとデコレーティブなstripe用pseudo-elementを使い、margin-inline: autoでセンタリングして約5分40秒で100%達成。チャレンジ252はbox-shadowのspreadレイヤー(0 0 0 20px・0 0 0 50px・0 0 0 70px)と半分の高さの::afterで同心円を構成し99.9%を記録。チャレンジ253は両側transparentボーダー(border-top-colorとborder-bottom-colorのみ設定)とrotate: -45degでダイヤモンド形を作り、bodyとhtmlにpositionedなpseudo-elementを4つ配置してエンドキャップの円を表現、7分58秒で100%達成。border-boxサイジングの微妙な挙動、box-shadowショートハンドでのtrailing comma禁止ルール、手動のleftオフセットよりinsetとmargin-inline autoの方がシンプルだったという振り返りも紹介しています。
AI_インフォグラフィック
Frontend DeveloperがCSS Battleに挑戦 — 10分Challenge — インフォグラフィック
動画_を見るarrow_outward
タグ: レスポンシブ読了_時間: 4分

Media Query Range Syntax

Ahmad Shadeedは、min-width/max-widthメディアクエリをMedia Queries Level 4のrange構文に切り替える実践的な理由を解説しています。従来の書き方では、max-width: 300pxとmin-width: 300pxが同じブレークポイントで同時に成立し、要素が一度に消えるという微妙なバグが発生します。range構文はこの曖昧さをwidth <= 300pxやwidth > 300pxのような読みやすい比較演算子で解消し、1pxのオフセット調整が不要になります。両端指定の範囲は(300px <= width <= 500px)という一つの式で、and連結の2クエリをまとめられます。同じ構文は@mediaを@containerに置き換えることでコンテナクエリにも利用できます。ブラウザサポートは2023年3月からBaselineで安定しており、今日のプロダクションでも安全に使えます。
タグ: アニメーション読了_時間: 8分

CSSで数学する：Layout・Animation向け三角関数

CSSは2023年よりsin()・cos()・atan2()をサポートしており(Baseline、Chrome 111+、Firefox 108+、Safari 15.4+)、JavaScriptなしで円形・弧・螺旋・ポインタレイアウトを実現できます。基本パターンは要素ごとの--angleカスタムプロパティをcos()とsin()に渡し、コンテナ中心からのtranslateオフセットを算出します。回転アニメーションでは、コンテナが前方に回転する一方、各子要素がanimation-delayとreverseキーワードで逆回転し、視覚的な向きを保ちます。--angleを直接トランジションするにはsyntax: angleを指定した@property登録が必要で、型がないとブラウザが補間を黙って無視します。位置を決める--iインデックス変数は、calc(var(--i) * 80ms)による入場アニメーションのスタガー遅延やhsl()での色指定にも同様に使えます。アークナビゲーションでは開始/終了角度のペアが全円を置き換え、atan2(-y, -x)で要素を内向きにし、単一のmousemoveリスナーが--mx/--myを渡せばCSSが12個の回転角度をクライアント側で計算します。
タグ: CSSテクニック読了_時間: 9分

CSS — 想像できる最高のAPI Technique

この記事では、CSS Space Toggle技法を二値ON/OFFから多状態セレクターにアップグレードしたCyclic Space Togglesを紹介しています。標準のSpace Toggleは、スペース文字に設定したカスタムプロパティがtruthy(var()フォールバックをブロック)でinitialがfalsey(IACVT — Invalid At Computed Value Time)になる仕様を利用し、条件付きプロパティ適用を実現します。Cyclic Space Togglesでは複数のinverted toggleを連鎖させ、--select変数に--option-*参照の組み合わせを指定すると対象オプションだけがinitialに切り替わり、残りはスペース状態を維持します。結果として、boolean専用のショートハンドAPIが生まれます。CSSライブラリの利用者は単一宣言で複数の機能フラグを有効化できます(--bp-fluidity: var(--fluid-xxs) var(--fluid-sm) var(--fluid-lg))。著者は自身のbreakpoint-systemライブラリでの実用例を示し、TailwindのクラスリストをCyclic Toggle型CSSAPIで置き換えるアイデアも提示しています。ブラウザの到達率は約95〜97%と記されています。
タグ: モバイル読了_時間: 8分

safe-area-insetでMobile-safe Layoutを構築

現代のスマートフォンにはノッチ・ダイナミックアイランド・カメラパンチホール・ホームインジケーターのジェスチャー領域があり、固定UIを隠す可能性があります。ブラウザはこれらの寸法をenv() CSS関数でsafe-area-inset-top・right・bottom・leftとして公開しており、すべてBaselineで広くサポートされています。フルエッジ-to-エッジレンダリングにはまずmeta viewportタグにviewport-fit=coverを追加し、env()値をpaddingやpositioningに適用する必要があります。デフォルトの余白はゼロなので、calc(env(safe-area-inset-bottom) + 1rem)で余裕を設けます。記事ではChromium限定の新機能safe-area-max-inset-*も取り上げており、ブラウザクロームが収縮しても安定したゾーンを保持しますが、SafariとFirefoxでは未サポートです。Chrome DevToolsのレスポンシブビューは常に0を返すため、デバイスごとの正確なinset値をエミュレートするPolypaneの活用を推奨しています。
タグ: ポップオーバー読了_時間: 4分

Popover BackdropのAnti-pattern

Remy Sharpは、dialog要素の代わりにHTML popover属性と::backdropを組み合わせてモーダル風オーバーレイを実装する際に生じるセキュリティ隣接のUXバグを文書化しています。popoverはフォーカスもポインターイベントも閉じ込めないため、::backdropをクリックするとオーバーレイが閉じるように見えても、実際にはDOMの下にある要素までクリックが透過します。Sharpはクリックジャッキング風のデモでこれを実証しており、popoverの裏に全画面の隠しボタンを配置すると、ユーザーがdismissのためにクリックした際にそのボタンが発火します。正しい解決策はクリックを完全にトラップするdialog要素を使うことです。また、不透明やぼかしのbackdropがpopoverでは実現できないモーダル的な意図を示唆することから、popoverが::backdropをサポートすべきか自体を問題提起しており、Firefoxのsolidバックグラウンドバグも報告されています。
summarizeダイジェスト_要約

今週のスタイリング分野はTailwind CSSが中心でした。v4.2とv4.3が同時公開され、v4.2ではmauve・olive・mist・taupeの4つのニュートラルカラーパレット、PostCSS経由と比べてビルド時間を2倍以上短縮する専用webpackプラグイン、論理プロパティユーティリティの拡充が追加されました。v4.3ではscrollbar-width・scrollbar-color・scrollbar-gutterを網羅するスクロールバーユーティリティ、cqb/cqhユニット向け@container-sizeユーティリティ、CSSのzoomプロパティ用zoom-*ユーティリティが導入され、CSS内でのスタック・複合@variantサポートと@utilityの--default()によるデフォルト値指定も追加されました。

レイアウトとブラウザプリミティブを扱う記事も多く登場しました。Ahmad Shadeedは2023年3月からBaselineで安定しているMedia Queries Level 4のrange構文（width <= 300px、300px <= width <= 500px）への即時移行を推奨し、従来のデュアルブレークポイントの曖昧さバグを解消できると説明しています。Carmen Ansioは、Chrome 111 / Firefox 108 / Safari 15.4以降で使えるsin()・cos()・atan2() CSSの三角関数を使い、JavaScriptなしで円形・弧・螺旋レイアウトを構築する方法と、--angleのトランジションに必要な@property登録を実演しました。Polypaneのガイドでは、ノッチ対応モバイルレイアウト向けのviewport-fit=coverとenv() safe-area-inset-*の使い方、そしてChromium限定のsafe-area-max-inset-*も紹介されました。

2本の短い記事も注目されました。Remy Sharpは、dialogの代わりにpopoverと::backdropをモーダル代用として使う場合にポインターイベントがトラップされずクリックジャッキングリスクがあることを文書化しました。もう1本の記事ではSpace Toggle技法を拡張したCyclic Space Togglesを紹介し、JavaScriptなしで約95〜97%のブラウザでN状態のbooleanショートハンドAPIを実現できることを示しています。

重要ポイント
  • Tailwind CSS v4.3はscrollbar-width・scrollbar-color・scrollbar-gutterユーティリティとcqb/cqhユニット向け@container-sizeをネイティブ搭載しました。まとめて利用するには今すぐアップグレードしましょう。
  • Media Queries Level 4のrange構文（width <= 300px、300px <= width <= 500px）は2023年3月からBaselineで安定しており、デュアルブレークポイントの曖昧さバグを解消します。今すぐ移行できます。
  • popoverと::backdropをモーダル代用として使うのはポインターイベントをトラップしないためクリックジャッキングリスクがあります。::backdropが正しくクリックをトラップするdialogを使いましょう。