CSS-Tricks 日本語 フォロー CSS Tricksは、Webデベロッパー、特にCSSと関連技術に焦点を当てた有益なトリック、テクニック、リソースを提供する人気のあるウェブサイトです。 CSS-Tricks css-tricks.com RSS css-tricks.com CSS-Tricks 日本語 RSS thenote.app
解決済み：CSSクラスプレフィックスセレクター 新しい提案が承認され、ワイルドカードを使用したバリエーションのプレフィックスとなるクラスを選択できるようになります。例えば、.prefix-* のような形式です。承認済み：CSS Class Prefix Selector は、CSS-Tricks で愛情を込めて手書きで作成・公開されました。ぜひニュースレターも購読することをお勧めします。 Resolved: CSS Class Prefix Selector css-tricks.com +1
CSSナビゲーションマッチング、初期の頃 特定のページから別のページへ移動する際にスタイルを適用します。これにより、クロスドキュメントビュー遷移のソースをJavaScriptで管理するのではなく、CSSで宣言的に記述できるようになります。CSS Navigation Matching, Early Daysは、CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読することをお勧めします。 CSS Navigation Matching, Early Days css-tricks.com +1
WordPress.com 学生プラン ウェブ開発の初歩を教えている者として、WordPressサイトの構築は素晴らしい最終プロジェクトになると考えています。しかし、それらのプロジェクトのホスティングは常に障害となっていました。WordPress.com Student Plan は、元々CSS-Tricksで手書きで公開されていました。ぜひニュースレターも購読することをお勧めします。 WordPress.com Student Plan css-tricks.com +1
ダークモードの切り替え：2つの状態あれば十分 Leaは、訪問者向けにライト、ダーク、システムの3つの状態オプションを表示するライト/ダークモードの実装に反対しています。ダークモードトグル：2つの状態があれば十分です。CSS-Tricksで愛情を込めて手書きで公開されました。ニュースレターもぜひ購読してください。 Dark mode toggles: two states are enough css-tricks.com +1
重要なこと #17: カスタムハイライトAPI、CSSナビゲーションマッチング、text-strokeの修正、その他 さらに、スケルトンUIのスタイリング方法、斜めスクロールの有効化方法、画像が自身からはみ出す方法、そしてさらに多くのこと。基本的に、非常にクールな（CSS）ことをたくさん行う方法です。「!important #17: Custom Highlight API、CSS Navigation Matching、text-strokeの修正、その他」は、CSS-Tricksで愛情を込めて手書きされ公開されたものです。ぜひこのニュースレターも購読することをお勧めします。 What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More css-tricks.com +1
ブロックされた aria-hidden: 警告は正しく、見つけたすべての修正は間違っている 警告は正しいです。そして、あなたが目にしたであろう推奨される修正は間違っています。問題を正しく修正するために、代わりにできることは次のとおりです。Blocked aria-hidden: 警告は正しく、見つけたすべての修正は間違っています。CSS-Tricksで愛情を込めて手書きで作成・公開されました。ニュースレターもぜひ購読してください。 Blocked aria-hidden: The Warning is Right, and Every Fix You’ve Found is Wrong css-tricks.com +1
CSSのborder-imageのアニメーション化 ボーダーイメージは、見過ごされがちな機能です。興味深い点として、ボーダーイメージのスライスは要素の境界線全体にまたがることができ、それをアニメーション化すると美しい効果が生まれます。CSSボーダーイメージのアニメーションは、元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターにも登録することをお勧めします。 Animating CSS border-image css-tricks.com +1
SmashingConf フライブルク 2026、9月7日～10日 Smashing Magazine の対面カンファレンスが復活し、来月9月7日から10日まで素晴らしい都市フライブルクに戻ってきます。SmashingConf Freiburg 2026、9月7日から10日、元々はCSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読してください。 SmashingConf Freiburg 2026, September 7-10 css-tricks.com +1
ダイアログ要素の使用とスタイリング 要素には多くのニュアンスがあり、それは一見するとウェブアーキテクチャの小さな部分です。それを掘り下げていくつかのメモを取りました。Dialog要素の使用とスタイリングは、元々CSS-Tricksに手書きで愛情を込めて公開されたものです。ニュースレターもぜひ購読することをお勧めします。 Using and Styling the Dialog Element css-tricks.com +1
2026 State of CSS、Devs Surveys 2026 State of CSS調査結果からのいくつかの注記とテイクアウェイ、そしてCSS-Tricksの素敵なカメオ出演も！2026 State of CSS、Devs Surveysは元々手書きで、CSS-Tricksで愛情を込めて公開されました。ぜひニュースレターも購読してください。 2026 State of CSS, Devs Surveys css-tricks.com +1
ギャップデコレーションが利用可能になりました。新着情報はこちら 本日、ChromeおよびEdgeのバージョン149以降でCSSのgapデコレーションが完全にサポートされたため、ギャップのスタイリングが非常に簡単になり、多くの制御が可能になりました。ギャップデコレーションが利用可能になりました。新しい点は以下の通りです。CSS-Tricksに愛情を込めて手書きで公開されました。ぜひニュースレターにも登録してください。 Gap Decorations Are Now Available, Here’s What’s New css-tricks.com +1
重要事項 #16: sibling-index() アニメーション、infinity キーワードのユースケース、コンテナ固定クエリ、その他 アニメーション、CSS、2026 FIFAワールドカップ向けのsoon-Baseline sibling-index()関数、infinityキーワードのユースケース、コンテナの「stuck」クエリなど。What’s !important #16: sibling-index() アニメーション、infinityキーワードのユースケース、コンテナのstuckクエリなど。CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読してください。 What’s !important #16: sibling-index() Animations, Use Cases for the infinity Keyword, Container Stuck Queries, and More css-tricks.com +1
書き込みモード 書き込みモードCSSプロパティは、テキストの行が水平に配置されるか縦に配置されるか、またブロックや行が進行する方向を決定します。 .element { 書き込みモード:vertical-rl; }これは中国語、日本語、または...書き書きモードで、もともとは手書きでCSS-Tricksで愛情を込めて公開されました。ニュースレターもぜひ受け取るべきです。 writing-mode css-tricks.com +1
ポインタイベント pointer-events プロパティは、要素がクリック、ホバー状態、その他のポインターベースのイベントなどのポインターイベントのターゲットになることができるかどうかを制御します。言い換えれば、ブラウザが要素をインタラクティブとして扱うべきかどうかを決定できます。…pointer-events は元々 CSS-Tricks で手書きで公開されました。ニュースレターもぜひ購読してください。 pointer-events css-tricks.com +1
重要事項 #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 +1
強力な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 +1
重要事項 #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 +1
CSSの状態とJavaScriptイベントの間の境界線の変化 CSSには常に、ユーザーの操作に基づいてスタイルを設定するための擬似クラスがありました。しかし、最近の機能は、CSSが「聞き取る」ものと、JavaScriptが通常聞き取るものの代替となるものとの境界線を曖昧にしています。CSSの状態とJavaScriptイベントの境界線の変化は、元々手書きでCSS-Tricksに愛情を込めて公開されました。ニュースレターもぜひ購読することをお勧めします。 The Shifting Line Between CSS States and JavaScript Events css-tricks.com +1
translateZ() translateZ() 関数は、要素をユーザーに近づけたり、遠ざけたりします。translateZ() は元々 CSS-Tricks に愛情を込めて手書きで公開されました。ぜひニュースレターも購読することをお勧めします。 translateZ() css-tricks.com +1
translateY() translateY()関数は、要素を垂直方向に指定された量だけ移動させます。translateY()は、元々CSS-Tricksで愛情を込めて手書きされ、公開されたものです。ぜひニュースレターも購読することをお勧めします。 translateY() css-tricks.com +1
translateX() translateX() 関数は、指定された量だけ要素を水平方向に移動させます。translateX() は元々 CSS-Tricks で愛情を込めて手書きされ、公開されました。皆さんもぜひニュースレターに登録することをお勧めします。 translateX() css-tricks.com +1
translate() CSSのtranslate()関数は、要素を2次元平面上のデフォルト位置から移動させます。translate()は元々CSS-Tricksに愛情を込めて手書きで公開されました。ぜひニュースレターにも登録することをお勧めします。 translate() css-tricks.com +1
反対のスクロール方向でスクロール駆動アニメーションを使用する 時折、デザイナーにはばかげたアイデアがありますが、それは最終的に気に入るようになります。これは、ユーザーがページをスクロールしたときに、反対方向に移動するアイテムの列を構築する必要があったこのコンセプトで私に起こりました。CodePen Embed Fallback注: この…Scroll-Driven Animations for Opposing Scroll Directionsは、CSS-Tricksで愛情を込めて手書きされ公開されたものです。ニュースレターもぜひ購読してください。 Using Scroll-Driven Animations for Opposing Scroll Directions css-tricks.com +1
スクロール連動アニメーションの初見レビュー スクロール駆動型アニメーションとスクロールトリガー型アニメーションの違いを見てみましょう。スクロールトリガー型アニメーションの最初の紹介は、CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読することをお勧めします。 A First Look at Scroll-Triggered Animations css-tricks.com +1
ariaNotify() のサイレンの歌 WAI-ARIA 1.3 仕様で定義された、まったく新しい ariaNotify() メソッドがあります。これは、スクリーンリーダーでプログラム的にナレーションをトリガーする手段を提供します。ariaNotify() のサイレンの歌は、もともと CSS-Tricks で愛情を込めて手書きで作成・公開されたものです。ぜひニュースレターにも登録することをお勧めします。 The Siren Song of ariaNotify() css-tricks.com +1
それに感謝する Props for That は、通常ブラウザではCSSで見ることのできない、ライブなプロップスベースの機能を作成します。カーソル位置、進捗値、特定のフォームの状態、現在時刻、スクロール速度などです。Prop For That は元々手書きで、CSS-Tricks に愛情を込めて公開されました。ぜひニュースレターも購読することをお勧めします。 Prop For That css-tricks.com +1
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 +1
なぜ3Dビューの遷移が機能しないのでしょうか？ なぜ私の3Dビュー遷移が機能しないのか？！ Sunkanmiはこのフラストレーションに取り組み、エレガントな解決策を提示します。なぜ私の3Dビュー遷移が機能しないのか？は、元々手書きで書かれ、CSS-Tricksに愛情を込めて公開されました。あなたもぜひニュースレターを購読すべきです。 Why Isn’t My 3D View Transition Working? css-tricks.com +1
ナビゲーションラベルに「ナビゲーション」を含める必要はありません。 スクリーンリーダー向けに記述する際に、覚えておくと役立つニュアンスの1つです。CSS-Tricksに愛情を込めて手書きで公開されたナビゲーションラベルに、「navigation」を含める必要はありません。ぜひニュースレターも購読することをお勧めします。 There’s no need to include ‘navigation’ in your navigation labels css-tricks.com +1
記憶に残るウェブ体験の創造：モダンCSSツールキット 記憶に残る体験を創造する方法はたくさんあります。時には、フォームがスムーズに完了するようなシンプルなことでもあります。しかし、ここではサイトを生き生きと感じさせ、記憶に残るようにしたいときに私が使うテクニックを共有することに興味があります。記憶に残るウェブ体験を創造する：モダンCSSツールキットは、元々手書きでCSS-Tricksに愛情を込めて公開されました。ニュースレターもぜひ購読することをお勧めします。 Creating Memorable Web Experiences: A Modern CSS Toolkit css-tricks.com +1
スクロール駆動、スクロールトリガー、スクロール状態、およびビュー遷移 私は一つを言いながら別の意味を込めており、一つが必要な時に別のものを使ってきました。スクロール駆動アニメーション、スクロールトリガーアニメーション、コンテナクエリのスクロール状態、そしてビュー遷移を、将来の自分のために比較しています。スクロール駆動、スクロールトリガー、スクロール状態、そしてビュー遷移は、元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読することをお勧めします。 Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions css-tricks.com +1
完璧なCSS円グラフへの再挑戦…JavaScriptなしで！ CSS円グラフに再び飛び込みます！今回は、著者Antoine Villepreuxが、JavaScriptを一切使用せずに、意味的で柔軟なグラフを提供します。完璧なCSS円グラフへのもう一つの試み…JavaScriptなし！元々はCSS-Tricksに愛情を込めて手書きで公開されました。皆さんもぜひニュースレターに登録することをお勧めします。 Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! css-tricks.com +1
オフセットパス CSS の offset-path プロパティは、要素がアニメーション中にたどる移動パスを定義します。このプロパティは、当初 motion-path として存在していました。これは、すべての関連する motion-* プロパティとともに、仕様書では offset-* に名称が変更されています。私たちは変更しています…offset-path は元々 CSS-Tricks に手書きで愛情を込めて公開されたものです。ぜひニュースレターも購読することをお勧めします。 offset-path css-tricks.com +1
@custom-media CSSの@custom-mediaアットルールは、メディアクエリのエイリアスを作成することを可能にします。@custom-mediaは元々CSS-Tricksで手書きで公開されました。ぜひニュースレターも購読することをお勧めします。 @custom-media css-tricks.com +1
@function @function アットルールは、CSSカスタム関数を定義します。これらのカスタム関数は、引数を受け取り、複雑なロジックを含み、そのロジックに基づいて値を返すことができる再利用可能なCSSブロックです。@function は元々CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読することをお勧めします。 @function css-tricks.com +1
::search-text CSSの ::search-text 疑似要素は、ブラウザの「ページ内検索」機能による一致するテキストを選択します。::search-text は元々CSS-Tricksに手書きで愛情を込めて公開されました。ぜひニュースレターも購読することをお勧めします。 ::search-text css-tricks.com +1
あらゆるフレームワークのためのAstro Markdownコンポーネント・ユーティリティ 前回の記事では、AstroでMarkdownコンポーネントを使用する理由と方法について説明しました。ここでは、それを拡張し、使用するフレームワークに関係なく、あらゆる場所でMarkdownを使用できるようにします。したがって、…Astro Markdown Component Utility for Any Framework は、CSS-Tricks 上で愛情を込めて手書きされ、公開されました。ぜひニュースレターにも登録してください。 Astro Markdown Component Utility for Any Framework css-tricks.com +1
重要事項 #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 +1
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 +1
AI時代のテクニカルライティング これは完全にAIについての話ではありません。AI時代のテクニカルライティングについての話です。これについていくつか考えがあり、読んでいる皆さんの役に立つことを願っています。AI時代のテクニカルライティングは、元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読することをお勧めします。 Technical Writing in the AI Age css-tricks.com +1
クロスドキュメントビュー遷移：数百の要素にわたるスケーリング ページ上のすべての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 +1
2026年におけるCSSセンタリングの現状 オンラインリソースは数え切れないほどありますが、要素を中央揃えしようとすると混乱しやすいものです。文書化された解決策はありますが、あなたが選んだコードがなぜ機能するのか、本当に理解していますか？2026年現在のセンタリングオプションの状態を見てみましょう。The State of CSS Centering in 2026 は、CSS-Tricks 上で愛情を込めて手書きされ、公開されました。ぜひニュースレターも購読してください。 The State of CSS Centering in 2026 css-tricks.com +1
Stack Overflow: 私たちが質問をやめるとき Stack Overflowの質問数の急激な減少を見るのは、今でも衝撃的です。これは、私たちの業界における学習について何を意味するのでしょうか？Stack Overflow: 私たちが質問をやめるとき CSS-Tricksで愛情を込めて手書きされ、公開されたものです。ぜひニュースレターも購読してください。 Stack Overflow: When We Stop Asking css-tricks.com +1
クロスドキュメントビュー遷移：誰も言及しない落とし穴 これは、クロスドキュメントビュー遷移に関する2部構成シリーズのパート1で、非推奨になったオプトイン方法からあまり知られていない4秒のタイムアウトまで、すべての落とし穴を網羅します。クロスドキュメントビュー遷移：誰も言及しない落とし穴は、CSS-Tricksで愛情を込めて手書きされ、公開されました。ぜひニュースレターにも登録してください。 Cross-Document View Transitions: The Gotchas Nobody Mentions css-tricks.com +1
重要事項！ #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 +1
CSSによる割引価格の計算と表示 ベース価格と割引額を提供することで、割引された製品価格を計算して表示するためのCSSの巧妙な使用法。attr()、mod()、round()などの最新のCSS機能が特徴です。CSSでの割引価格の計算と表示は、元々CSS-Tricksに愛情を込めて手書きで公開されたものです。ぜひニュースレターも購読することをお勧めします。 Computing and Displaying Discounted Prices in CSS css-tricks.com +1
rotateX() rotateX()関数は、要素を3次元空間のx軸を中心に回転させます。rotateX()は、CSS-Tricksで愛情を込めて手書きで公開されました。ぜひ、ニュースレターにも登録することをお勧めします。 rotateX() css-tricks.com +1
rotateY() rotateY() 関数は、要素をその垂直な y 軸を中心に回転させます。rotateY() は元々 CSS-Tricks で愛情を込めて手書きされ、公開されました。ニュースレターもぜひ購読してください。 rotateY() css-tricks.com +1
rotateZ() rotateZ() 関数は、要素を z 軸を中心に回転させます。つまり、時計回りまたは反時計回りです。rotateZ() は元々 CSS-Tricks で愛情を込めて手書きされ、公開されました。ニュースレターもぜひ購読してください。 rotateZ() css-tricks.com +1
rotate() rotate() 関数は、要素を 2D 平面上で時計回りまたは反時計回りに回転させます。rotate() は元々 CSS-Tricks に愛情を込めて手書きで公開されました。ぜひニュースレターも購読することをお勧めします。 rotate() css-tricks.com +1
