今回はこんな疑問を解決していきます！
もちろん、レスポンシブデザインに対応しています。
Bootstrapの機能をもっと知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
こんにちは、ティロといいます
その辺の理系大学生です
bootstrapをcdnで読み込む
bootstrapをcdnで読み込みます。
headタグ内に以下のコードをコピーして貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
ドロップダウンメニューを作る
bootstrapでは特定のクラスをつけるだけでドロップダウンメニューを作ることが出来ます。
header内に以下のように書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-content"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">サンプル</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">サンプル</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">サンプル</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> </div> </li> </ul> </div> </div> </nav> |
こんな感じになりました。幅が狭いのでスマホ用の画面が表示されていますが、code penのhtmlをクリックするとパソコン用が表示されます。
See the Pen
ExyRMjB by hiro web制作とブログ (@hiroweb9)
on CodePen.
各クラスの意味は以下の通りです。
<nav class=”navbar navbar-expand-sm navbar-dark bg-primary”>
| navbar | グローバルナビゲーションの枠を作ります |
| navbar-expand-sm | スマホで表示させるとナビゲーションが縦に並びます |
| navbar-dark | 文字の色が白っぽい感じになります |
| bg-primary | ナビゲーションの背景が青色になります |
スマホで見るとハンバーガーアイコンが表示されます。それを制御しているのが以下の部分です。
1 2 3 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content"> <span class="navbar-toggler-icon"></span> </button> |
| navbar-toggle | ナビゲーションの表示切替用ボタン |
| navbar-toggler-icon | ハンバーガーアイコンの表示 |
ドロップダウンを制御している部分は以下のところです。
1 2 3 4 5 6 7 8 | <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">サンプル</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> </div> </li> |
| dropdown | ドロップダウンメニュー全体 |
| dropdown-menu | ドロップダウンメニューのところ |
| dropdown-item | ドロップダウンメニューの各要素 |
| dropdown-toggle | トグルスイッチ |
これで基本的なドロップダウンメニューが完成しました。
ドロップダウンメニューをカスタマイズする
ドロップダウンメニューにサイト内検索のフォームとサイト名を加えます。
サイト名を加える
1 | <div class="container"> |
1 | <a class="navbar-brand" href="#">サイト名</a> |
サイト内検索のフォームを加える
1 | <div class="collapse navbar-collapse" id="navbar-content"> |
1 2 3 4 | <form class="form-inline"> <input class="form-control mr-1 w-75" placeholder="検索"> <button class="btn btn-outline-light ">検索</button> </form> |
フォームの制御は以下のクラスで行っています。
| form-inline | フォームをインライン(横並び)にします。 |
| form-control | フォームの入力(input)を装飾します。 |
| mr-1 | 右にマージンを4px取ります。(0.25remだけ取ります。1remは16px) |
| w-75 | width75% |
| btn | ボタンの基本的な装飾 |
| btn-outline-light | ボタンのborderと文字が白っぽくなります。 |
結果的に以下のようになりました。
See the Pen
YzWjKZo by hiro web制作とブログ (@hiroweb9)
on CodePen.
背景やボタンの色をカスタマイズする
グローバルナビゲーションの背景の色の変更の仕方
1 | <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> |
クラスのbg-primaryを変更することで実現できます。
| bg-primary | 青 |
| bg-secondary | グレー |
| bg-success | 緑 |
| bg-warning | 黄 |
| bg-info | 水色 |
| bg-light | 薄いグレー |
| bg-dark | 濃いグレー |
| bg-white | 黒 |
| bg-transparent | 透明 |
| bg-danger | オレンジ |
ボタンは
1 | <button class="btn btn-outline-light ">検索</button> |
で使いました。
btn-outline-lightのlightを変更するだけでボタンの色が変わります。
変更の仕方は背景と同じです。
bg-(色)となっているのでbg-(色)の()のところをボタンにも指定すればOKです。
例：
btn-ouline-primary → 青いボタン
いかがでしたでしょうか？Bootstrapを使えばjsやcssを書かなくとも、簡単にデザインが作れてしまいます。
ここまで読んで頂き、ありがとうございました。
実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．