Bootstrapドロップダウン入門！.dropdown・.dropdown-toggle・.dropdown-menuを初心者向けにやさしく解説

1. Bootstrapのドロップダウンとは何か

1. Bootstrapのドロップダウンとは何か

Bootstrapのドロップダウンとは、ボタンやリンクをクリックしたときに、下にメニューが表示される仕組みのことです。スマートフォンやパソコンの画面でよく見かける操作で、操作をシンプルにまとめられるのが特徴です。初心者の方は「押すと選択肢が出てくる箱」だと考えると理解しやすいです。

Bootstrap5では、あらかじめ用意されたクラスを使うだけで、見た目も動きも整ったドロップダウンを作れます。難しい計算や複雑な設定は不要なので、HTMLが少し書ければ大丈夫です。

2. .dropdownの役割を理解しよう

2. .dropdownの役割を理解しよう

.dropdownは、ドロップダウン全体を包むための入れ物です。お弁当箱のようなもので、この中にボタンとメニューを入れます。このクラスがないと、Bootstrapは「これはドロップダウンだ」と判断できません。

まずは一番外側にdivタグを用意して、そこに.dropdownを指定するのが基本の形です。

<div class="dropdown">
    ドロップダウンの中身
</div>

3. .dropdown-toggleでボタンを作る

3. .dropdown-toggleでボタンを作る

.dropdown-toggleは、クリックするためのボタン部分です。このボタンを押すことで、メニューが開いたり閉じたりします。例えるなら、引き出しの取っ手のような存在です。

ボタンタグにこのクラスを付けるだけで、見た目も操作も自動的に整います。また、data属性を指定することで、JavaScriptを書かなくても動作します。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        メニューを開く
    </button>
</div>

4. .dropdown-menuで中身の一覧を作る

4. .dropdown-menuで中身の一覧を作る

.dropdown-menuは、ボタンを押したときに表示されるメニュー部分です。この中に、選択肢となる項目を並べます。紙のメニュー表をイメージすると分かりやすいです。

中にはaタグを使って項目を作り、.dropdown-itemを指定します。これにより、クリックしやすいデザインになります。

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
        選択してください
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">りんご</a></li>
        <li><a class="dropdown-item" href="#">みかん</a></li>
        <li><a class="dropdown-item" href="#">ぶどう</a></li>
    </ul>
</div>

5. よく使う配置と基本ルール

5. よく使う配置と基本ルール

ドロップダウンは、ナビゲーションバーやボタンの近くに配置されることが多いです。基本ルールとして、.dropdownの中に.toggleと.menuを入れる形を守ることが重要です。この順番が崩れると、正しく表示されません。

初心者の方は、まず公式の形をそのまま真似するのがおすすめです。慣れてきたら、色やサイズを変えてみると理解が深まります。

6. Bootstrap5のドロップダウンが初心者向けな理由

6. Bootstrap5のドロップダウンが初心者向けな理由

Bootstrap5のドロップダウンは、クラス名が分かりやすく、決まりもシンプルです。そのため、パソコンを触ったことがない人でも「この箱は全体」「このボタンは押すところ」と段階的に理解できます。

また、多くのWebサイトで使われているため、覚えておくと実践で役立つ場面が多いのも特徴です。検索エンジンでもBootstrap ドロップダウン 入門というキーワードで情報を見つけやすく、学習しやすい分野です。

7. シンプルな別パターンの例

7. シンプルな別パターンの例

最後に、リンクを使ったシンプルなドロップダウン例を見てみましょう。ボタンではなく文字をクリックしてメニューを開く形です。

<div class="dropdown">
    <a class="dropdown-toggle text-decoration-none" href="#" data-bs-toggle="dropdown">
        リンクメニュー
    </a>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">設定</a></li>
        <li><a class="dropdown-item" href="#">プロフィール</a></li>
    </ul>
</div>