ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。 popover 属性を使用すると HTML のみを使用してアクセシブルなポップオーバーを作成できます。ポップオーバーの作成は非常に簡単です。 ポップオーバーを表示する要素に popover 属性を追加する ポップオーバーをトリガーする要素に popovertarget 属性を追加する popovertarget の属性の値には popover 属性を持つ要素の id を指定する また、ポップオーバーをより細かく制御するために popover 属性に値を設定することもできます。現在は auto と manual の 2 つの値がサポートされています。 Chrome Beta 133 では 3 番目の値として hint が追加されました。popover=hint はユーザー

「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主

select 要素がカスタマイズできるようになる これまで HTML の<select>要素はカスタマイズが難しい部分でした。各ブラウザのデフォルトスタイルに依存しデザインや機能を統一するのが困難でした。かといってオリジナルのセレクトボックスを作成するとなると CSS と JavaScript でイチから作成する必要がありました。 しかし今後、HTML ネイティブの<select>要素に柔軟にスタイルを加えることができるようになるようです。イチから作成したセレクトボックスをネイティブのselect要素と同等レベルでアクセシビリティやパフォーマンスに配慮して、各 OS に最適化されたユーザー体験にするのは至難の業ですので、ネイティブ<select>要素がカスタマイズできるということは革命的なことだと思います。 本記事では、実際に<select>要素のカスタマイズ機能が先行的に実装されている

はじめに この記事の概要 前回の記事で、detailsの基本的な使い方とJavaScriptを使用したカスタマイズ方法を紹介しました。 detailsを使用することで、HTMLのみで簡単にアコーディオンを作成することができるとお分かり頂けたかと思います。 ただ、前回も紹介しましたが、detailsで作成したアコーディオンをそのまま表示すると味気ないものになってしまうので、 CSSを用いて見た目をカスタマイズすることをおすすめします。 今回はその応用で、CSSのみを使用して簡単に見栄えを良くする方法をご紹介します！ 前回の記事はこちらになります↓ 2023年5月27日【CSSのみ】detailsで作ったアコーディオンにアニメーションをつける 対象読者 HTMLやCSSを使用したコーディングを勉強中の方detailsを使用してアコーディオンを実装したい方detailsで作成したアコーディオンの

記事を読むうえでの注意点 一部おかしな記述があるかもしれません。 そのためもし間違いなどがありましたらご指摘いただけると幸いです。 FAQなんかのUIでよく使われる、クリックしたら関連するコンテンツがニュッと表示されるアレ。 みなさんは普段どのように実装されていますか？ アコーディオンUIを実装するにあたって、マークアップに最適なタグとしてdetailsとsummaryがあると知りまして、このタグを使って実装してみたいと思います。 実装してみた まずは結論から。 実際に今回実装していくアコーディオンUIのソースコードはこちらです。 details・summaryタグは何が良いの？ details summaryタグを使用しない実装では、アクセシビリティな実装をする場合、考慮する事項が多く、網羅しようと思うと工数がかかります。 ですが、details summary要素を使用することでアクセ

アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？　見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を

macOSのSafariでは、ボタンやリンクにTabキーでフォーカスを移動できないのがデフォルトの設定になっている Safariでは、「設定」画面の「詳細」パネル内にある「Tabキーを押したときにWebページ上の各項目を強調表示」のチェックを入れていないと、Tabキーを押したときにボタンやリンクにフォーカスが移動しません（Optionキーを押しながらTabキーを押すと移動できます）。デフォルトではチェックが入っていない状態になっています。 また、macOS版Firefoxでは、「設定（about:preferences）」内の「タブキーでフォームコントロールおよびリンク間のフォーカスを移動する」にチェックが入ってないと、Safariと同じくボタンやリンクにはTabキーでフォーカスが移動しないようになっています。これはSafariの挙動にあわせて追加されたようで、やはりデフォルトではチェック

HTML Standardの更新でdialog要素に関する変更があったので、自分の理解の整理のためにもまとめてみます。 Scott O'Hara氏によるdialog initial focus, a proposalという提案の一部が反映された変更で、#8199でマージされました。主な変更差分を見るとわりと大きめの追記がされていることがわかります。 提案されていることがすべて採用されていたり、提案で言及されている問題がすべて解決しているわけではなく、議論が続いているものも多いので、今後dialog要素がどういった方向に変更され、進化していくのかを見守る補助的な記事になればいいなと思います。 autofocus属性ほぼ必須 結論から言うと、autofocus属性がほぼ必須となります。そのautofocus属性はdialog要素自体とは限らず、内包している子孫要素に適切な場合もあります。 <d

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol

モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。

Note input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは、オンとオフの 2 つの状態を持つ UI コンポーネントのことです。チェックボックスとよく似ていますが、スイッチは第 3 の状態である未確定の状態持たないという点が異なります。 このスイッチ UI は多くのウェブサイトで利用されているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチ UI を実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。 この問題を解決するために、WHATWG により input[type="checkbox"] 要素に switch 属性を追加することが提案されました。この属性を指定すること

HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui)　似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle

Web Platform Dive into the web platform, at your pace.

HTMLで作ったリストをドラッグアンドドロップ要素にする方法 HTMLのliタグで作ったリストをドラッグアンドドロップ要素にして、自在に並び替えできる方法について解説していきます。 HTML/CSS <body> <style> ul{ list-style: none; padding: 0; } li{ cursor:pointer; border:1px solid; } </style> <ul> <li id="test1" draggable="true">リスト1</li> <li id="test2" draggable="true">リスト2</li> <li id="test3" draggable="true">リスト3</li> </ul> <script src="script/test.js"></script> </body> HTMLにドラッグアンドドロップ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?