週刊ダイジェスト・アーカイブ

CSS・スタイリング

出典を確認した週刊レポート31件を新しい順に掲載しています。

2026 · Week 31
CSS route matchingでnavigation stateをstyle可能に — 2026年第31週 CSS・スタイリング
今週のCSSは、browser navigation、shape decoration、typographic rhythmをdeclarative primitiveへ近づけました。提案中のCSS Route and Navigation…
2026 · Week 30
Motion UI: パフォーマンス評価付き React アニメーションライブラリ — 2026年第30週 CSS・スタイリング
今週の CSS & Styling 号は、ブラウザー実装の収束が実感できる時期に届きます。離散値トランジション・@starting-style・writing-modeはモダンブラウザー全体でベースラインに達し、text-fitは Chromium に先行実装されて次の段階を予告しています。かつて JavaScript…
2026 · Week 29
CSS random()で紙吹雪を降らせる — 2026年第29週 CSS・スタイリング
今週のCSS & スタイリング号の目玉は、新しい random() 関数です。Schalk Neethlingの28分間の深掘り記事は、ランダムキャッシュ名モデル・プログレッシブエンハンスメントの落とし穴・フォールバックアーキテクチャで @supports not より @layer…
2026 · Week 28
Anchor Positioning入門 — 2026年第28週 CSS・スタイリング
今週のCSSカバレッジはJavaScript依存を削減する新しいプラットフォーム機能に集中しました。CSS Anchor Positioning APIはanchor-name・position-anchor・position-areaを使ってツールチップやドロップダウンを任意のアンカー要素に正確に配置し、position-t…
2026 · Week 27
ちょうどいいCustomizable Selectの高さ — 2026年第27週 CSS・スタイリング
今週はCSSレイアウトとUIプリミティブが注目を集めました。AppleとGoogleの長年のスペック論争に決着をつけたネイティブCSSマソンリーレイアウトdisplay: grid-lanesについて2つの記事が公開されました。ひとつはgrid-template-columns、grid-template-rows、grid-…
2026 · Week 26
light-dark()、contrast-color()、Style… — 2026年第26週 CSS・スタイリング
今週のCSSはテーマ、クリエイティブエフェクト、アクセシビリティ、ツールなど複数の領域で重要な進展がありました。Una Kravetsは2026年5月にBaseline Newly Availableとなった完全宣言的なテーマシステムを紹介しました。light-dark()、contrast-color()、@property…
2026 · Week 25
CSS Day 2026レポート：CSS Geekismを深掘り — 2026年第25週 CSS・スタイリング
アムステルダムで開催されたCSS Day 2026が今週の雰囲気を主導しました。14のセッションで言語の最前線が語られました。主なハイライトには、Lea VerouのOKLCH色空間と適切なgamutマッピング、Sara…
2026 · Week 24
@function — CSSのNative Custom Function — 2026年第24週 CSS・スタイリング
今週のスタイリング分野最大のニュースは CSS ネイティブカスタム関数の登場でした。CSS Functions and Mixins Module Level 1 の @function at-rule が Chromium 139 でサポートされ、デフォルト値付きの型指定パラメーター、ローカル変数、@media…
2026 · Week 23
VoidZeroがCloudflareに参加 — 2026年第23週 CSS・スタイリング
今週の最大のスタイリングニュースは、Vite・Vitest・Rolldown・OxcのEvan YouのVoidZeroがCloudflareに買収されたことです。すべてのプロジェクトはMITライセンスのオープンソースとして継続されます。2023年以降、チームはVite…
2026 · Week 22
Algorithmic Theming Engine：contrast-color()… — 2026年第22週 CSS・スタイリング
今週CSSカラーツーリング面で重要なマイルストーンが達成されました。contrast-color()がChrome 147、Firefox 146、Safari 26.0でBaseline Newly Availableとなり、アクセシブルなテキスト色選択のためのchroma-jsやtinycolor2といったランタイムJav…
2026 · Week 21
CSS Gap Decoration：column-ruleとrow-ruleでGri… — 2026年第21週 CSS・スタイリング
今週のCSSは、重要な新しいレイアウト機能を獲得しました。ネイティブgapデコレーション提案は、column-ruleの拡張と新しいrow-ruleプロパティにより、余分なマークアップなしでgrid・flexのgap内にスタイル付きラインを描画できるようにします。rule-break・rule-inset・rule-visib…
2026 · Week 20
Safari 26.5のWebKit機能 — 2026年第20週 CSS・スタイリング
今週はブラウザに新しいCSS機能が数多く追加されました。Safari 26.5は details・dialog・select・input 要素の open 状態を統合スタイリングする :open 疑似クラスを出荷し、CSS random() で名前付きキャッシュキーがデフォルトでグローバルスコープになる仕様更新、Anchor…
2026 · Week 19
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…
2026 · Week 18
Scroll-driven Animation — 2026年第18週 CSS・スタイリング
今週のCSSは、主要ブラウザ全てで利用可能になったAPIの深掘りチュートリアルが注目を集めました。Josh W. Comeau はanimation-timeline: view()・animation-timeline:…
2026 · Week 17
2026年4月のWeb Platform新機能 — 2026年第17週 CSS・スタイリング
2026年4月はCSSブラウザ相互運用性の歴史的な月でした。Chrome 147は非矩形ボーダーのためのborder-shapeとelement.startViewTransition()によるスコープ付きview transitionを出荷しました。Firefox…
2026 · Week 16
Squash and Stretch：Disney最初のAnimation… — 2026年第16週 CSS・スタイリング
今週のスタイリング分野はアニメーション・レイアウト・クロスブラウザ互換性を幅広くカバーしました。Josh W. Comeauは、CSSのpath()とMotionライブラリのWeb Animations API統合を使ってSVGパスアニメーションにディズニーのスクワッシュ＆ストレッチ原則を適用する方法を紹介し、2026年4月時…
2026 · Week 15
CSSのSpring Physics — 2026年第15週 CSS・スタイリング
今週はいくつかの重要なCSS機能が注目を集めました。Chrome 113・Firefox 112・Safari 17.2からサポートされているCSS linear()イージング関数は、減衰調和振動子方程式を最大60個の均等間隔の値にサンプリングし、ランタイムJavaScriptなしの純粋なCSSカーブに焼き付けることで、本物の…
2026 · Week 14
CSS position: stickyが軸ごとに最寄りのScrollerへ固定される… — 2026年第14週 CSS・スタイリング
第14週はJavaScriptへの依存を減らすCSS機能のアップグレードが相次ぎました。最も実用的な影響を持つのはChrome 148での軸ごとのposition: sticky修正です。ラッパー要素にoverflow: auto…
2026 · Week 13
巧妙なHeader Blockerのテクニック — 2026年第13週 CSS・スタイリング
2026年3月はCSSプラットフォームの能力において画期的な月でした。Rachel Andrewのブラウザまとめによると、Chrome 146にscroll-driven animationsと新しいtrigger-scopeプロパティが追加され、Firefox 149とSafari…
2026 · Week 12
CSSの大拡張 — 2026年第12週 CSS・スタイリング
第12週は、ネイティブCSSが重量級JavaScriptライブラリの必要性を侵食しつつあることを強く裏付けた週でした。GitButlerの「The Great CSS Expansion」は、CSS Anchor PositioningがFloating UIとPopper.jsを、Popover…
2026 · Week 11
border-radiusの先へ：CSS corner-shapeが日常のUIにもたら… — 2026年第11週 CSS・スタイリング
今週のCSSの表現力がさらに向上しました。今週のfeatured記事であるcorner-shapeプロパティ（Chrome 139+）は、border-radiusの補助プロパティ一つでbevel、scoop、notch、squircleのコーナー形状を実現できることを示しています。clip-pathとは異なり、outline…
2026 · Week 10
有言実行：Progressive Enhancementで構築したリデザイン — 2026年第10週 CSS・スタイリング
Brecht De Ruyte のサイトリデザインが今週のフィーチャー記事です。corner-shape によるsquircle、方向対応のcross-document view transition、scroll-state queryによるsticky…
2026 · Week 9
カオスを受け入れる — Masonry Layoutの形と流れ — 2026年第9週 CSS・スタイリング
今週のフィーチャー記事は、ネイティブのmasonryレイアウトをshapeとflowという2つの観点から再構成しています。display: grid-lanesの仕様は列や行の構造を提供しますが、常に最短のlaneを選ぶpackingアルゴリズムは本質的に順序に依存せず、GridのgridAutoFlowのように視覚的な結果と…
2026 · Week 8
border-shape：非矩形Webの未来 | una.im — 2026年第8週 CSS・スタイリング
今週のCSSは二つの流れが交差しました。強力な新しいレイアウト・ジオメトリprimitiveがブラウザに届く一方で、既存ツールの誤用に対する実践的な見直しが行われました。注目記事のborder-shapeはChrome Canary…
2026 · Week 7
Interop 2026始動 – Mozilla Hacks — 2026年第7週 CSS・スタイリング
今週のCSSはクロスブラウザ協調とscroll-drivenの革新を中心に大きな動きがありました。注目記事のInterop 2026は、scroll-driven animations・container style queries・新しいCSS shape()構文など20のfocus…
2026 · Week 6
CSS @scope：命名規則と重い抽象化に代わる選択肢 — Smashing… — 2026年第6週 CSS・スタイリング
今週はCSSが注目を集めました。中心はCSS @scopeがBEM命名規則やCSS-in-JSツールチェーンを代替できる実用的なBaseline互換の選択肢であるという明確な主張でした。2025年12月のFirefox…
2026 · Week 5
Shrinkwrapを解決する新しい実験的手法 — 2026年第5週 CSS・スタイリング
今週のCSSはRoman Komarovの注目の詳細解説が中心となりました。10年来の難題だったshrinkwrap問題、つまり自動折り返しされたインラインコンテンツの幅に要素を合わせることを、anchor positioningとscroll-driven…
2026 · Week 4
CSS @container scroll-state()クエリ：JavaScriptな… — 2026年第4週 CSS・スタイリング
今週のCSSカバレッジは一つのテーマに収束しています。かつてJavaScriptが必要だった動作を、ブラウザがますます自前で処理できるようになっているということです。注目アイテムであるBrecht De RuyteによるCSS @container scroll-state()クエリの詳解が最も明確な例です。Chrome…
2026 · Week 3
ゲームチェンジャーとなる新しいCSSスクロール機能 — 2026年第3週 CSS・スタイリング
今週のスタイリングイシューは、CSSがかつてライブラリを必要としていたインタラクションパターンを真に置き換えられるエンジンへと成長していることを示しています。Web Dev Simplifiedのフィーチャード動画は、Chromiumに届いた4つの新しいスクロール駆動プリミティブを紹介します。sticky/snapped/sc…
2026 · Week 2
相対色でよりスマートなカラーシステムを構築する — 2026年第2週 CSS・スタイリング
第2週のCSSのテーマは、色のインテリジェンスとレイアウトの創意工夫の出会いです。注目の動画はKevin PowellによるCSS relative colorsの実演で、デザインシステムのよくある悩みを再定義します。ブランドカラーごとにtint・shade・transparentの変数を個別に管理する代わりに、hsl(fro…
2026 · Week 1
CSS Anchor Positioning入門：anchor-name、positio… — 2026年第1週 CSS・スタイリング
CSSはまたもJavaScriptの領域を取り込みながら2026年を迎えました。中心にあるのはSchalk NeethlingによるCSS Anchor Positioningの2部作です。第1回はanchor-name、position-anchor、3×3のposition-areaグリッドを、第2回はグリッドでは足りない…