改13.Bootstrapのモーダルを理解して実装する

ログインした時に表示される「ログインに成功しました」というアラート機能や、ポップアップが表示されるモーダル機能を取り入れてページのクオリティをアップさせてみましょう。

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

モーダル

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

こちらもBootstrapで用意されているテンプレートを使用すると簡単に実装出来ます。  今回は、Bootstrapサイト>コンポーネント>モーダルに掲載されている「Live demo」というテンプレートを使います。

では、モーダルの構造を見ていきます。 こちらは、プラグイン（拡張機能を使う為のプログラム）を使用しています。この場合の拡張機能とは、モーダルの事です。ですので、先ほどのアラートよりも複雑な構造になっています。

カスタマイズ含め、モーダルを使う為にはどの部分を編集すればよいのか確認しましょう。

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

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

次に、モーダルボディクラスが出てきます。 これは、モーダル内の本文にあたる部分です。

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

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

モーダルのカスタマイズについて学んでいきましょう。 先ほどのモーダルは、Bootstrapサイトのデモを試すと分かるかと思いますが、モーダルが画面上部に表示されるようになっていました。

これを、画面中央に表示させたい場合は以下のようにカスタマイズします。１つCSSクラスを追加するだけでOKです。

◆LP制作課題⑦

では、LPの制作に入っていきましょう。 カード部分の下に２カラム部分を作成し、その中にモーダルボタンを設置していきます。

まず、２カラム部分を作りましょう。今回は、グリッドシステムを使用して、画像とテキストの２カラムを作ります。

    .img-cover{
      height: 300px;
      width: 100%;
      object-fit: cover;
    }
        /* 
        ここでは画像がカラムからはみ出ないように設定しています。
        縦横のサイズを指定して「object-fit: cover;」と指定することで、
        指定サイズ範囲内に画像が収まるよう調整されます。
        */

続いて、予約フォームをモーダルで作るという想定でモーダルを設置します。 テンプレートの状態から、変更を加えて以下のようなモーダルになればOKです。

◆LP制作課題⑧

今までの復習として、課題⑦で作った２カラムの下に、画像を使った３カラムと「container-fulied」を使ったシングルカラムを作成してみましょう。こちらもグリッドシステムを使用し、画像がはみ出ない為に作ったオリジナルクラス「img-fulied」と「img-cover」のcssを適用させてきます。

3カラム部分を作ろう

図のような画像のみの３カラムを設置します。

シングルカラム部分を作ろう

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

ここまで出来たら、更にオリジナルクラスを加えていきます。

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

◆LP制作課題⑨

最後に、フッターの作成と微調整を行っていきます。

フッターを作ろう

下図のようなフッターを作成します。 こちらもアイコン3つはお好きなもので構いません。

ここまで出来たら、ブラウザで表示を確認しましょう。

入力内容は表示はされていますが、見にくいですね。 Bootstrapで用意されているクラス+オリジナルcss追加で調整していきましょう。

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

    footer li{
      display: inline-block;  
            /* リンクを横並びにします。
                    Bootstrapにも.d-inlineクラスはありますが、liタグ全てに付けるのは大変なのでcssで設定しています。
            */
    }
    footer li>a{ 
      color: #FFF; 
            /* リンク色の設定。
                    Bootstrapにも.text-whiteクラスはありますが、こちらもaタグ全てにクラス追加が大変なのでcssで一括指定しています。
            */
    }
    ul.sub-list{
      font-size: 0.8rem;  /* 文字サイズを少し小さくします。 */
    }

ここまでで一通りは完成です。

ブラウザで冒頭の完成図通りに表示されていればOKです。

スマホ画面向けの微調整

ここまででLPは一通り完成しました。 最後にブラウザの検証ツール（要素を調査など）を使って、作成したLPのスマホ表示の見え方を確認してみてください。

たとえば、３カラムの部分の画像。ここでは、グリッドシステムを使っています。スマホ表示になると、１画像１２カラムとなります。そうすると、画像同士がぴったりとくっついてしまっていると思います。 このような部分を修正していきます。

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