HTML ダイアログタグでモーダルウィンドウを作成する

はじめに

この実験では、HTMLの<dialog>タグを使ってWebページ上にモーダルウィンドウやポップアップを作成する方法を学びます。<dialog>タグを使ってサンプルのダイアログボックスを作成する手順を段階的に案内します。

注: index.htmlでコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080タブを更新してWebページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70742{{"HTML ダイアログボックス/ウィンドウ"}} html/head_elems -.-> lab-70742{{"HTML ダイアログボックス/ウィンドウ"}} html/layout -.-> lab-70742{{"HTML ダイアログボックス/ウィンドウ"}} html/doc_flow -.-> lab-70742{{"HTML ダイアログボックス/ウィンドウ"}} html/forms -.-> lab-70742{{"HTML ダイアログボックス/ウィンドウ"}} html/inter_elems -.-> lab-70742{{"HTML ダイアログボックス/ウィンドウ"}} end

index.html に dialog タグを追加する

<dialog> タグには開始タグと終了タグが必要です。このステップでは、基本的なHTML構造と <dialog> タグを index.html ファイルに追加します。

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog>
      <p>This is a sample dialog box!</p>
    </dialog>
  </body>
</html>

ダイアログを開くためのボタンを追加する

このステップでは、ダイアログボックスを開くためのボタンを作成します。ボタンがクリックされたときにJavaScriptを使ってダイアログボックスを開閉します。

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Adding a button to open the dialog -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Adding a button to close the dialog, which is hidden by default  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

ダイアログにCSSスタイリングを追加する

このステップでは、ダイアログボックスにいくつかのCSSスタイリングを追加して、もっと見栄えが良くなるようにします。

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>

    <!-- Adding styles for the dialog box -->
    <style>
      dialog {
        width: 300px;
        height: 150px;
        background-color: #f2f2f2;
        padding: 20px;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #000;
        font-family: Arial, san-serif;
        font-size: 18px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Adding a button to open the dialog -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Adding a button to close the dialog, which is hidden by default  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

これで、HTMLダイアログタグを使ってモーダルウィンドウを作成するためのHTMLコードは完成です。

まとめ

HTMLの<dialog>タグを使ってモーダルウィンドウを作成する実験を正常に完了しました。この実験では、HTMLの<dialog>タグを使ってサンプルのダイアログボックスを作成する手順について段階的に説明しました。JavaScriptを使ってダイアログボックスを開閉するための簡単なボタンを追加しました。また、ダイアログボックスの外観を改善するためにいくつかの基本的なCSSスタイリングも追加しました。