Bootstrapのモーダルを理解して実装する【図解たっぷりBootstrap入門】

• モーダル
• モーダルのカスタマイズ

◎モーダル

モーダルとは、閉じるまで他の操作が出来なくなる小窓の様なものです。他の操作とは、モーダル外のリンクのクリックなどです。モーダルは、ポップアップとも呼ばれています。広告などでも使われていますね。

 

今回は、Bootstrapサイトコンポーネントのモーダルの部分の「Live demo」というテンプレートを使います。

 

では、モーダルの構造を見ていきます。こちらは、プラグイン（拡張機能を使う為のプログラム）を使用しています。この場合の拡張機能とは、モーダルの事です。ですので、先ほどのアラートよりも複雑な構造になっています。カスタマイズ含め、モーダルを使う為にはどの部分を編集すればよいのか確認しましょう。

 

Bootstrpでのモーダルは、ボタンがクリックされるとモーダルが表示される仕組みになっています。ですので、最初にボタンタグが出てきます。ボタンタグ内にボタンに表示させる文言を書きます。

次の部分は、モーダルを作る為に必要なものですので、変更を加えることは不要です。詳しい構造は以下イメージをご確認ください。

 

次は、編集を行っていく部分です。まずモーダルヘッダーのdiv内にｈ５タグがあります。このタグにはモーダルタイトルというクラスが与えられています。これは、モーダル内の見出しを作っている部分です。

 

次に、モーダルボディクラスが出てきます。これは、モーダル内の本文にあたる部分です。最後に、モーダルフッターというクラスが出てきます。これは、モーダル内下部の部分です。この中には、ボタンが２つ設置されています。一つは、モーダルを閉じる為のボタンです。もう一つは、モーダルの内容によりますが、送信フォームの様なものであれば保存ボタンとして使用するという感じです。

 

◎モーダルのカスタマイズ

モーダルのカスタマイズについて学んでいきましょう。先ほどのモーダルは、Bootstrapサイトのデモを試すと分かるかと思いますが、モーダルが画面上部に表示されるようになっていました。これを、画面中央に表示させたい場合は以下のようにカスタマイズします。１つCSSクラスを追加するだけでOKです。

 

◎LP制作⑤

では、LPの制作に入っていきましょう。この項目では、今回学んだアラートとモーダルを追加していきます。まず、navの下にアラートが表示されるように作っていきます。今回の章の１番最初のイメージ画像のコードを参考に作ってみてください。アラートリンクも使っていきます。

 

そして、ナビゲーションバーにログインボタンを追加します。以下コードを参考に作ってみてください。上記イメージのように、ボタンが追加されていればOKです。

 

<button class="btn btn-success my-2 my-sm-0 ml-2" type="submit">ログイン</button>

次に、２カラム部分を作成し、その中にモーダルボタンを設置していきます。まず、２カラム部分を作りましょう。今回は、グリッドシステムを使用して、画像とテキストの２カラムを作ります。

 

続いて、モーダルの設置に入っていきます。予約フォームをモーダルで作るという想定で行っていきます。これまでに学んだ、見出しのカスタマイズや、余白の指定も使われています。

 

モーダル内を作っていきましょう。テンプレートの状態から、変更を加え以下のようなモーダルになればOKです。テキストを変更し、ボタンの色なども変えていますね。

 

◎LP制作⑥

続いては、今までの復習の内容です。画像を使った３カラムと「container-fulied」を使ったシングルカラムを作成していきます。では、３カラム部分から作っていきましょう。こちらでも、グリッドシステムを使用します。また、画像がはみ出ない為に作ったオリジナルクラスを使いまわしています。

 

次は、シングルカラム部分です。LPですので、「予約」という成果を得る為、画面下部にはもう１度予約フォームを入れておきます。最初の、カルーセルでも使った画像を使用します。また、文字やボタンを画像の上にのせます。見やすいように画像を透過させることも重要です。

 

 

 

ここまでで、余白の為のクラスなど、Bootstrapのユーティリティの項目のクラスが頻繁に出てくることに気付いたでしょうか。これらは、頻繁に使用するかと思いますので、しっかり復習しておきましょう。

◎LP制作⑦

最後に、フッターの作成と微調整を行っていきます。設置するコンテンツによっては、スマホ表示で崩れてしまうなどの問題が起こる場合があるので、見え方を確認しながら進めて行きます。ではまず、フッターを作成します。こちらでは、アイコンも使用していきます。

 

 

 

リストを作ると自動でpaddingが入ってしまうなど、気づきづらい部分も多いかと思いますので、細かくコードと見え方を確認することが重要です。

では、ここまでで一通り完成しました。スマホ表示の見え方を確認してみてください。たとえば、３カラムの部分の画像に注目してください。ここでは、グリッドシステムを使っています。スマホ表示になると、１画像１２カラムとなります。そうすると、画像同士がぴったりとくっついてしまっていると思います。

このような部分を修正していきます。また、フッター上のシングルカラム部分では、テキストがフッターの方まではみ出してしまっているかと思います。こちらも修正していきましょう。

これで、シンプルですが簡単なLPが出来ました。Bootstrapを使わずに作るよりも、とても簡単に出来る事が分かっていただけたかと思います。とても早く制作する事が出来ますよね。この例では、基本的な部分のみ扱いましたが、テンプレートのコードやBootstrap内でのルールを知ることが、カスタマイズを行う為に必要であることも分かったかと思います。Bootstrapを使いこなして、オリジナリティのある美しいサイトを制作していきましょう。

◎まとめ

・アラートは、警告や処理の結果をユーザに通知する為のもの

・モーダルは、閉じなければ他の操作は行えない