HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

Bootstrapフレームワークでモーダルを作成する方法を徹底解説

モーダルとは、Webページのメインウィンドウとは別に表示されるウィンドウのことです。主な目的は、メインウィンドウへのユーザー操作を一時的に無効化し、ユーザーに情報を伝えたり確認を求めたりすることです。モーダルウィンドウは、ログインフォームやユーザー入力の確認など、さまざまな場面で広く活用されています。

Bootstrapは、コンポーネントを素早く構築できるフレームワークです。この記事では、Bootstrapのセットアップ方法、モーダルが必要になる理由、そしてBootstrapを使ったモーダルの実装例をわかりやすく紹介します。

準備：必要な依存関係を整える

Webページでモーダルを正しく表示するには、必要な依存関係を事前に用意しておきましょう。このプロジェクトでは、Bootstrap、Popper.js、jQueryの3つが必要です。Bootstrapのクイックスタートページを参照すれば、導入方法を詳しく確認できます。

パッケージの読み込み方法は自由ですが、初心者にとって最も簡単なのは、jQuery、Popper.js、BootstrapそれぞれのCDN（コンテンツデリバリーネットワーク）を利用する方法です。<script>タグの記述順序には注意してください。読み込みの順番が重要になります。

モーダルを使うべき場面

モーダルは、ユーザーの注意を時折引きたいWebアプリケーションに最適です。

たとえば、銀行のサイトにログインした後、別のタブへ移動してから元のサイトに戻ると、「操作がないためログアウトされます」といったモーダルが表示されることがあります。非アクティブ状態の検知は、モーダルが必要になる典型例です。銀行のシステムでは、ユーザーが「ログインを継続する」か「ログアウトする」かを選択するまで、サイト上でそれ以上の操作ができないようになっています。

開発者の視点で見ると、モーダルには、必ずしも必要でない場面でページ全体を再読み込みせずに済むというメリットがあります。多くのECサイトでは「クイックビュー」として活用されており、ユーザーはサイトを素早く回遊できるだけでなく、買い物も短時間で完了できます。クイックビューなら、商品情報を取得するためにページ全体を再読み込みする必要はありません。

ただし、モーダルを操作しながらメイン画面のコンテンツにもアクセスする必要がある場合は、別のUI要素を使うべきです。モーダルの目的は、メインウィンドウとのやり取りを遮断し、モーダル側に操作を集中させることだからです。

Bootstrapでモーダルを作成する

モーダルは従来、HTML、CSS、JavaScriptで構築されてきました。これらすべてがモーダル作成に重要ですが、動作させるうえでJavaScriptは不可欠です。JavaScriptは、モーダルの表示・非表示を切り替えるスイッチの役割を担います。

Bootstrapを使う際は、公式ドキュメントを手元に置いておくと、モーダルのコードを正確にコピペできます。Bootstrapの使い方やコンポーネントの仕組みを学んでいる段階では、コードをコピー＆ペーストした後、各行が何をしているのかコメントで書き留めておくことをおすすめします。

Bootstrapのモーダルコードを利用すれば車輪の再発明を避けられますが、だからこそ仕組みを理解し、他の人に説明できるようにしておくことが大切です。なぜ動くのかを説明できないコードをコピペしても、実務では意味がありません。

ボタンでモーダルを起動する

<button
    type="button"
    class="btn btn-primary"
    data-toggle="modal"
    data-target="#exampleModal"
>Launch demo modal
</button>

このコードは、Bootstrapの公式ドキュメントにあるモーダル作成例からそのまま引用したものです。以降では、このマークアップが何を意味するのかを詳しく見ていきます。このセクションでは主に属性について解説します。

    class="btn btn-primary"

classがCSSとどう関係するかはご存じのとおりです。ここでも同じで、記述されたクラスは、HTMLドキュメントのhead内で読み込んだBootstrapスタイルシートに対応しています。

「btn」クラスがボタンのスタイルの大部分を制御し、色は2つ目のクラス名で決まります。「btn-primary」を別のボタンカラー（例：btn-secondaryやbtn-danger）に変更して、表示がどう変わるか試してみてください。

    data-toggle="modal"

この属性は、モーダル内の閉じるボタンに含まれるdata-dismiss属性と対応しています。

    data-target="#exampleModal"

data-target属性は、idが「exampleModal」のコードブロックをターゲットにします。exampleModalが実際のモーダルの内容であり、この属性によって指定されたブロックから情報を取得します。

これは、同じページに複数のモーダルを配置する場合に特に重要です。data-target属性とidを適切に変更すれば、一度に開くモーダルを1つだけに制御できます。

イベントハンドラーはすべて、jQueryとPopper.jsを使ってBootstrapが管理します。ユーザーがクリックしたときの処理を自分で書く必要はありません。動作を維持するために、元のクラス名は変更しないでください。CSSで要素を選択する際にそのクラス名が使われているからです。

モーダルのメイン要素

<div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
>
   ...  Modal stuff here ...
</div>

先ほどと同様に、このコードもBootstrapの公式ドキュメントから直接引用したものです。ここでは、マークアップの意味を一つずつ確実に理解していきましょう。

    class="modal fade"

モーダルのメイン要素は、メインページ上のボタンによって起動されます。ここでのクラス名は、モーダルに対する2つの異なるセレクターを示しています。1つ目はモーダル自体のスタイル、2つ目はフェードイン・フェードアウトのトランジション効果を適用することを意味します。

    id="exampleModal"

id属性はすでに登場しました。スタイルを変更するために要素を指定する方法です。この場合、メインページの起動ボタンのターゲットにもなっており、「data-target」属性の値と一致しています。

    tabindex="-1"

