BLOG株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。by一緒にラクーンのサービスをつくりませんか?採用情報カジュアル面談2023.3.28デザインJavaScriptdialogタグでセマンティックにモーダルを作成するにはデザイン戦略部塚原です。新しく追加されたdialogタグの特徴に触れつつ弊社のサイトで使われているモーダルをつくってみます。対応ブラウザ執筆時のSafariバージョンが16.xxのため、気になるのはSafariくらいでしょうか。98どこで使うべき?その名前が示す通りダイアログボックスを表示したい時に使います。小さなウィンドウが開き、自由に開閉ができるものや、ユーザーに何らかの操作をさせるためのモーダル等で使えます。今まではdivタグでマークアップしていた方も多いと思いますが、dialogタグを使う事により、ソースを見るだけで意図が理解できるので積極的に使いたいですね。ダイアログボックスとはhttps://wa3.i-3-i.info/word11408.htmldialogタグを使うべきではないところツールチップ、ドロップダウンメニューなど許可されている子要素dl、ul、pタグ等のフローコンテンツに属するHTMLタグ※フローコンテンツのタグはこちらからhttps://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E3%83%95%E3%83%AD%E3%83%BC%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84基本コード下記で閉じた状態のダイアログが作成できます。こちらにダイアログ内容や、イベント処理を追加していきます。type="button">トリガーとなるボタン</button>関連する機能HTMLだけでは開閉式の処理はできないのでdialogタグを操作するために用意されている下記メソッド3点を使って、javaScriptで書いていきます。メソッド・close()・showModal()・show()今までは閉じるボタンをクリックしたらモーダル要素をdisplay:noneにする等、CSSの操作をしていましたが、これらを使えばよりシンプルに実装ができそうです。close()close()は2つの使い方があります。1.dialogタグを閉じる処理addEventListenerを使って、閉じるボタンをクリックしたらcloseが発火するように記載します。これでモーダルが非表示になります。HTMLDialogElement.close()2.値の受け渡し(文字列の引数を設定できる)例として、dialog要素内のセレクトボックスの選択値をモーダル外に渡す事ができます。標準では、閉じるために押したボタンの値を返すようになっています。※buttonに設定したvalue値。その場合は引数設定はなしで、modal.close()と記載するだけでボタンのvalue値を渡す事ができます。show()dialogタグの要素を表示し、open属性が付与されます。文字だけ見ると一見同じ機能を持つように見えるので、2つ併せて説明します。HTMLDialogElement.showModal()HTMLDialogElement.show()showModal()背景を覆うマスクが::backdropで付与され、背景の操作ができなくなります。ページ内にz-indexの高い他要素が存在していたとしても、対象のdialogタグが最上位に表示されます。そのため、一般的なモーダルを作成する場合はこちらのメソッドを使う事が多いでしょう。show()背景を覆うマスクは表示されず、背景の操作ができます。ページ内にz-indexの高い絶対配置の要素が存在している場合それらが優先されます。このときのdialogタグに標準で指定されているCSSには、position:absolutemargin:autoがあるため中央配置にはなりますが、absoluteで高さを持たないので該当のdialogタグより下に書かれている要素が食い込んできます。サンプル(show())弊社サイトの場合、show()は、そこまで主張する必要がない下記のような操作ポップに使えそうだなと考えています。これは設定変更フォームでデータを修正し、変更が完了となったらこのポップが出ます。非表示にするには一度ユーザーが✕ボタンをクリックする必要があります。・openイベントによってdialogタグを表示させる場合はこの属性を記載しておく必要はありません。デフォルトでdialogタグ要素を表示させておきたい場合は、dialogタグにopenと記載する必要があります。非表示になると削除されます(close()が発火)。ブラウザ毎に定義されているCSSで、dialog[open]時にdisplay:blockが設定されています。・dialog要素の高さが指定の高さを超える場合、スクロールが発生する・Escキーで閉じる→Escキーは処理をキャンセルしたい時に、またはダイアログボックスやドロップダウンメニューを閉じる役割をもっています。divタグ等で自作モーダルを作成していた時にはEscの処理を書いていた方も多いと思います。キーボードユーザーのフォローも考慮するとdialogタグはとても便利ですね。実際にdialogタグでモーダルつくってみると...今回はボタンをクリックしたらモーダルが開くという一般的なものを作成してみました。閉じるトリガーは、モーダル内の×ボタンまたは背景マスク部分としています。背景マスク部分をクリックしたときに閉じる必要がなければjavaScriptの記述がもっとシンプルになります。デザインは弊社のサイトで使っているモーダルを再現している為、黒帯見出しがついていますがcssの調整次第で汎用的なモーダルを作成することが出来ます。</script>スクロールについて補足.modal-containerの高さがある場合、dialogタグにはoverflow:autoが標準設定がされているため、見出し部分までスクロールバーがかかってしまいます。そのため、全体がスクロールしないようにCSSで追記をして、コンテンツ内のみスクロールバーがかかるよう修正します。}まとめ今までよりも簡単に、モーダルが持つ機能の実装・またセマンティックにマークアップできるdialogタグが、各ブラウザで使用できるようになりました。プラグインでモーダルを導入しているサイトも多いと思いますので、警告ダイアログなど小さい所からdialogを試してみるのもよさそうですね。ラクーングループは一緒に働く仲間を絶賛大募集中です!フロントからバック、はたまた企画に要件定義など幅広く経験できる環境です。