簡単にモーダルが作れる！HTMLのdialogタグの使い方を解説
プログラミングを勉強する過程で、モーダルウィンドウを作りたいと思うことがあるでしょう。
しかし、
「まだHTMLしか勉強していないからモーダルウィンドウを作る自信がない」
「JavaScriptは難しくてよくわからない…」
などと思う方も多いでしょう。
そこで今回は、HTMLのdialogと簡単なJavaScriptでモーダルウィンドウを作る方法を解説します！
今回の記事でわかることは以下の通りです。
- dialogについての基礎知識
- dailogを使ったモーダルウィンドウの作り方
JavaScriptを使わずにモーダルウィンドウを作ることは不可能ですが、今回はほとんど決まり文句みたいなものなので、はじめての方でも取り組みやすい内容です。
実際の作り方をステップごとに解説しますので、ぜひ最後まで見てくださいね。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
dialogとは？
まずはじめに、今回使用するdialogについて理解しておきましょう。
dialogはHTMLの要素の一つで、操作画面でユーザーになんらかの動作を促すために表示されるウインドウのことです。
例えば、画像やボタンをクリックした際に同じWebサイト内で開く小さなウィンドウのこと。
「×」をクリックして小ウィンドウを消したり、ログイン情報を入力するなど、ユーザーも操作できます。
dialogは、必ずJavaScriptとの併用が必要で、以下の2種類があります。
- モードレスダイアログ：表示中でもモーダルウィンドウ以外の操作ができる
- モーダルダイアログ：表示中はモーダルウィンドウ以外の操作ができなくなる
なお、dialogはGoole ChromeとOperaにのみに対応しているため、未対応ブラウザーで表示したい時は注意しなければなりません。
HTMLとJavaScriptで実際にdialogのモーダルを作ってみよう
では、実際にdialogを使用してモーダルウィンドウを作ってみましょう！
今回は、一般的なモーダルダイアログのみ解説します。
制作に入る前に、完成品を確認しておきましょう。
上記は何も操作していない場合の表示画面です。
「モーダルウィンドウを開く」をクリックすると以下のように表示されます。
ボタンをクリックしたらモーダルウィンドウが表示されるというシンプルな作りです。
ユーザーが操作できるように、モーダルウィンドウを消せるボタンも設定します。
以下は、制作の流れです。
- 環境をセットする
- HTMLにdialogタグを書く
- JavaScriptにdialogの指定を書く
- CSSで位置や背景をカスタマイズする
それぞれの手順ごとに解説していきますので、ぜひ一緒にチャレンジしてみてくださいね。
1.環境をセットする
最初にテキストエディタを開き、HTMLとJavaScriptのファイルを用意します。
ボタンではなく、画像をクリックさせたい場合は好きな画像を用意しても構いません。
すべてのファイルが準備できたら、HTMLの枠組みとなるコードとJavaScriptを外部ファイルとして読み込むための記述をしておきましょう。
<html>
<head>
<!-- Webサイトのメタ情報などを記述 -->
</head>
<body>
<script src="modal.js"></script>
</body>
</html>上記では、「modal.js」というJSファイルを読み込んでいます。
JavaScriptの埋め込みに関してもっと詳しく知りたい方は、以下の記事が参考になります。
【初心者向け】Javascriptを使う方法とは？HTMLへの埋め込みと読み込みをわかりやすく解説
2.HTMLにdialogタグを書く
HTMLにdialogを記述し、dialog内にテキストとボタンを設置します。
この時、モーダルウィンドウを閉じるボタンと開くボタンを一緒に設置しておきましょう。
<body>
<dialog>
<!-- モーダルウィンドウ内のテキストの指定 -->
<p>これはモーダルダイアログのウィンドウ画面です</p>
<!-- モーダルウィンドウ内を閉じるボタンの指定 -->
<button id="close">モーダルウィンドウを閉じる</button>
</dialog>
<!-- モーダルウィンドウ内を開くボタンの指定 -->
<button id="open">モーダルウィンドウを開く</button>
</body>HTMLの記述はこれだけです。
しかし、このままでは何も動かないのでJavaScriptで動きをつけていきます。
3.JavaScriptにdialogの指定を書く
HTMLのdialogにJavaScripで動きをつけるには、以下のような記述をします。
// Javascript
let dialog = document.querySelector('dialog'); // dialog（モーダルダイアログ）の宣言
let btn_open = document.getElementById('open'); // open（開く）ボタンの宣言
let btn_close = document.getElementById('close'); // close（閉じる）ボタンの宣言
btn_open.addEventListener('click', function() {
// 開くボタンをクリックした場合の処理
dialog.showModal();
}, false);
btn_close.addEventListener('click', function() {
// 閉じるボタンをクリックした場合の処理
dialog.close();
}, false);まだHTMLしか勉強していない方やJavaScriptが苦手な方にとっては、難しいと感じるかもしれません。
しかし、dialogで使用するJavaScripはほとんど決まり文句のようなものなので、このままコピペしてしまいましょう！
今回は、開くボタンを押してモーダルウィンドウを開く、閉じるボタンを押してモーダルウィンドウを閉じるといった単純な動作のみになっています。
HTMLのdialogを使えば意外と簡単にモーダルが作れる
今回は、HTMLのdialogについて解説しました。
用語についての知識だけでなく、実際にコードを真似して書いてみることで、よりdialogの仕組みや使い方について理解できますよ。
モーダルウィンドウは、画像の表示やログイン画面など、意外と私たちの身近な場面で使用されています。
dialogを使えば簡単にモーダルウィンドウが作れるので、HTMLの勉強やWebサイト制作などに活用してみてくださいね。
