articleタグ: CSS機能読了_時間: 12分
Container style queriesと高度なattr()：CSSコンポーネントの結び方を考え直す
Utilitybendはtyped attr()とcontainer style queriesを組み合わせ、親のHTML属性でgridと内部カードを設定します。間隔や最小幅をCSS単位として読み、密度、アクセント、注目カードの状態は子孫が問い合わせるcustom identifierにします。カードを別のコンテナーへ移すと、新しい変種クラスなしで外観が変わり、JavaScriptは移動、CSSは見た目の導出を担います。共通の密度倍率で寸法の比率を保ち、別々の上書き群を管理する負担を減らします。デモは意図的にfallbackを省き、公開時点ではstable Safariがtyped attr()に未対応と記すため、広いブラウザー向けに採用する前に、属性セレクターの基礎と@supportsによる拡張が必要です。
アーキテクチャ28:41
色を使いこなすために知っておきたいこと
Flux Academyは、読みやすさ、視覚的な階層、文脈や文化が生む連想を中心に実践的な色の枠組みを組み立てます。講義は色相、彩度、明るい色調、暗い色調から知覚的な色モデルであるOKLCHへ進み、パレットの色を画面上の意味別の役割へ割り当てます。すべての面へ使える色を全部適用するのではなく、複雑なパレットを使う場所を管理するよう勧めます。配色の比率は経験則であり、実演した高いコントラスト比も普遍的なアクセシビリティ基準ではなく一つの例です。洗練された配色でも弱い余白や階層は直せず、色だけですべての区別を伝えるべきでもないため、実際の画面でコントラストと意味を検証する必要があります。
CSS機能6:37
CSSでも数を数えられるようになりました
Kevin Powellは、兄弟要素のグループを装飾するときに、要素ごとの反復した指定をsibling-index()とsibling-count()で置き換える方法を示しています。子要素に独自の番号を一つずつ与えず、要素の順番からアニメーションの遅延を計算し、最初の項目をすぐ始める場合は一を引きます。sibling-count()からsibling-index()を引けばアバターの重なり順を逆にでき、全体の個数はホバー中の項目を最前面へ出す値として使えます。同じ位置情報で反復要素の色相を変化させると、スタイルを現在のマークアップに連動させられます。宣言的な計算で手作業の管理を減らせる例ですが、対象ブラウザーで両関数の対応を確かめ、動きの選択を含めた操作全体を検証する必要があります。
開発者体験5:02
コードを学ぶことは気にしなくていい…
Program With Erikは、コーディングエージェントが安定して扱えることを主な理由に抽象化を選ぶべきだという提案を検討します。Effectの構造化されたTypeScriptの扱いと、StyleXの型付きアトミックスタイルを例にしますが、それぞれ保守時に人が学び確認すべき内容も変わります。議論ではこれらの抽象化を、より見慣れたアプリケーションコードを公開するコンポーネント方式と比較します。結論は、エージェントが実装するから学習をやめるのではなく、開発者がレビューできるほど理解したスタックを維持することです。エージェントの信頼性は経験談の域なので、その理由で道具を変える前に、自分たちのプロジェクトでエラー処理、生成されたスタイル、レビューの負担を具体的に試す必要があります。
タグ: エコシステム読了_時間: 3分
Tailwind LabsがShopifyに加わります
Tailwind Labsは、フレームワークの長期的な基盤を確保し、実際のコマース製品の要求に沿って開発するためにShopifyへ加わります。Adam Wathanは、既存チームがTailwind CSSとほかのオープンソースプロジェクトを引き続き主導し、MITライセンスを維持すると説明しています。Shopifyのストアフロント、管理画面、決済フロー、エージェントによるコマースの取り組みが、今後の改善を支える製品上の文脈になります。商用製品ではTailwind Plusとui.shの新規登録を終了しますが、既存顧客は購入済み製品へのアクセスを維持します。フレームワークを使うチームにとってはライセンス移行の発表を伴わない運営基盤の変更であり、有料製品を検討していたチームは新規受付の終了を考慮する必要があります。
タグ: CSS機能読了_時間: 9分
Safari Technology Preview 252のリリースノート
Safari Technology Preview 252は、@supports内のnamed-feature()、接頭辞なしのuser-select、CSSの条件規則とメディア規則を調べる新しい方法を実験用ブラウザーへ追加します。外部SVGリソースと複数メモリを使うWebAssembly memory64にも対応し、JavaScript、メディア、アクセシビリティ、描画全般を修正します。CSSではmargin-trimのインライン軸の値を削除し、グリッドレーンのflow-toleranceをfit-toleranceへ改名しており、進化中の機能を追う実験に影響します。dialogのフォーカス、ストリーミングfetchの受け渡し、line-clampやグリッドの複数の動作も修正します。安定版Safariの提供範囲ではなくTechnology Previewの記録なので、対象ケースをプレビューで試し、実際の利用者のブラウザーに合った対応確認を維持する必要があります。
タグ: CSS機能読了_時間: 4分
CSS Anchor PositioningでCSS Gridのレイアウトをアニメーション化する
Bramusは、各グリッドセルを埋めるラッパーに絶対配置の内容を固定し、途中で方向を変更できる並べ替えアニメーションを示しています。anchor-scopeで同じアンカー名をセルごとに再利用し、aspect-ratioで形を保ち、ビューポートの変更に合わせてinsetのトランジションで内容を新しい位置へ動かします。内容の寸法を明示すると、オフセットの補間中に引き伸ばされたり縮んだりするのを防げます。通常のCSSトランジションを使うため、連続したリサイズでもView Transitionの処理完了を待たずに進行方向を変えられます。このケースではFirefoxがスタイルとレイアウトの計算を交互に行わず、anchor()が補間可能なピクセル値にならないと報告されているため、段階的な拡張として扱い、対象ブラウザーで確認してください。
タグ: CSS機能読了_時間: 4分
WebKitがinteractive-widgetに対応しました。Safariにも届くでしょうか
BramusはローカルでビルドしたMobileMiniBrowserをiPhoneシミュレーターで動かし、公開版Safariへの搭載前にWebKitのinteractive-widgetによる仮想キーボードとビューポートの制御を試しています。viewportのmeta指定では、resizes-visualは視覚ビューポートだけ、resizes-contentは視覚とレイアウトの両方を変更し、overlays-contentはどちらも変更しません。この選択は、固定した操作部品を画面上のキーボードより上に保てるか、別の配置方法が必要になるかに関わります。記事はWebKitへの実装とSafariでの出荷を明確に区別し、Safariの公開時期は確定していません。実際のSafariには最小構成のテスト用ブラウザーと異なるフローティングUIがあるため、追加検証が必要であり、シミュレーターでの成功を本番のiOS対応と見なすべきではありません。
タグ: エコシステム読了_時間: 4分
Bytes #520 - TailwindがShopifyに参加
BytesはTailwindのShopify参加を、広く使われるスタイリングプロジェクトを長期的に支える責任という観点から考察します。論評では、Shopifyにはオープンソース活動に加え、ウェブサイトのデザインという事業上の理由からもチームを支える動機があると見ています。ただし資金や雇用についての冗談は、公開された契約条件ではなく推測です。主題の周辺には、React 19.3で安定版となったViewTransitionとFragment ref、Shopifyのネイティブモバイル開発への復帰、複数のAI評価の議論が並びます。これらのリンクはフレームワークの保守、製品戦略、ベンチマークの解釈が交わる点を示しており、別枠のリリースツールに関する協賛欄は論評の根拠ではなく広告として区別されます。
タグ: クリエイティブコーディング読了_時間: 5分
Canvasで万華鏡を作る：対称性と動き
Carmen Ansioはポインターの線を8方向へ回転し、それぞれに鏡像を描いて万華鏡を作ります。Canvas変換で1つの動作から16の複製を生み、別の絵を管理せずctx.scale(1, -1)で反射します。lighterの加算合成で交点を明るくし、半透明の塗りで以前のフレームを徐々に消すことで、白い塊へ蓄積するのを防ぎます。実装はデモが見える間だけrequestAnimationFrameを動かし、reduced motionを求める利用者には動きを止めます。静的なCSSのくさびの組み合わせより持続する描画バッファがこの操作に合う理由と、対称性、発光、減衰が別々に効果を支える仕組みを示します。
タグ: クリエイティブコーディング読了_時間: 1分
CSSだけで作る動的なノード接続図 II
Temani Afifは、ノードが移動しても接続線が指定した側面につながり続けるよう、CSSによる図の実験を拡張しています。左から右、左から左、右から右という例を通じて、接続方向をノードの位置任せにせず明示しています。実装ではanchor positioning、border-shape、shape()、container queries、if()を組み合わせて形状と配置を調整します。原文はデモをChromium限定と明記しており、接続線の表示と正しさに依存するインターフェースでは重要な制約になります。宣言的な接続線の配置を試す小さな実験として有用ですが、広く使うには互換性を確認し、未対応ブラウザー向けの適切な代替手段を用意する必要があります。
タグ: CSS機能読了_時間: 7分
2026年のカスタムScrollbarコンポーネント
この独自scrollbarの実験は、anchor positioningでtrackを重ね、scroll-driven animationでthumbの位置と大きさを導きます。登録した--startと--endが名前付きscroll timelineに従い、animation-rangeとcontainer query単位で、JavaScriptによる連続計算なしに表示領域と内容の比率を反映します。JavaScriptは右から左への移動や、ポインターの取消・解放時の後片付けを含むドラッグを引き続き担当します。原文は標準scrollbarを隠し、アクセシビリティの完全性を実証しておらず、対応の説明も全stable版ではなくFirefox Nightlyを含みます。目に見える操作手がかりや代替入力に頼る利用者も考え、導入前に機能検出、標準のfallback、操作検証が必要な高度な装飾実験として扱うべきです。
タグ: パフォーマンス読了_時間: 2分
Cloudflareが保存容量を抑えるCache Transcodingを試験
CloudflareのCache Transcoding試作は、Pingoraベースのキャッシュ経路で対象テキストを保存前にZstandardで圧縮し、提供時に展開します。報告された約2.8倍のサイズ削減は対象コンテンツに限られ、キャッシュ全体や全通信量の結果ではありません。圧縮済みメディア、範囲要求、サイズ不明の応答、小さなオブジェクトを除き、保存や転送の節約が追加CPUに見合う対象へ処理を集中します。圧縮レベルとサイズ閾値は調整可能な交換条件であり、試験ではTiered Cacheの有無も比較します。開発は継続中で、ペタバイト規模の容量推定はこの方式からの見通しであり、全面展開の完了や全キャッシュ資産への保証ではありません。
タグ: CSS機能読了_時間: 6分
レスポンシブデザインを構成する六つの検討事項
レスポンシブな動作には、狭い画面に収まる列だけでなく、読みやすい文字、操作しやすい部品、内容の順序、ナビゲーションも含まれます。このチュートリアルは可変の文字サイズ、操作領域の余白、柔軟な配置、再利用するカードが利用可能な幅に反応するコンテナークエリーを結び付けます。例は部品単位の適応と画面全体を基準にする判断の違いを示します。ただし文字サイズのスライダーはコンテナー幅を変える一方で文字にビューポート単位を使うため、その操作自体では文字の拡大縮小を示せません。プラットフォームごとの対象サイズの単位やズーム時の動作も個別に確認し、簡略化した既定値を普遍的なアクセシビリティ規則と扱わないことが必要です。
タグ: CSS機能読了_時間: 2分
text-decoration-thicknessのブラウザー間の違い
Remy Sharpは2026年9月のstable browserで、見出しlinkのtext-decoration-thicknessを0から4pxへ変えた際の違いを記録します。Firefoxは期待どおりに動きましたが、Safariはtransitionなしで最終の太さへ移り、Chromeはanimationがなく、太さ0でも下線を表示しました。小さな視覚改善でも、開発時のbrowserと別のbrowserが一致するという想定の弱さが現れます。permalinkを見た目で隠してもscreen reader上のlinkの意味は消えないとも認めています。完全な対応表ではなく時点を示した実装観察であり、任意のanimationより元のlinkが重要です。
タグ: クリエイティブコーディング読了_時間: 4分
スカウト文化から組み立てたSkogenのGridScoutアイデンティティ
Skogenはスカウト活動と現場道具の視覚言語からGridScoutのアイデンティティを構成し、電力線センサーの技術と利用する作業員を結びます。抽象的なマークはキツツキの頭と位置ピンを組み合わせ、功績バッジのような記号で製品の価値を表します。ABC ROMによる幅の狭い見出し、本文、等幅の診断情報が、梱包、説明書、ウェブサイト、アプリ関連のグラフィックを貫きます。オリーブとクリームを基調にオレンジと緑を強調や警告に使い、取り込んだ素材の質感と実際の作業員の画像を加えます。個々の資料の語り口を変えながら、一つの視覚的な基盤で現場と経営層の両方に届く設計例です。
タグ: クリエイティブコーディング読了_時間: 2分
PinterestボードでClaude Designの結果を改善した経験
ポートフォリオの実験で、曖昧な文章によるスタイル説明を選び抜いたPinterestのムードボードに置き換えます。最初の平凡な結果を受け、筆者は約二十点の参考画像を集め、スクリーンショットをClaude Designへ渡し、作品例や自己紹介に関する質問に答えました。方向性にはコンタクトシートの構成、暖かい紙色、編集的な書体と等幅書体の対比など、フィルムを思わせる表現が現れました。その後Claude Codeが基本的なHTMLサイトへの実装を助けました。まだ未完成ですが、参考資料の選択が作り手自身の好みを明確にし、AIとの協働へ具体的な方向を与え、生成物をさらに個性を加える土台にできると示します。
タグ: エコシステム読了_時間: 7分
Web Weekly 第199号
Stefan JudisのWeb Weekly第199号は、テーマ操作の2状態と3状態をめぐる議論を、進化するウェブ機能の案内へつなげます。システムのテーマを一時的に上書きする方法と、明示的なシステム設定の予測しやすさを比較し、設計上の折り合いとして扱います。Interopの進捗、CSS Custom Highlight APIによる構文強調、モジュール解決の落とし穴、well-knownのパスワード変更URLも紹介します。提案段階のセレクターや新しいHTML要素を広く使える機能と区別し、複数の例がChromiumだけの対応である点を示します。実装の細部と設計判断を結ぶ読書案内として、さらに調べるための原文を紹介します。
タグ: エコシステム読了_時間: 3分
バイブコーディングで収益が減ったTailwindをShopifyが支える
The Registerは、広く使われるオープンソースを縮小する有料事業の導線で支える難しさから、Tailwind LabsのShopify参加を扱います。Adam WathanはAIを介した開発が訪問数や収益の減少につながったと説明し、実際の製品を支えるTailwindの長期的な基盤としてShopifyを位置付けます。発表された計画では、オープンソースのMITライセンスと既存チームによる保守を継続します。有料製品の新規登録は閉じますが、すでに購入した顧客のアクセスは残します。追加の支援内容は未回答なので、Tailwind CSSの保守への約束、新たな販売の終了、既存顧客へのアクセス保証を区別する必要があり、ダウンロード規模だけではこの収益構造の問題は解けません。
タグ: クリエイティブコーディング読了_時間: 8分
Three.js・WebGPU・TSLで無限のLiquid Glass Gridを作る
ShaderはThree.js、WebGPU、TSLで、透過物体を作る代わりに分割plane上でglassを模した循環video-card gridを作ります。rounded-box distance fieldからbevel normalを得て、ずらしたtexture標本でカード自身の映像を曲げ、scene lightなしでenvironment-mapの反射を足します。カードは球面上を循環し、ドラッグ中はReactのrender周期外にあるMotion値を読みます。初版はCSS matrixで実際のHTML labelを3Dカードへ合わせましたが、後のcloth-simulation更新でpmndrs/glyphによるscene内のMSDF textへ変更しました。変形する新labelは元のDOM textの選択や意味構造を引き継がないため、この楽しい描画手法だけで完全なアクセシブルUIを実証したとはいえない点が重要です。
タグ: クリエイティブコーディング読了_時間: 13分
光で描く：TSLとWebGPUによる照明付きGPUチューブの探求
Mathis Biabianyは繰り返し組み直すtube meshを、曲線の進行と断面の固定パラメーターgridへ置き換え、TSLで位置とnormalを導きます。MeshStandardNodeMaterialの照明を使い、動く曲線は手続き的関数やstorage bufferから得ます。手の形の例ではmesh graphとgeodesic distance fieldを歩いてstrandを作り、vertex段階で約1,500 instanceを動かします。失敗分析は、状態を持たない断面frameに特異点や不連続が生じ、ある形に合う基準軸が万能ではない理由を示します。shaderで位置を決める際はculling範囲も扱う必要があり、数学と描画の制約を明示したまま、反復する形状構築をCPU経路から移す点が中心です。
タグ: クリエイティブコーディング読了_時間: 15分
Still：Akiraから墨の表現へ、WebGPUで生成する庭を作る
Ming Jyun Hungは2段階のtoon照明、不規則な墨のshadow、screen-spaceの織りtextureで、Stillの庭に版画のような規則を作ります。焼き込んだvertex animationで花の精密な動きを残し、手続き的な花弁の落下、seed付きの茎、共通の植物lifecycleで変化を加えます。density fieldが宇宙飛行士の周囲へ植物をまとめ、packed geometryと毎フレームのDataTexture値でfieldを組み直さず成長・再生成します。つるはBVHの表面照会と地面へのgraph経路を結び、1つの成長前線で分岐を見せます。豊かさと応答性の均衡を未完の課題として扱い、instance、shadow pass、細部に費用がないと考えず、芸術の参照を再利用可能な描画システムへつなぐ事例です。
タグ: クリエイティブコーディング読了_時間: 3分
Three.jsで名前をデジタル建築へ変える
BL/SはThree.js Conference向けに、各文字を120点の輪郭で表し、入力した名前を金属のような構造へ変えます。入力glyphを隠れたcanvasへ描き、mask化、輪郭追跡、平滑化を経て、穴も含む共通表現にします。同じ点番号で曲線に沿って文字間を補間し、ねじり、絞り、傾きを加えます。選んだ縦線、横の補強、斜めの支柱で開いた構造を作り、line geometryと独自shaderで描画します。反射はray tracingではなく焼き込んだmapなので、共通の幾何表現と目的に合った視覚的な簡略化で個別化された操作を支える具体例です。
タグ: クリエイティブコーディング読了_時間: 7分
Yestalgia：遊び心あるデジタル体験でDecathlonの90年代らしさを表現
Yestalgiaの事例は、カセットプレーヤーのメニューと、編集者が7言語で組み替えられるWordPressサイトを結びつけます。BlockstudioのschemaとTwig templateで区画を定義し、piecesjs部品が自身のJavaScriptとCSSを読み、LenisとGSAP ScrollTriggerを連携します。遅れた複製で見出しの厚みを表し、モバイルでは単語単位に分け、reduced motionの要求時は時間差をなくします。Rive loopは画面外で停止し、共通Tempus loopはフレーム率による装飾回転の速度差を抑えます。固有の演出と編集可能な内容、明確な動きの振る舞いを両立する方法が有用であり、演出だけで他サイトのアクセシビリティ、性能、転換率の向上を実証する事例ではありません。
タグ: CSS機能読了_時間: 11分
過去のCSSに残る奇妙な仕組み
歴史的なCSSを巡るこの記事は、古いスタイルシートに不正な形式や不要な繰り返しに見える宣言が残る理由を説明します。Internet Explorerの解析の癖は特定ブラウザー向けの上書きを可能にし、hasLayoutやfloatの不具合はコードだけでは目的を読みにくい修正を生みました。CSS内のJavaScript式、DirectXによるフィルター、スクリプトを付けるHTML Components、介入的な連携に対抗するツールバー専用ルールも扱います。ボックスモデルやコメント解析の工夫は、レイアウトが個々のエンジンへ深く依存していた様子を示します。最後のベンダー接頭辞の話は実験より長く残る互換性の負担につながり、引き継いだCSSと特殊な構文を生んだ制約を理解する背景になります。
タグ: アーキテクチャ読了_時間: 2分
2状態のDark Mode Toggleを試す
Zach Leathermanは2つの見た目の状態を用意し、現在OS設定と一致する側をautomaticと表示するdark mode操作を試します。System、Light、Darkを個別に示さず、システムの結果と明示的な反対の外観を切り替えます。システムと一致する選択へ戻ると保存済みoverrideを消し、toggleのたびに見た目が変わります。時間によって好みを自動変更するOSでは、操作の単純化が継続的な意図の表現も変えるため、その点への批判を認めます。Leathermanは自分のサイトでこの折り合いを好みますが、全ての3状態preference操作を置き換える証拠ではなく実験と個人的な判断として扱います。
タグ: エコシステム読了_時間: 2分
2027年のWebプラットフォーム機能、私の順位はこうです
このDeveloper Signalsの個人的な順位付けは、SassやJavaScriptで作ってきた回避策を置き換えられるCSS機能を支持しています。候補には独自関数、再利用可能なミックスイン、条件付きの値、固有サイズの計算、カスタマイズ可能なselect、anchor positioning、型付きのattr()、フォントのメトリクスに基づく余白調整が含まれます。margin-trimとanchor positioningは前年に続いて選ばれており、ブラウザー間で一貫した動作を求める姿勢が見えます。これは2027年の議論に向けた開発者の希望であり、採択済みのInterop計画や全機能の広範な出荷を示すものではありません。コンポーネントを扱うチームは、相互運用性が実現すれば現在のどのレイアウトやスタイルの回避策を取り除けるかを整理する材料にできます。
タグ: ツール読了_時間: 1分
StyleXを詳しく見る
Chris Coyierの短い読書メモはFlavio Copesの長いStyleX記事を紹介し、styleの書き方と配信されるCSSを分けて考えます。作者がatomicやutility classの形で書かなくてもatomic CSSの出力を得られる点に魅力を見ます。その出力は通常のCSSとして読み込まれるため、記述modelと配信形式は別の設計選択です。Tailwindとの比較も出力特性についてで、APIや移行経路が共通という主張ではありません。既存ツールを好意的に紹介する読書案内であり、新release、benchmark、完全な実装guideではありません。
タグ: エコシステム読了_時間: 1分
The Index 第197号
PiccalilliのIndex第197号は、考え抜いた製品設計、タイポグラフィ、独立したWebを軸にリンクを集めます。Mindful Design Products、レコードプレーヤーの対話的な解説、数学で見出しを整える方法、type scaleの続編が選ばれています。Andy BellはATmosphereで再開したCSS Layout News、ハイパーリンクへの賛辞、Standard.siteでの公開を紹介する過去記事も案内します。短評は編集者が注目した理由を示し、新しい測定やリンク先の教材全文を提示するものではありません。その時点の探索経路として利用し、実装や週間のリリース要約へ主張を移す前に、リンク先ごとの日付と詳細を確認する必要があります。
summarizeダイジェスト_要約
型付きattr()とコンテナースタイルクエリーは、別のバリアントクラス群を増やさずに親の属性を子のコンポーネントへ反映できます。Utilitybendの例は仕組みを具体化しますが、公開時点のブラウザー制約を踏まえ、基本動作を確保する必要があります。
TailwindのShopify参加は、道具の議論に組織の持続性という論点を加えます。文字装飾の違い、スクロールバーの実験、キーボードとビューポートの動作は、一つのブラウザーで整ったデザインも別の環境で試す必要があると示します。
Three.js、WebGPU、Canvasの制作は、生成する庭から動くグリッドまでWebの表現を広げます。提供環境が支えられる効果を選びつつ、理解できる操作とレスポンシブな動作を保つことが共通の実務課題です。
重要ポイント- 型付き
attr()とスタイルクエリーの導入前に基本動作を用意してください。 - 対象ブラウザーでスタイルとビューポートの動作を確認してください。
Three.jsやWebGPUの効果を操作性と提供環境の制約と合わせて判断してください。
