DesignJavaScriptCSSWordPressSEOお問合せ恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。恵比寿のデザイン制作チームのブログです。5.2から登場したダイアログボックスの使い方について説明します。ダイアログタグを使うことでモーダルウィンドウを簡単に作成することができます。普段はdisplay:noneの状態ですが、dialogタグにopen属性をつけることでダイアログボックスが可視化します。ダイアログボックスの位置はデフォルトで上下中央の最前面に来るようになっています。こちらがデフォルトのデモになります。DEMOこれにcssやjsでアニメーションや装飾を加えてあげると立派なモーダルウィンドウが完成します。それでは今度はカスタマイズしたダイアログボックスを見てみましょう。DEMOこんな感じですね。あるモーダルウィンドウが出来ていると思います。コードを見ていきましょう。<p>先週赤岳に行ってきました。type="button">閉じる</p></dialog>画像をクリックすると、モーダルが出てくるような構造を作っていきます。100%;}色々と設定をしていきます。dialog::backdropと指定すると、ダイアログボックスが可視化した時の外側の背景を設定できます。dialogタグにopen属性がついたときにCSSアニメーションをつけてあげます。});}());dialogタグに関するJavaScriptのソースはほとんど決まり文句のようなものです。モーダルウィンドウ開閉用のボタンと、ダイアログタグを変数に入れて取得します。次に、ダイアログボックスにopen属性を加えるクリックイベントを付与します。showModal()としてあげると、ダイアログボックスにopen属性を付与してくれます。逆に、close()としてあげると、open属性を外します。DEMOダイアログボックスが可視化したときに、周りの背景を押しても閉じるようにしたい場合は、ダイアログボックス自体にクリックイベントを施してあげます。クリックした要素がダイアログであれば、open属性を外してあげるようになっています。従って、ダイアログボックスの中身の要素をクリックしてもイベントは発火しません。ダイアログ自体にpaddingなどを加えている場合は、ダイアログボックスの中身のpadding部分でイベントが発火してしまうので注意が必要です。まとめダイアログボックスはChromeやFirefoxなどのモダンブラウザでしか動作しませんが、dialog-polyfillを読み込んであげると、IEやSafariでも機能してくれます。headerタグやfooterタグも入れることができるので、様々なレイアウトのページをここで作ることができます。非常に便利な機能ですので、覚えておきましょう。【CSS】maskプロパティで画像を切り抜く方法(マスク処理)【Photoshop入門】1分で作成できるアナグリフ画像この記事を書いた人TOMWebデザイナー。英語がちょっと話せます。Indesignを扱います。