HTML

💬 dialogタグが表示されない

showModal()を呼んでいない

😰 こんな症状

<dialog>タグを書いたのにモーダルが表示されない。dialog要素を初めて使うときに起きやすいよ。

🔍 原因

dialog要素はHTMLに書いただけではデフォルトで非表示（display: none相当）だよ。表示するにはJavaScriptでshowModal()メソッドまたはshow()メソッドを呼ぶ必要があるんだ。open属性を直接付けることもできるけど、モーダルとしての機能（背景のオーバーレイ等）は得られないよ。

❌ エラーが起きるコード

<dialog><p>内容</p></dialog>
<!-- showModal() 未呼出 -->

✅ 直し方

1. JavaScriptでdocument.querySelector("dialog").showModal()を呼んで表示する。 2. 閉じるにはdialog.close()メソッドを使う。 3. showModal()はモーダル（背景操作不可）、show()は非モーダル（背景操作可能）として表示する。 4. ::backdrop疑似要素でオーバーレイのスタイルをカスタマイズできるよ。

✅ 修正後のコード

<dialog id="d"><p>内容</p></dialog>
<script>d.showModal()</script>

この解決法は役立ちましたか？

🔗 関連するエラー

画像が表示されない — 画像パスが間違っている
拡張子が表示されない（.html が見えない） — OS の設定で拡張子が非表示
faviconが表示されない — faviconのパスまたは形式が間違っている
iframeが表示されない — 埋め込み先がiframeを拒否している
videoタグで動画が再生されない — ファイルパスまたはフォーマットの問題

🔗 別カテゴリの関連エラー

📖 この問題を学べるレッスン

HTMLコースで基礎から学ぶ →

📝 関連ブログ記事

プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説

📖 関連する用語

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

HTMLコースを始める →