ナビゲーション・フォーム・カルーセル

Bootstrapを使えば、ナビゲーションバーやドロップダウンリストなども簡単に組み込むことができます。

• ナビゲーションバー
• brand
• メニュー
• dropdown
• ナビゲーションバーの配色
• 背景色変更
• ナビゲーションの表示位置
• form
• フォームのカスタマイズ
• Carousel
• キャプション付き
• Bootstrapでランディングページを作ろう！
• まとめ

◎ナビゲーションバー

前回、Bootstrapのナビゲーションバーを初めて使ってみました。しかし、テンプレートをコピペしただけでしたね。今回は、ナビゲーションバーの具体的な使い方について学んでいきましょう。では、前回使用したテンプレートのコードの解説から行っていきます。

・brand

まず、上記コードを見てみましょう。この「navbar-brand」というクラスは、ロゴやサイト名などの部分を書くときに使用します。文字のみでサイト名を入れるのであれば、「Navbar」というテキスト部分を書き換えればOKです。画像を使いたい場合は、「Navbar」というテキスト部分に「img」タグを書きます。

画像＋テキストの場合は「img」クラスに以下CSSクラスを設定し「img」タグの後にテキストを書きます。

・メニュー

ナビゲーションバーに設置したいメニューは、以下部分に入れていくことになります。以下コードが、メニュー１つ分のコードです。基本的には、メニューの数だけ以下部分を増やしたり減らしたりします。「＃」の部分には遷移先URLを入れ、テキスト部分にメニュー名を入れます。

・dropdown

次に、ドロップダウン部分を見ていきます。まずドロップダウンを使いたい場合は、

 タグの「nav-item」クラスと合わせて「dropdown」クラスも記述します（以下ハイライト部分）。

<li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
     </a>
     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
     </div>
</li>

そして、ドロップダウンメニューを作る時に知っておかなければいけない部分を見ていきましょう。まず、常に表示される部分のメニュー名です。以下リンクタグ内に記述します。このリンクタグの、遷移先URLはそのままにしておいてください。ドロップダウンが開かなくなります。

次に、ドロップダウン内メニューの部分です。仕切りの部分は、必要なければ削除してください。また、こちらもメニュー数に応じて「dropdown-item」クラスのリンクタグを増やしたり減らしたりしてください。

◎ナビゲーションバーの配色

ナビゲーションバーのテンプレートの１行目を見てください。このコードのCSSクラスで「navbar-light」もしくは「navbar-dark」という部分があります。これは、ナビゲーションバーテンプレートの種類を指定している部分です。ナビゲーションバーテンプレートには２種類あり、ナビゲーションバーの背景色の明度によって使い分ける必要があります。これは、メニューなどのテキストカラーなどが背景色によっては見えにくくなるなどの影響がある為です。

この背景色ですが、Bootstrapで用意されている他の配色や、任意の配色に変更する事が出来ます。ですので、背景色に合ったナビゲーションバーテンプレートを使用しましょう。

・背景色変更

まず、Bootstrapで用意されている配色を見ていきます。以下カラーは一部で、Bootstrap公式サイトの「Utilities」という項目内「Colors」に全色一覧があります。

このように、Bootstrapで用意された配色を使う場合はテンプレートのコードの一部を変更するだけでOKです。では、任意の色に変えたい場合についてです。この場合は、テンプレートにコードを追加する必要があります。以下イメージを見てみてください。コードを追加する事で、どんな色に変更する事も出来るようになります。

◎ナビゲーションの表示位置

ナビゲーションは、以下イメージ上のように何も指定しなければサイト内最上部に固定されます。つまり、スクロールしてサイトの下の方に行くとナビゲーションは見えなくなるという事です。

画面の最上部に固定したい場合は「fixed-top」というCSSクラスを使用します。このクラスを使用すると、スクロールしていっても常に画面上部にナビゲーションが表示されるようになります。

◎form

前章で使用した、ナビゲーションテンプレートにも入っていたフォームの部分です。フォームは、ナビゲーション以外の部分でも使用できます。では、フォームについて詳しく見ていきましょう。以下は、基本的なフォームの構造です。