tabindexは通常、その要素がキーボードでフォーカス可能であることを示しますが、負の数の場合はそうなりません。この要素はJavaScriptやクリックイベントによってフォーカスされます。

 aria-labelledby="exampleModalLabel"
 aria-hidden="true"

aria属性はその名のとおりアクセシビリティに関連します。labelledby属性は通常、modal-titleのidと関連付けられます。hidden属性がtrueの場合、その要素がスクリーンリーダーに読み上げられないことを示します。

Bootstrapスターターで独自のモーダル要素を作る

スタイルを変更すれば、Bootstrapのモーダルに独自のアレンジを加えられます。CSSのカスケード（優先順位の仕組み）は依然として有効なので、CSSを上書きするには、新しいクラスを作成してスペース区切りでクラス名に追加するか、!importantキーワードで既存クラスを上書きします。後者は極端な場合にのみ使うべきで、通常はカスタムクラス名による変更が推奨されます。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
   <!--<![endif]-->
   <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <title>Bootstrap Modal</title>
       <meta name="description" content="" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <!-- Link to Bootstrap Stylesheet -->
       <link
           rel="stylesheet"
           href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
       />
       <style>
           body {
               max-width: 1400px;
               width: 100%;
               padding: 20px;
               margin: 20px;
           }
           .btn-ck {
               background-color: goldenrod;
               border: 1px solid black;
               color: black;
           }
           .btn-ck:hover {
               background-color: rgb(231, 203, 131);
               border: 1px solid lightgray;
           }
           .custom-modal {
               background: rgb(250, 249, 243);
               height: 400px;
               width: 500px;
               position: fixed;
               top: center;
               left: center;
           }
       </style>
   </head>
   <body>
       <!-- Button triggers modal -->
       <h1>Modal Example</h1>
       <button
           type="button"
           class="btn btn-primary btn-ck"
           data-toggle="modal"
           data-target="#exampleModal"
       >
           Launch demo modal
       </button>
       <!-- Modal -->
       <div
           class="modal fade"
           id="exampleModal"
           tabindex="-1"
           aria-labelledby="exampleModalLabel"
           aria-hidden="true"
       >
           <div class="modal-dialog">
               <div class="modal-content custom-modal">
                   <div class="modal-header">
                       <h5 class="modal-title" id="exampleModalLabel">
                           CareerKarma Demo Modal
                       </h5>
                       <button
                           type="button"
                           class="close"
                           data-dismiss="modal"
                           aria-label="Close"
                       >
                           <span aria-hidden="true">&times;</span>
                       </button>
                   </div>
                   <div class="modal-body">
                       You are reading a modal with a bit of custom styling...
                   </div>
                   <div class="modal-footer">
                       <button
                           type="button"
                           class="btn btn-secondary"
                           data-dismiss="modal"
                       >
                           Close
                       </button>
                       <button type="button" class="btn btn-primary btn-ck">
                           Save changes
                       </button>
                   </div>
               </div>
           </div>
       </div>
       <!-- The following CDN's go right before the closing body tag. -->
       <!-- jquery CDN first -->
       <script
           src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
           async
           defer
       ></script>
       <!-- popper.js CDN second -->
       <script
           src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"
           async
           defer
       ></script>
       <!-- bootstrap CDN third -->
       <script
           src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"
           async
           defer
       ></script>
   </body>
</html>

上記のサンプルコードでは、CSSを使ってボタンのスタイルとモーダルの背景を変更しています。この例では、!importantキーワードでBootstrapが提供するCSSを無理に上書きするのではなく、カスタムクラス名を追加する方法を採用しています。

まとめ

Bootstrapでモーダルを作成する際の最大のハードルは、ドキュメントを正しく読むことです。エラーが発生する場合、その多くはコピペミス、CDNやスタイルシートをHTMLのhead/bodyに配置する位置の間違い、あるいはCSSが正しい要素をターゲットにしていないことが原因です。

カスタムスタイリングにはある程度の試行錯誤がつきものです。ありがたいことに、Bootstrapのドキュメントは非常に充実しています。他のフレームワークやパッケージを学ぶ前にBootstrapに触れるのであれば、ドキュメントが丁寧で比較的わかりやすいという点で、恵まれた環境だと言えるでしょう。

  1. TkinterのOptionMenuウィジェットで関数を呼び出す方法を解説

    TkinterのOptionMenuウィジェットを使って関数を呼び出す方法を、実際の例を通して見ていきましょう。この例では、StringVarオブジェクトを使用し、そのget()メソッドを呼び出します。TkinterにおけるStringVarオブジェクトは、ウィジェットの値を管理するのに役立ちます。ここでは、文字列のリストを持つOptionMenuウィジェットを作成します。ユーザーが選択肢を選ぶと、関数が呼び出され、選択された項目がラベルとして表示される仕組みです。実装手順tkinterライブラリをインポートし、tkinterフレームのインスタンスを作成します。geometryメソッドを使用し

  2. Pythonとtkinterでストップウォッチを作成する方法【サンプルコード付き】

    ストップウォッチは、ある出来事から次の出来事までの時間間隔を測定するための道具で、一般的に数秒〜数分程度の計測に使用されます。スポーツのタイム計測をはじめ、産業現場で熱流量や電流の変化を測るなど、幅広い場面で活用されています。 Pythonでは標準ライブラリのtkinterを使えば、GUIを備えたストップウォッチを簡単に自作できます。本記事で紹介するのは、スタート（Start）・ストップ（Stop）・リセット（Reset）の3つの操作ボタンを備えたウィンドウアプリケーションです。 ポイントは「after()」メソッド このプログラムの核となるのが、tkinterのウィジェットが持つafter