JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapで作る分割ボタン（スプリットボタン）のドロップダウン実装方法

分割ボタンのドロップダウンは、通常のドロップダウンボタンと同じ基本スタイルをベースにしながら、主要なアクション（プライマリアクション）を組み合わせたUIコンポーネントです。ボタンの左側にはメインとなるアクションが配置され、右側のトグル部分をクリックするとドロップダウンメニューが展開される仕組みになっています。

実装例

以下のコードを実行すると、分割ボタンのドロップダウンを実際に確認できます。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap サンプル</title>
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="/scripts/jquery.min.js"></script>
        <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <button type="button" class="btn btn-default">入試案内</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">ドロップダウン切替</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">修士課程</a></li>
                <li><a href="#">学士課程</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">教職員</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">ドロップダウン切替</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">管理部門</a></li>
                <li><a href="#">技術部門</a></li>
                <li><a href="#">スタッフ</a></li>
            </ul>
        </div>
    </body>
</html>

コードのポイント解説

1. btn-group クラスでボタンをグループ化

分割ボタンを作成するには、まず2つのボタンを <div class="btn-group"> で囲みます。これにより、複数のボタンがひとつのまとまったコンポーネントとして横並びに表示されます。

2. 左側がメインアクション、右側がトグル

最初のボタン（btn-default や btn-primary）がユーザーが直接クリックするメインアクションです。2つ目のボタンには dropdown-toggle クラスと data-toggle="dropdown" 属性を指定することで、クリック時にドロップダウンメニューが開閉するようになります。

3. caret と sr-only の役割

<span class="caret"> は下向きの三角アイコン（キャレット）を表示し、ドロップダウンの存在を視覚的に示します。また、<span class="sr-only"> は画面上には表示されませんが、スクリーンリーダー利用者のためにボタンの目的を読み上げるアクセシビリティ対応として重要な要素です。

4. 色のバリエーションも自由に変更可能

サンプルでは btn-default（白系）と btn-primary（青系）を使用していますが、btn-success、btn-info、btn-warning、btn-danger など、他のボタン用クラスに置き換えるだけで簡単に配色を変更できます。

  1. Bootstrapボタン徹底解説！色・サイズ・状態のカスタマイズ方法

    ボタン要素は、ユーザーがページとやり取りできるようにする、HTMLの中でも特に有用な要素のひとつです。ログインや登録、削除、メニューの表示、カラーテーマの切り替えなど、さまざまな操作がボタンを通じて行われます。しかし、ブラウザのデフォルトのボタンスタイルは決して美しいとは言えず、モダンなデザインからも程遠いものです。プロジェクトごとに毎回スタイルをカスタマイズしていては、同じ結果を得るために何度も同じコードを書くことになってしまいます。そこで活躍するのがBootstrapです。この記事では、Bootstrapのボタンで何ができるのかを詳しく見ていきましょう。カラーボタン <butt

  2. CSSで作る分割ボタン（スプリットボタン）式ドロップダウンメニューの実装方法

    Webサイトや管理画面などのUIでよく見かける「分割ボタン（スプリットボタン）」型のドロップダウンメニュー。これは、メインのボタンとその横に並ぶ矢印ボタンで構成され、矢印部分にカーソルを合わせると選択肢の一覧が展開されるUIパターンです。本記事では、JavaScriptに頼らずCSSだけでこの分割ボタンドロップダウンを実装する方法を、サンプルコードとともに解説します。 実装例：完全なサンプルコード 以下が、CSSで分割ボタンのドロップダウンを作成するための完全なコードです。そのままHTMLファイルとして保存すれば、すぐに動作を確認できます。 <!DOCTYPE html> <