全体を「form」タグで囲い、１つ１つのフォームは「form-group」というCSSクラスを使い囲います。「label」タグでは入力フォームの概要を記述し、「input」タグで入力欄を作ります。入力欄には「form-control」というCSSクラスを指定します。このクラスには、入力フォームのデザインなどがテンプレートとして用意されています。

そして最後に「button」タグで送信ボタンを作成します。CSSクラス部分では、ボタンのデザインを指定する事が出来ます。カラーを変えたい場合は、「primary」という部分を他のカラー名に変えます。カラー一覧はBootstrap公式サイトの「Utilities」という項目内「Colors」に一覧があります。

◎フォームのカスタマイズ

フォームに関しても、様々なカスタマイズが可能です。まず、入力フォームのサイズを変えてみましょう。以下コードの、CSSクラス部分に追記します。

「form-control」のみだと、標準サイズになります。「form-control-sm」を追加すると高さが小さくなり、「form-control-lg」を追加すると高さが大きくなります。

・レイアウト

最初に紹介した基本的なフォームは、全ての要素が縦並びになっていました。では、横並びに要素をレイアウトする方法を見てみましょう。まず、「form」タグ下に「form-row」というCSSクラスを指定したdivを追加します。これは、グリッドシステムです。「form-row」で入力フォームやボタンまで囲っているので、これらの要素は横並びになります。そして、１つ１つの要素をカラムで囲います。

次に、「placeholder」という属性を適用した「input」タグです。この属性を適用し、値の部分にテキストを入れると、そのテキストが入力フォーム内に表示されます。

◎Carousel

様々なサイトのヒーローエリアで、画像がスライドショーで表示されるのを見た事があるかと思います。Bootstrapでは、カルーセルという名前でテンプレートが用意されています。いくつか種類がありますが、今回は「With indicators」というテンプレートを使って説明します。

では、使い方を見ていきましょう。まずは、テンプレートの構造を見てみます。まず「li data-target」という属性の部分ですが、これは上記イメージ下部の長方形が３つ並んでる部分にあたります。そして「active」というCSSクラスが適用されている箇所ですが、ここは１枚目に表示される画像部分になります。この部分のコードがないと、他のコードに問題がなくてもカルーセルが表示されませんので注意してください。

画像を追加したい場合は、以下コード部分をコピぺしてください。また、上記「li data-target」の部分のコードもコピぺする必要があります。そして「data-slide-to="２"」の数字の部分に「総画像枚数ー１」の数字を入れます。これは、カウントが０から始まっている為です。

・キャプション付き

スライドする画像の上にテキストを乗せる方法です。imgタグの下にキャプションの為のコードを記述します。「carousel-caption」というCSSクラスでキャプション作成を行います。そして隣に記述されている「d-none」と「d-md-block」ですが、共通している「d」とは「display」を意味しています。ですので、画面サイズが「Medium」以上の時は「display: block;」。「Medium」以下の時は「display: none;」で非表示という指定です。

◎Bootstrapでランディングページを作ろう！

この章からBootstrapを使って、ランディングページを制作していきましょう。今回は、ヒーローエリアまでを制作します。では、まずナビゲーションバーを設置します。以下イメージのように制作してください。

次は、カルーセルです。「With indicators」というテンプレートで制作しましょう。ここで１つ注意点があります。カルーセルは、画像の横幅を全て100%に揃えてくれますね。しかし、高さは揃えてくれないので、画像の高さがバラバラになってしまう可能性があります。これでは、統一感がなくなってしまいますね。ですので、カルーセルに入れる画像は高さのみ揃えて制作し使うようにしてください。

今回は、ここまでの制作になります。ここまでの完成イメージは以下のような感じです。

◎まとめ

・どのコンポーネント（ナビゲーションなどのパーツ）もカスタマイズできる

・カスタマイズするためには、テンプレートの中身（コード）を理解する必要がある

・変えてはいけないコードを削除したり、変更したりするとコンポーネントが正しく動かなくなる