CSS-Tricks 日本語 フォロー CSS Tricksは、Webデベロッパー、特にCSSと関連技術に焦点を当てた有益なトリック、テクニック、リソースを提供する人気のあるウェブサイトです。 CSS-Tricks 日本語 RSS thenote.app RSS css-tricks.com CSS-Tricks css-tricks.com
書き込みモード 書き込みモードCSSプロパティは、テキストの行が水平に配置されるか縦に配置されるか、またブロックや行が進行する方向を決定します。 .element { 書き込みモード:vertical-rl; }これは中国語、日本語、または...書き書きモードで、もともとは手書きでCSS-Tricksで愛情を込めて公開されました。ニュースレターもぜひ受け取るべきです。 writing-mode css-tricks.com
ポインタイベント pointer-events プロパティは、要素がクリック、ホバー状態、その他のポインターベースのイベントなどのポインターイベントのターゲットになることができるかどうかを制御します。言い換えれば、ブラウザが要素をインタラクティブとして扱うべきかどうかを決定できます。…pointer-events は元々 CSS-Tricks で手書きで公開されました。ニュースレターもぜひ購読してください。 pointer-events css-tricks.com
重要事項 #15：境界認識CSS、時間ベースCSS、フルブリードCSS、その他 前回と同様に、What’s !important #15 は非常に充実しています。境界認識型 CSS、グリッドレーンへのアクセシビリティ、時間ベースのウェブデザインの作成、フルブリード CSS の修正、カスタマイズ可能なセレクトの改善、新しいウェブプラットフォーム機能などについてお読みください。What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More は、CSS-Tricks で愛情を込めて手書きされ公開されました。ぜひニュースレターも購読してください。 What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More css-tricks.com
強力なCSS border-shapeプロパティの準備をしましょう！ 最近、shape() 関数と corner-shape プロパティが登場しました。CSS で図形を作成する上で、他に何が必要でしょうか？それは、border-shape プロパティです！強力な CSS border-shape プロパティの準備をしよう！ CSS-Tricks 上で愛情を込めて手書きされ、公開されました。ぜひニュースレターにも登録してください。 Get Ready For the Powerful CSS border-shape Property! css-tricks.com
重要事項 #14：ギャップ装飾、random()、フィールドサイズ、その他 お忙しいかと思いますので、What’s !important #14では、ブラウザのアップデートは少ないものの、非常に充実したここ数週間を駆け足でご紹介します。CSS QuakeからCSS Gap Decorationsまで、これは見逃せません！What’s !important #14: Gap Decorations, random(), field sizing, and More は、CSS-Tricksで愛情を込めて手書きされ、公開されたものです。ぜひこのニュースレターも購読することをお勧めします。 What’s !important #14: Gap Decorations, random(), field sizing, and More css-tricks.com
CSSの状態とJavaScriptイベントの間の境界線の変化 CSSには常に、ユーザーの操作に基づいてスタイルを設定するための擬似クラスがありました。しかし、最近の機能は、CSSが「聞き取る」ものと、JavaScriptが通常聞き取るものの代替となるものとの境界線を曖昧にしています。CSSの状態とJavaScriptイベントの境界線の変化は、元々手書きでCSS-Tricksに愛情を込めて公開されました。ニュースレターもぜひ購読することをお勧めします。 The Shifting Line Between CSS States and JavaScript Events css-tricks.com
translateZ() translateZ() 関数は、要素をユーザーに近づけたり、遠ざけたりします。translateZ() は元々 CSS-Tricks に愛情を込めて手書きで公開されました。ぜひニュースレターも購読することをお勧めします。 translateZ() css-tricks.com
translateY() translateY()関数は、要素を垂直方向に指定された量だけ移動させます。translateY()は、元々CSS-Tricksで愛情を込めて手書きされ、公開されたものです。ぜひニュースレターも購読することをお勧めします。 translateY() css-tricks.com
translateX() translateX() 関数は、指定された量だけ要素を水平方向に移動させます。translateX() は元々 CSS-Tricks で愛情を込めて手書きされ、公開されました。皆さんもぜひニュースレターに登録することをお勧めします。 translateX() css-tricks.com
translate() CSSのtranslate()関数は、要素を2次元平面上のデフォルト位置から移動させます。translate()は元々CSS-Tricksに愛情を込めて手書きで公開されました。ぜひニュースレターにも登録することをお勧めします。 translate() css-tricks.com
反対のスクロール方向でスクロール駆動アニメーションを使用する 時折、デザイナーにはばかげたアイデアがありますが、それは最終的に気に入るようになります。これは、ユーザーがページをスクロールしたときに、反対方向に移動するアイテムの列を構築する必要があったこのコンセプトで私に起こりました。CodePen Embed Fallback注: この…Scroll-Driven Animations for Opposing Scroll Directionsは、CSS-Tricksで愛情を込めて手書きされ公開されたものです。ニュースレターもぜひ購読してください。 Using Scroll-Driven Animations for Opposing Scroll Directions css-tricks.com
スクロール連動アニメーションの初見レビュー スクロール駆動型アニメーションとスクロールトリガー型アニメーションの違いを見てみましょう。スクロールトリガー型アニメーションの最初の紹介は、CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読することをお勧めします。 A First Look at Scroll-Triggered Animations css-tricks.com
ariaNotify() のサイレンの歌 WAI-ARIA 1.3 仕様で定義された、まったく新しい ariaNotify() メソッドがあります。これは、スクリーンリーダーでプログラム的にナレーションをトリガーする手段を提供します。ariaNotify() のサイレンの歌は、もともと CSS-Tricks で愛情を込めて手書きで作成・公開されたものです。ぜひニュースレターにも登録することをお勧めします。 The Siren Song of ariaNotify() css-tricks.com
それに感謝する Props for That は、通常ブラウザではCSSで見ることのできない、ライブなプロップスベースの機能を作成します。カーソル位置、進捗値、特定のフォームの状態、現在時刻、スクロール速度などです。Prop For That は元々手書きで、CSS-Tricks に愛情を込めて公開されました。ぜひニュースレターも購読することをお勧めします。 Prop For That css-tricks.com
What’s !important #13: @function、alpha()、CSS Wordle、その他 CSS関数、alpha()関数、Grid Lanes、Dialogに関する意外な情報、CSS Wordleなど、今まさに注目すべき情報をお届けします。What’s !important #13: @function、alpha()、CSS Wordleなど は、CSS-Tricksで愛情を込めて手書きされ公開されたものです。ぜひニュースレターも購読することをお勧めします。 What’s !important #13: @function, alpha(), CSS Wordle, and More css-tricks.com
なぜ3Dビューの遷移が機能しないのでしょうか？ なぜ私の3Dビュー遷移が機能しないのか？！ Sunkanmiはこのフラストレーションに取り組み、エレガントな解決策を提示します。なぜ私の3Dビュー遷移が機能しないのか？は、元々手書きで書かれ、CSS-Tricksに愛情を込めて公開されました。あなたもぜひニュースレターを購読すべきです。 Why Isn’t My 3D View Transition Working? css-tricks.com
ナビゲーションラベルに「ナビゲーション」を含める必要はありません。 スクリーンリーダー向けに記述する際に、覚えておくと役立つニュアンスの1つです。CSS-Tricksに愛情を込めて手書きで公開されたナビゲーションラベルに、「navigation」を含める必要はありません。ぜひニュースレターも購読することをお勧めします。 There’s no need to include ‘navigation’ in your navigation labels css-tricks.com
記憶に残るウェブ体験の創造：モダンCSSツールキット 記憶に残る体験を創造する方法はたくさんあります。時には、フォームがスムーズに完了するようなシンプルなことでもあります。しかし、ここではサイトを生き生きと感じさせ、記憶に残るようにしたいときに私が使うテクニックを共有することに興味があります。記憶に残るウェブ体験を創造する：モダンCSSツールキットは、元々手書きでCSS-Tricksに愛情を込めて公開されました。ニュースレターもぜひ購読することをお勧めします。 Creating Memorable Web Experiences: A Modern CSS Toolkit css-tricks.com
スクロール駆動、スクロールトリガー、スクロール状態、およびビュー遷移 私は一つを言いながら別の意味を込めており、一つが必要な時に別のものを使ってきました。スクロール駆動アニメーション、スクロールトリガーアニメーション、コンテナクエリのスクロール状態、そしてビュー遷移を、将来の自分のために比較しています。スクロール駆動、スクロールトリガー、スクロール状態、そしてビュー遷移は、元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読することをお勧めします。 Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions css-tricks.com
完璧なCSS円グラフへの再挑戦…JavaScriptなしで！ CSS円グラフに再び飛び込みます！今回は、著者Antoine Villepreuxが、JavaScriptを一切使用せずに、意味的で柔軟なグラフを提供します。完璧なCSS円グラフへのもう一つの試み…JavaScriptなし！元々はCSS-Tricksに愛情を込めて手書きで公開されました。皆さんもぜひニュースレターに登録することをお勧めします。 Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! css-tricks.com
オフセットパス CSS の offset-path プロパティは、要素がアニメーション中にたどる移動パスを定義します。このプロパティは、当初 motion-path として存在していました。これは、すべての関連する motion-* プロパティとともに、仕様書では offset-* に名称が変更されています。私たちは変更しています…offset-path は元々 CSS-Tricks に手書きで愛情を込めて公開されたものです。ぜひニュースレターも購読することをお勧めします。 offset-path css-tricks.com
@custom-media CSSの@custom-mediaアットルールは、メディアクエリのエイリアスを作成することを可能にします。@custom-mediaは元々CSS-Tricksで手書きで公開されました。ぜひニュースレターも購読することをお勧めします。 @custom-media css-tricks.com
@function @function アットルールは、CSSカスタム関数を定義します。これらのカスタム関数は、引数を受け取り、複雑なロジックを含み、そのロジックに基づいて値を返すことができる再利用可能なCSSブロックです。@function は元々CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読することをお勧めします。 @function css-tricks.com
::search-text CSSの ::search-text 疑似要素は、ブラウザの「ページ内検索」機能による一致するテキストを選択します。::search-text は元々CSS-Tricksに手書きで愛情を込めて公開されました。ぜひニュースレターも購読することをお勧めします。 ::search-text css-tricks.com
あらゆるフレームワークのためのAstro Markdownコンポーネント・ユーティリティ 前回の記事では、AstroでMarkdownコンポーネントを使用する理由と方法について説明しました。ここでは、それを拡張し、使用するフレームワークに関係なく、あらゆる場所でMarkdownを使用できるようにします。したがって、…Astro Markdown Component Utility for Any Framework は、CSS-Tricks 上で愛情を込めて手書きされ、公開されました。ぜひニュースレターにも登録してください。 Astro Markdown Component Utility for Any Framework css-tricks.com
重要事項 #12：Safari テスト、::checkmark、HTML アンカー配置、その他 古いもの（Safariがない場合にSafariでテストする）、新しいもの（::checkmark）、中間（アンカーポジショニングだがHTMLを使用）、その他。What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More は、CSS-Tricksで愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読してください。 What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More css-tricks.com
CSSのletter-spacingでテキストを見せる ::nth-letterのようなものが手に入るまで、letter-spacing、::first-word、::first-lineといった既存のCSS機能から、本当にクールなテキストエフェクトをいくつか作ることができます。CSS letter-spacingによるテキストの表示 CSS-Tricksに愛情を込めて手書きで公開されました。ぜひニュースレターにも登録することをお勧めします。 Revealing Text With CSS letter-spacing css-tricks.com
AI時代のテクニカルライティング これは完全にAIについての話ではありません。AI時代のテクニカルライティングについての話です。これについていくつか考えがあり、読んでいる皆さんの役に立つことを願っています。AI時代のテクニカルライティングは、元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読することをお勧めします。 Technical Writing in the AI Age css-tricks.com
クロスドキュメントビュー遷移：数百の要素にわたるスケーリング ページ上のすべてのview-transition-nameは一意でなければなりません。問題は、CSS内のすべての擬似要素セレクタが特定の名前をターゲットにしているため、アニメーションスタイルが管理不能なセレクタの壁に爆発してしまうことです。Cross-Document View Transitions: Scaling Across Hundreds of Elements は、CSS-Tricksで愛情を込めて手書きで公開されました。ニュースレターもぜひ購読してください。 Cross-Document View Transitions: Scaling Across Hundreds of Elements css-tricks.com
2026年におけるCSSセンタリングの現状 オンラインリソースは数え切れないほどありますが、要素を中央揃えしようとすると混乱しやすいものです。文書化された解決策はありますが、あなたが選んだコードがなぜ機能するのか、本当に理解していますか？2026年現在のセンタリングオプションの状態を見てみましょう。The State of CSS Centering in 2026 は、CSS-Tricks 上で愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読してください。 The State of CSS Centering in 2026 css-tricks.com
Stack Overflow: 私たちが質問をやめるとき Stack Overflowの質問数の急激な減少を見るのは、今でも衝撃的です。これは、私たちの業界における学習について何を意味するのでしょうか？Stack Overflow: 私たちが質問をやめるとき CSS-Tricksで愛情を込めて手書きされ、公開されたものです。ぜひニュースレターも購読してください。 Stack Overflow: When We Stop Asking css-tricks.com
クロスドキュメントビュー遷移：誰も言及しない落とし穴 これは、クロスドキュメントビュー遷移に関する2部構成シリーズのパート1で、非推奨になったオプトイン方法からあまり知られていない4秒のタイムアウトまで、すべての落とし穴を網羅します。クロスドキュメントビュー遷移：誰も言及しない落とし穴は、CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターにも登録してください。 Cross-Document View Transitions: The Gotchas Nobody Mentions css-tricks.com
重要事項！ #11：3Dボクセルシーン、フライングフォーカス、CSSシンタックス、その他 スタイル設定可能な3Dボクセルシーン、フライフォーカスアニメーション、または新しいCSS構文があなたの好みに合うなら、このWhat’s !important号は間違いなくあなた向けです。What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More は、CSS-Tricksで愛情を込めて手書きで作成・公開されました。ぜひニュースレターも購読することをお勧めします。 What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More css-tricks.com
CSSによる割引価格の計算と表示 ベース価格と割引額を提供することで、割引された製品価格を計算して表示するためのCSSの巧妙な使用法。attr()、mod()、round()などの最新のCSS機能が特徴です。CSSでの割引価格の計算と表示は、元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読することをお勧めします。 Computing and Displaying Discounted Prices in CSS css-tricks.com
rotateX() rotateX()関数は、要素を3次元空間のx軸を中心に回転させます。rotateX()は、CSS-Tricksで愛情を込めて手書きで公開されました。ぜひ、ニュースレターにも登録することをお勧めします。 rotateX() css-tricks.com
rotateY() rotateY() 関数は、要素をその垂直な y 軸を中心に回転させます。rotateY() は元々 CSS-Tricks で愛情を込めて手書きされ、公開されました。ニュースレターもぜひ購読してください。 rotateY() css-tricks.com
rotateZ() rotateZ() 関数は、要素を z 軸を中心に回転させます。つまり、時計回りまたは反時計回りです。rotateZ() は元々 CSS-Tricks で愛情を込めて手書きされ、公開されました。ニュースレターもぜひ購読してください。 rotateZ() css-tricks.com
rotate() rotate() 関数は、要素を 2D 平面上で時計回りまたは反時計回りに回転させます。rotate() は元々 CSS-Tricks に愛情を込めて手書きで公開されました。ぜひニュースレターも購読することをお勧めします。 rotate() css-tricks.com
もうすぐJavaScriptをシャドウレルムに追放できるようになる 提案されている ShadowRealm API は、分離専用の新しい種類のレルムを導入します。まもなく、JavaScript を ShadowRealm に追放できるようになります。これは元々 CSS-Tricks に愛情を込めて手書きで公開されたものです。ニュースレターもぜひ購読してください。 Soon We Can Finally Banish JavaScript to the ShadowRealm css-tricks.com
なぜキーボードユーザーはオーバーフローコンテナをスクロールできないのか キーボードユーザーがテーブルにTabキーでフォーカスを移動させると、そのフォーカスはセルに当たります。次に、行を読み進めるために矢印キーを押しても何も起こりません。スクリーンリーダーユーザーは、スクロールコンテナではなくアクセシビリティツリーをナビゲートするため、このことに気づきませんでした。なぜキーボードユーザーはあなたのオーバーフローコンテナをスクロールできないのか、CSS-Tricksで愛情を込めて手書きされ公開された記事です。あなたはニュースレターも購読すべきです。 Why Keyboard Users Can’t Scroll Your Overflow Containers css-tricks.com
CSSのcorner-shapeを使用して折り畳まれた角を作成する Kitty Giraudel の折り込みコーナーテクニックを見つけました。最近、コーナーシェイプにハマっているので、コーナーシェイプを使って折り込みコーナーも作成できると考えました。CSSコーナーシェイプを使った折り込みコーナーは、元々手書きで書かれ、CSS-Tricksで公開されました。ぜひニュースレターも購読することをお勧めします。 Using CSS corner-shape For Folded Corners css-tricks.com
2026年母の日へのスクロリーテリングギフト 2026年の母の日に、私の母がこのスクロリーテリング実験をどのようにインスピレーションを与えてくれたか、そして母が開発と人生に対する私の取り組みにどのようにインスピレーションを与えてくれたかを説明します。2026年の母の日のためのスクロリーテリングギフトは、元々手書きで、CSS-Tricksに愛情を込めて公開されました。ぜひニュースレターも購読してください。 A Scrollytelling Gift for Mum on Mother’s Day 2026 css-tricks.com
GoogleのプロンプトAPI Mat Marquis氏による、Googleがウェブ標準のU2アルバムマーケティングに相当するものを展開していることについて：Chromeユーザーであるあなたは最近、Gemini Nanoを4GBの転送という形で受け取ったはずです。許可は求められず、必要もありませんでした。もしそれを削除すると、GoogleのPrompt APIは元々CSS-Tricksに愛情を込めて手書きで公開されました。あなたもぜひニュースレターを購読すべきです。 Google’s Prompt API css-tricks.com
グリッド＋トランスフォームのトリックでジグザグCSSレイアウトを作成する ほとんどのグリッドレイアウトは、整然と並んだ、まるで編隊を組んだ兵士のような、完璧に整列した行に配置されます。しかし、時にはジグザグパターンのような、よりリズミカルなものが欲しい場合もあります。CSS Gridでこれを実現する方法をご紹介します。グリッドとトランスフォームのトリックでジグザグCSSレイアウトを作成する これは元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読することをお勧めします。 Making Zigzag CSS Layouts With a Grid + Transform Trick css-tricks.com
固定高さのカード:見た目より壊れやすい カードの複数カラムを均等に並べるのは、誰もが経験したことのある頭痛の種であり、固定された高さで作業する場合はさらに難しくなります。固定された高さのカード：見た目よりも壊れやすい は、元々CSS-Tricksに愛情を込めて手書きで書かれ、公開されたものです。ぜひニュースレターにも登録することをお勧めします。 Fixed-Height Cards: More Fragile Than They Look css-tricks.com
重要事項 #10: HTML-in-Canvas、Hex Maps、E-ink最適化、その他 開発者は、HTML-in-Canvas、六角形の世界地図分析機能、電子インクデバイス用のWebベースOS、contentプロパティを使用した画像ソースの置き換えなどを実験してきました。これはWhat’s !important #10です。What’s !important #10: HTML-in-Canvas、Hex Maps、E-ink Optimization、その他 CSS-Tricksで愛情を込めて手書きで公開されました。ぜひニュースレターも購読してください。 What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More css-tricks.com
CSSにおけるネイティブランダム性の重要性 CSSで乱数を生成するための新しい機能が追加されます！しかし、ここに至るまでの道のりは長く曲がりくねったものでした。CSSにおけるネイティブな乱数の重要性 は、CSS-Tricksで心を込めて手書きされ公開されました。ぜひニュースレターにも登録することをお勧めします。 The Importance of Native Randomness in CSS css-tricks.com
対照() contrast() フィルター関数は、要素のコントラストを増加または減少させます。contrast() は元々CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読することをお勧めします。 contrast() css-tricks.com
コントラストカラー() contrast-color() 関数は、値を指定すると、その値に対して最もコントラストの高い黒または白のいずれかを返します。contrast-color() は元々 CSS-Tricks で手書きで公開されました。ぜひニュースレターも購読してください。 contrast-color() css-tricks.com
今は存在しない ::nth-letter セレクターを使いましょう 私のシム（ハック）は、権力者たちにネイティブサポートは不要だと言う別の理由を与えるかもしれないし、もし私の :nth-letter ハックを多くの人が実際に使えば、ブラウザの神々がそれを本実装する必要性を認識するかもしれない。存在しない ::nth-letter セレクターを今すぐ使おう。元々はCSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読してください。 Let’s Use the Nonexistent ::nth-letter Selector Now css-tricks.com
