HTML

JSなしでdialogタグを制御できるbuttonタグのcommand属性を試してみた

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、buttonタグの新しい属性であるcommand属性を使用して、JSなしでdialogタグを制御する方法をご紹介します。 なお、本稿の内容は2025年6月9日時点のHTML Living Standardと各ブラウザの対応状…

Alpine.jsでdialogタグを制御する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の9日目を担当します。 qiita.com 今回はAlpine.jsでdialogタグを制御する方法をご紹介します。 dialogタグとは Alpine.jsで制御する コ…

Alpine.jsで特定の要素の外側がクリックされたことを検知する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はAlpine.jsで、特定の要素の外側がクリックされたことを検知できる、x-onのModifierの一つである.outsideが便利だったのでシェアしたいと思います。 作りたいもの まずはドロップダウンを作っ…

ボタンにまつわるエトセトラ(HTMLとアクセシビリティ)

こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 202313日目は、私齋藤が担当させていただきます。 今回は『ボタンにまつわるエトセトラ』と称し、UIデザインで最も頻用される要…