.matchContainer() Polyfill ウェブ開発において、レスポンシブデザインはもはや標準です。長年にわたり、メディアクエリ（@media）はビューポートサイズに基づいてスタイルを適用するための主要なツールでした。しかし、真のコンポーネントベースの設計には、親要素のサイズに基づいて反応するコンポーネントが必要です。この問題を解決するために登場したのがCSSコンテナクエリ（@container）です。 しかし、コンテナクエリには重要な問題があります：メディアクエリがwindow.matchMedia()を通じてJavaScriptから操作できるのに対し、コンテナクエリには同様のJavaScript APIが欠けているのです。 問題の詳細 メディアクエリとJavaScript コンテナクエリの現状 .matchContainer() Polyfill APIと使用方法 .mat

Native Dual-range Input 「ネイティブ」という部分はある程度議論の余地があります - このライブラリは2つのネイティブレンジ入力と約60行のJavaScriptを使用して、それらを連携させています。私の観点では、これは十分にネイティブと言えるでしょう。 動作原理に興味がある場合は、ブログ記事をご確認ください。 使用方法 パラメータ スタイリング カスタムテーマ :focus-visibleスタイル API update(method: 'floor' | 'ceil' = 'ceil') destroy() WebComponent その他 使用方法 インストール方法: npm install @stanko/dual-range-input 必要なマークアップを追加: <div class="dual-range-input"> <input type="range

Avoid Read-only Controls 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 HTML フォーカス スタイル 編集可能？ ARIA スクリーンリーダー JAWS NVDA VoiceOver / macOS TalkBack VoiceOver / iPadOS デモ 結論 HTML 読み取り専用（readonly）属性は、テキストフィールド（<input>と<textarea>）にのみ許可されています。 WHATWG HTMLの仕様では、他のコントロール（ボタン、チェックボックスなど）を読み取り専用にすることは、無効化することと実質的に区別がないと主張しています。もちろん、フォーカス可能であるという点は除きます。 フォーカス 読み取り専用のフィールドとコントロールはタブ順序に含まれます。明確な手がかりがないため、ユー

The Different (and Modern) Ways to Toggle Content 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 コンテンツの切り替えとなると、JavaScriptを少し加えたdisplay: noneやopacity: 0を使用することが多いでしょう。しかし、今日のWebはより「モダン」になっているので、コンテンツを切り替える様々な方法を俯瞰的に見てみるのに適した時期かもしれません。現在実際にサポートされているネイティブAPIや、それらのメリット・デメリット、そして擬似要素やその他の一見分かりにくい機能についても見ていきましょう。 では、開示要素（<details>と<summary>）、Dialog API、Popover APIなどについて時間をかけて見ていきましょう。ニーズに応じて、それぞれをいつ

※本記事はアフィリエイトリンクが含まれています。 Webデザイン初学者にはピッタリの2冊をご紹介します。 HTML&CSSとJavascriptの基礎知識が2冊で身につきます！ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 Manaさんが書いたやさしい入門書 HTMLとCSSの基本が体系的に学べる 最新情報にブラッシュアップできる Webデザインの基本が学べる 本格的な配色見本があり、すぐ使える 簡単なアニメーションも学べる 1冊ですべて身につくJavaScript入門講座 とことん丁寧。寄り添う解説 プログラミングの学習にも使える アニメーションの知識が深く学べる 1つのWebサイトを作りながら学べる この1冊ですべての基本が身につく！ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 1冊ですべて身につくHTML & CSSとWebデザイン入門講座［

8 UI Animation Trends: Make Your Design Standing Out of Competitors 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 8つのUI アニメーションの例を紹介します。これらはユーザー体験とユーザビリティを向上させます。 アニメーションは重要なデザイン要素で、製品を補完するだけでなく、ユーザー体験を向上させ、デジタルソリューションとのインタラクションを強化する強力なツールになります。以下では、ユーザーを魅了し驚かせるようなアニメーションの例を見ていきます。 ユーザーを喜ばせるインターフェースアニメーションのアイデア8選 1. iOSのDynamic Islandモードでのアニメーション インタラクション iOSのDynamic Islandには、OSとのインタラクションを新しい形

Create Staggered Text Animation with Tailwind CSS and React 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Linearのランディングページに似た、React と Tailwind CSS を使って作成されたスタガーテキストアニメーションを実装してみましょう！ Vite React アプリの設定と Tailwind CSS のセットアップ マークアップの生成 スライドインアニメーションの追加 アニメーションのスタガー CSS 変数を使ったリファクタリング Vite React アプリの設定と Tailwind CSS のセットアップ 最初に、npx create vite app コマンドを使用して、Vite React アプリを作成し、ライブラリとして React を選択します

※本ページは、アフィリエイト広告を利用しています。 GW中の余暇を利用して何か勉強したい、そう考えている方にはUdemyがおすすめです。 なんと90%以上オフの講座が盛り沢山！セール期間は4月25日までですが、一旦購入しておけばあとから視聴が可能です。 興味のある講座は今のうちに押さえておきましょう。 Udemyとは？ Udemyのおすすめポイント 多彩なコース 手ごろな価格 柔軟な学習スタイル 実践的な学び 認定証の取得 特におすすめの講座8選 【最新テクニック】HTML / CSS 実践講座　世代遅れのフロントエンド 開発に留まっていませんか　リスキリングコース モダンフロントエンドエンジニアになるためのJavaScript入門 2024年版 はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ 【Reactアプリ開発】

Infinite-Scrolling Logos In Flat HTML And Pure CSS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 自動スクロールするロゴファームを作るように頼まれたとき、私は自問しました。「つまり、<marquee>のようなものですか？」それほど奇妙なリクエストではありませんが、<marquee>という言葉は、Geocitiesが支配していた「古い」Web時代を思い起こさせます。次は、繰り返し点滅するユニコーンのGIFの背景ですか？ <marquee>要素に手を出そうとしている場合はやめてください。MDNにはそのページのトップに厳しい警告があります。 非推奨: この機能はもはや推奨されていません。一部のブラウザがまだサポートしているかもしれませんが、関連するWeb標準から削除されている可能性があり、削除

Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