日本語

Bootstrap チュートリアル

Bootstrap レイアウト

Bootstrap コンテンツ

Bootstrap コンポーネント

Bootstrap フォーム

Bootstrapのヘルパー

Bootstrap ユーティリティ

Bootstrap デモ

Bootstrap - ドロップダウン：初めてのガイド

こんにちは、未来のウェブ開発者さんたち！今日は、Bootstrapのドロップダウンに関する素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのが楽しみです。コードを書いたことがない方も心配しないでください - 最初から始めて、段階的に進めていきます。で、コーヒー（またはお好みでティー）を一杯取り、始めましょう！

Bootstrap - Dropdowns

ドロップダウンとは？

コードに飛び込む前に、まずドロップダウンとは何かを話しましょう。レストランで、ウェイターがメニューを手渡すシーンを思い浮かべてください。そのメニューはドロップダウンと同じです。選択肢のリストを提供してくれます。ウェブデザインでは、ドロップダウンも同様に働きます。複数の選択肢をユーザーに提示するのに、ウェブページを乱雑にしないで済む便利な方法です。

基本的なドロップダウン

まず最基本的なドロップダウンから始めましょう。Bootstrapでの見た目は以下の通りです：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンボタン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>

これを分解してみましょう：

  1. <div>タグでdropdownクラスを持つコンテナから始めます。
  2. 中には、ドロップダウンをトリガーするための<button>があります。dropdown-toggleクラスとdata-bs-toggle="dropdown"属性に注意してください。
  3. dropdown-menuクラスを持つ<ul>が実際のドロップダウンコンテンツです。
  4. <ul>の中の各<li>は、ドロップダウンメニューのアイテムです。

ボタンとリンクのドロップダウン

ドロップダウンはボタンまたはリンクのどちらでも作成できます。違いを見てみましょう：

ボタン型ドロップダウン

基本的な例で既に見た通りです。<button>要素を使用します：

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンボタン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

リンク型ドロップダウン

リンクベースのドロップダウンでは、<a>タグを使用します：

<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
ドロップダウンリンク
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<!-- メニューアイテム -->
</ul>
</div>

主な違いはHTML要素（<button>対<a>）を使用していることですが、機能的には似ています。

ボタン変種

Bootstrapはドロップダウンの色の変種を提供しています。btn-secondaryクラスを以下のいずれかに変更できます：

  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-light
  • btn-dark

例えば：

<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
危険なドロップダウン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

スプリットボタン

スプリットボタンドロップダウンは、ボタンアクションとドロップダウントリガーを分離します：

<div class="btn-group">
<button type="button" class="btn btn-primary">アクション</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">ドロップダウンを切替</span>
</button>
<ul class="dropdown-menu">
<!-- メニューアイテム -->
</ul>
</div>

ここでは、左側のボタンをクリックするとアクションが実行され、右側のボタンをクリックするとドロップダウンが開きます。

サイズ

大きなまたは小さなドロップダウンを作成するために、btn-lgまたはbtn-smクラスを追加できます：

大きなドロップダウンボタン

<div class="dropdown">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" id="dropdownMenuButtonLarge" data-bs-toggle="dropdown" aria-expanded="false">
大きなドロップダウン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLarge">
<!-- メニューアイテム -->
</ul>
</div>

小さなドロップダウンボタン

<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButtonSmall" data-bs-toggle="dropdown" aria-expanded="false">
小さなドロップダウン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSmall">
<!-- メニューアイテム -->
</ul>
</div>

ダークドロップダウン

洗練されたダークテーマのドロップダウンを作成するには、dropdown-menu-darkクラスをdropdown-menuに追加します：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ダークドロップダウン
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

方向

Bootstrapでは、ドロップダウンの方向を変更することができます。以下のオプションを見てみましょう：

中央寄せのドロップダウン

ドロップダウンメニューを中央に寄せるには、dropdown-centerクラスをコンテナに追加します：

<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
中央寄せのドロップダウン
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenteredButton">
<!-- メニューアイテム -->
</ul>
</div>

ドロップアップ

上に開くドロップダウンには、dropupクラスを使用します：

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップアップ
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

中央寄せのドロップアップ

dropupとdropdown-centerを組み合わせて中央寄せのドロップアップを作成します：

<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenteredButton" data-bs-toggle="dropdown" aria-expanded="false">
中央寄せのドロップアップ
</button>
<ul class="dropdown-menu" aria-labelledby="dropupCenteredButton">
<!-- メニューアイテム -->
</ul>
</div>

ドロップエンド

右に開くドロップダウンには、dropendクラスを使用します：

<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップエンド
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

ドロップスタート

左に開くドロップダウンには、dropstartクラスを使用します：

<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
ドロップスタート
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

メニューアイテム

では、ドロップダウンメニューに何を入れるか話しましょう。いくつかのオプションがあります：

ヘッダー

メニューアイテムをグループ化するためにヘッダーを追加します：

<ul class="dropdown-menu">
<li><h6 class="dropdown-header">ドロップダウンヘッダー</h6></li>
<li><a class="dropdown-item" href="#">アクション</a></li>
<li><a class="dropdown-item" href="#">別のアクション</a></li>
</ul>

ディビジョン

関連するメニューアイテムを区切るためにディビジョンを使用します：

<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">アクション</a></li>
<li><a class="dropdown-item" href="#">別のアクション</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">ここに他のもの</a></li>
</ul>

テキスト

非インタラクティブなテキストも含めることができます：

<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>
<li><span class="dropdown-item-text">ドロップダウンアイテムテキスト</span></li>
</ul>

フォーム

ドロップダウン内にフォームを含めることもできます：

<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">メールアドレス</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">パスワード</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
メモを残す
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">サインイン</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">ここに新しい人？サインアップ</a>
<a class="dropdown-item" href="#">パスワードを忘れた？</a>
</div>

メニューアライメント

デフォルトでは、ドロップダウンメニューは左寄せされています。これを変更するには、アライメントクラスを使用します：

右寄せメニュー

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
右寄せメニュー
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

レスポンシブアライメント

アライメントをレスポンシブにする：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
左寄せ但し大画面では右寄せ
</button>
<ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

このドロップダウンはデフォルトで左寄せですが、大画面では右寄せになります。

ドロップダウンオプション

Bootstrapのドロップダウンには、いくつかの追加オプションがあります：

オートクローズ-behavior

data-bs-auto-close属性でドロップダウンのクローズ行为を制御します：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
外部クリックで閉じる
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<!-- メニューアイテム -->
</ul>
</div>

data-bs-auto-closeのオプション：

  • true（デフォルト）：外部または内部クリックでドロップダウンを閉じる
  • false：外部または内部クリックでドロップダウンを閉じない
  • inside：内部クリックでドロップダウンを閉じる
  • outside：外部クリックでドロップダウンを閉じる

そして、ここまででBootstrapのドロップダウンの whirlwind tour が終了しました。実践は完璧を求めますので、これらの例を試してみてください。ハッピーコーディングを、そしてあなたのドロップダウンは常に正しい方向に落ちることを祈っています！

Credits: Image by storyset

前のチュートリアル:
Bootstrap - すいとる
次のチュートリアル:
Bootstrap - リストグループ