関心インボーカーの使用 - Web API | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ���View in English � ��Always switch to English 関心インボーカーは、ユーザーが要素に対して「関心を示す」操作や「関心を失う」操作（例えば、マウスポインターを当てたり外したりする操作）をした際に、インターフェイスの更新や独自のコードの実行を可能にする仕組みです。最も一般的な用途は、ポップオーバーの表示と非表示です。このガイドでは、関心インボーカーの概念、使用可能な場合、および使用方法について説明します。 概念 ポップオーバー API は、関連する制御要素（インボーカー）がアクティブ化されたとき、例えばクリックされたときに、ポップオーバーを表示する機能を提供します。この機能は、モーダルや情報パネルなどの
カスタマイザブル・セレクト(Customizable select elements)で、Pinterest風のセレクトボックスを作る - Qiita
概要 新たに実装された機能であるカスタマイザブル・セレクトを使って、Pinterest風というか、メイソンリーレイアウトのセレクトボックスを作成する方法を解説をします。 サンプル 2025/12現在でChrome限定です。 See the Pen カスタマイザブル・セレクトで、Pinterest風のセレクトボックスを作る by lhankor_mhy (@lhankor_mhy) on CodePen. サンプルコード *, ::before, ::after { padding: 0; margin: 0; box-sizing: border-box; } select, ::picker(select) { appearance: base-select; } ::picker(select) { columns: 3; border: none; filter: blur(.5em
popover で作るピュアCSS階層ハンバーガーメニュー - Qiita
概要 最近実装されたpopoverや、CSSの新しい機能を使って、ピュアCSSで階層ハンバーガーメニューを作成する方法を解説します。 サンプル Chrome で見ていただけるとうれしいです。 See the Pen Untitled by lhankor_mhy (@lhankor_mhy) on CodePen. サンプルコード <div class="conponent-root"> <style> @scope to (.conponent-root) { :scope { position: sticky; inset: 0 auto auto; } button { all: unset; display: block; text-align: center; font-size: 2rem; padding: 1rem; } [popover] { all: unset; po
HTML つよつよ勢は全員 State of HTML 2025 に意見を送ろう！（8月15日まで） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは。@debiru_R です。私は2000年頃からHTMLの仕様やブラウザ実装を追いかけているHTML研究者です。 State of HTML 2025 という調査が2025年7月中旬から始まっています！ これは2023年から始まった、HTMLの最新仕様についてのみなさんの認知度と意見・要望について実態調査するものです。みなさんの回答はモダンブラウザの開発ベンダーのロードマップに直接影響を与えるものになります。 2023年に始まったきっかけ：https://x.com/LeaVerou/status/168420349
JavaScript不要! HTMLとCSSでつくるカルーセルUI - ICS MEDIA
2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？ ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。
aria-expandedの理想的な使い方 -- 名前と状態は適切に区別したほうが良い - ARIA-Barriers
@yncat です。 近頃のAIとの対話は本当に楽しいです。今回の記事でも、具体例のコードや、考えの整理のために大いに役立ってくれています。技術者としては、新しいツールのネイティブになっていかないと、すぐにおいて行かれるなと思って、精進する毎日です。 aria-expanded と aria-label 重複はよくないという意見 先日、 こういう意見をGithubに送りました 。 内容を簡単に要約します。 GitHubのマイページ で、自分の行ったコミットやpull requestの実績が出るところで、 aria-expanded で状態が示されている項目に対して collapse や expand などの aria-label がついているのが不要だという主張です。 これは、 WAI-ARIA を利用してアクセシビリティを実装しているウェブサイトでたびたび見られる、典型的な誤用であると私
dialog 要素の罠 - Esc キーを連打すると preventDefault が効かない - Qiita
はじめに 最近の Web 開発では、モーダル UI のマークアップに <dialog> 要素を利用することが主流となってきました。 最小限の JavaScript でモーダルを実現可能 フォーカス制御や Top layer などのアクセシビリティへの配慮が標準実装されている Esc キーで閉じる機能が標準搭載（本記事のテーマ） Chrome, Firefox, Safari, Edge など、主要なモダンブラウザでサポートされている この記事では、<dialog> 要素に標準搭載されている Esc キーで閉じる機能が、とある条件下で制御できない問題についてまとめます。 結論 最初に結論まとめです: <dialog> 要素の Esc キーによる閉じる操作は cancel イベントを発火する Chromium では、Esc キーを連打すると2回目以降の cancel イベントは event.c
Dialog と Popover #1 | blog.jxck.io
Intro HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初にあ
CSSを書く人の為のHTML5 inline or block 早見表 - Qiita
ドーモ こんにちは 皆さんはCSSは書いておられますか？ 毎日書いてるよって人も、たまに書くだけだよって人もおられるかとは思いますが、ごくまれに書いてるはずのCSSが上手くHTMLに当たらないって経験は必ずされると思います。そのような時は、CSSで"display:ほにゃらら"と当ててやるとたちまちご機嫌なCSSに立ち返ります。MDN"display"正確な解説はMDNをご覧ください この原因はHTMLの初期値のスタイル block or inlineという要素がCSSの邪魔をしているのです。 block要素には、block要素のCSSルール(具体例:inline要素とは異なり高さと幅を指定できる。) inline要素にはinline要素のCSSルール(具体例:inline要素の marginは、 左右のみ指定可能。上下は指定不可。)がそれぞれ独自にあります。 わかりやすく言うとサッカー部
混合状態のチェックボックス - ARIA-Barriers
@nishimotz です。 ウェブアクセシビリティLT＆交流会 vol.4 に参加して、交流会で話したことを、あとで気になって調べてみたのが今回の記事です。 混合状態(部分的にチェック済み)のチェックボックスは、あるオプションが複数のサブオプションを統括しているような場合に便利な UI 要素です。 しかし、アクセシビリティを確保するためには、適切な実装が必要だとされています。 さて、どうしたらいいのでしょうか。 APGの実装 ARIA Authoring Practices Guide (APG) Checkbox Example (Mixed-State) の実装を見てみましょう。 テキストだけ日本語に翻訳しました。 <fieldset class="checkbox-mixed"> <legend> サンドイッチの具材 </legend> <div role="checkbox" c
Customizable Select Element (Explainer) | Open UI
Customizable Select Element (Explainer)Table of ContentsSection titled Table%20of%20ContentsBackgroundOpting in to the new behaviorTesting out the customizable select elementHTML parser changesUse casesCustomizing basic stylesRich content in <option>sReplacing the buttonRendering the <option> differently in the buttonPutting custom content in the listboxAnimationsSplit buttonsButton behaviorThe se
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
macOSのSafariでは、ボタンやリンクにTabキーでフォーカスを移動できないのがデフォルトの設定になっている Safariでは、「設定」画面の「詳細」パネル内にある「Tabキーを押したときにWebページ上の各項目を強調表示」のチェックを入れていないと、Tabキーを押したときにボタンやリンクにフォーカスが移動しません（Optionキーを押しながらTabキーを押すと移動できます）。デフォルトではチェックが入っていない状態になっています。 また、macOS版Firefoxでは、「設定（about:preferences）」内の「タブキーでフォームコントロールおよびリンク間のフォーカスを移動する」にチェックが入ってないと、Safariと同じくボタンやリンクにはTabキーでフォーカスが移動しないようになっています。これはSafariの挙動にあわせて追加されたようで、やはりデフォルトではチェック
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
decoding="async" について詳しく調べてみる
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
popover=hint - Chrome Platform Status
contenteditableについてのメモ書き17選 - Qiita
HTML: object要素で変な物を仕込む - Qiita
HTML: iframeを使った手品 - Qiita
