【Bootstrap4 初心者向け】ドロップダウンメニューの作り方

ドロップダウンメニューの作り方
bootstrapでドロップダウンメニューが作りたいけどどうやるのか分からん

今回はこんな疑問を解決していきます!

もちろん、レスポンシブデザインに対応しています。

 

ティロ

こんにちは、ティロといいます

その辺の理系大学生です

 



bootstrapをcdnで読み込む

bootstrapをcdnで読み込みます。

headタグ内に以下のコードをコピーして貼り付けてください。

 

ドロップダウンメニューを作る

bootstrapでは特定のクラスをつけるだけでドロップダウンメニューを作ることが出来ます。

header内に以下のように書きます。

 

こんな感じになりました。幅が狭いのでスマホ用の画面が表示されていますが、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ナビゲーションの背景が青色になります

 

スマホで見るとハンバーガーアイコンが表示されます。それを制御しているのが以下の部分です。

 

navbar-toggleナビゲーションの表示切替用ボタン
navbar-toggler-iconハンバーガーアイコンの表示

 

ドロップダウンを制御している部分は以下のところです。

 

dropdownドロップダウンメニュー全体
dropdown-menuドロップダウンメニューのところ
dropdown-itemドロップダウンメニューの各要素
dropdown-toggleトグルスイッチ

 

これで基本的なドロップダウンメニューが完成しました。

 

ドロップダウンメニューをカスタマイズする

ドロップダウンメニューにサイト内検索のフォームとサイト名を加えます。

 

サイト名を加える

の下に以下のコードを追加します。
class=”navbar-brand”がサイト名やブランドを表すクラスとなります。

 

サイト内検索のフォームを加える

の下に以下のコードを加えます。
 

フォームの制御は以下のクラスで行っています。

form-inlineフォームをインライン(横並び)にします。
form-controlフォームの入力(input)を装飾します。
mr-1右にマージンを4px取ります。(0.25remだけ取ります。1remは16px)
w-75width75%
btnボタンの基本的な装飾
btn-outline-lightボタンのborderと文字が白っぽくなります。

 

結果的に以下のようになりました。

 

See the Pen
YzWjKZo
by hiro web制作とブログ (@hiroweb9)
on CodePen.


 

背景やボタンの色をカスタマイズする

グローバルナビゲーションの背景の色の変更の仕方

クラスのbg-primaryを変更することで実現できます。

 

bg-primary
bg-secondaryグレー
bg-success
bg-warning
bg-info水色
bg-light薄いグレー
bg-dark濃いグレー
bg-white
bg-transparent透明
bg-dangerオレンジ

 

ボタンは

で使いました。

btn-outline-lightのlightを変更するだけでボタンの色が変わります。

変更の仕方は背景と同じです。

bg-(色)となっているのでbg-(色)の()のところをボタンにも指定すればOKです。

例:

btn-ouline-primary → 青いボタン

 

いかがでしたでしょうか?Bootstrapを使えばjsやcssを書かなくとも、簡単にデザインが作れてしまいます。

ここまで読んで頂き、ありがとうございました。

 

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.