Bootstrap5 分割ボタン（split button）の作り方と使いどころを超やさしく解説

1. 分割ボタンとは何かを超かんたんに説明

1. 分割ボタンとは何かを超かんたんに説明

Bootstrapの分割ボタンとは、見た目は一つのボタンなのに、実は役割が二つある便利なボタンです。 左側は「すぐ実行するボタン」、右側は「選択肢を表示するボタン」というように、押す場所で動きが変わります。 パソコンに触ったことがない人でも、家電のリモコンを思い出してください。 「電源ボタン」と「設定ボタン」が分かれていると、押し間違えにくいですよね。 分割ボタンも同じ考え方で、使う人が迷わないように作られています。 Bootstrap5では、この分割ボタンをとても簡単に作ることができます。

2. Bootstrapとドロップダウンの基本

2. Bootstrapとドロップダウンの基本

Bootstrapとは、見た目がきれいな画面を簡単に作るための道具箱のようなものです。 ドロップダウンとは、ボタンを押すと下にメニューが表示される仕組みです。 「ドロップ」は落ちる、「ダウン」は下、つまり「下に落ちてくるメニュー」と覚えると分かりやすいです。 分割ボタンは、このドロップダウン機能を使っています。 難しそうに聞こえますが、実際には決まった形をそのまま使うだけなので安心してください。

3. いちばん基本的な分割ボタンの作り方

3. いちばん基本的な分割ボタンの作り方

まずは、最小構成の分割ボタンを見てみましょう。 形を覚えることが大切なので、細かい意味は後からで大丈夫です。

<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">
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">選択肢1</a></li>
        <li><a class="dropdown-item" href="#">選択肢2</a></li>
    </ul>
</div>

4. コードの意味を一つずつ分解して理解

4. コードの意味を一つずつ分解して理解

btn-groupは、複数のボタンを横に並べて一つのグループとして扱う箱です。 最初のボタンは、クリックするとすぐ動くメインの操作です。 次の小さなボタンが、メニューを開くための専用ボタンになります。 dropdown-menuは、押したときに下に表示されるメニューの中身です。 このように役割がはっきり分かれているので、使う人が混乱しません。

5. 色やサイズを変えた分割ボタン

5. 色やサイズを変えた分割ボタン

分割ボタンは、色や大きさを変えることで、重要度を伝えることができます。 たとえば、注意が必要な操作は赤色にすると分かりやすくなります。

<div class="btn-group">
    <button type="button" class="btn btn-danger btn-sm">
        削除
    </button>
    <button type="button" class="btn btn-danger btn-sm dropdown-toggle dropdown-toggle-split" 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>
    </ul>
</div>

6. アイコンを使って直感的にする

6. アイコンを使って直感的にする

文字だけでは分かりにくい場合、アイコンを使うと一目で意味が伝わります。 Bootstrapアイコンを使うことで、初心者でも分かりやすい画面になります。

<div class="btn-group">
    <button type="button" class="btn btn-success">
        <i class="bi bi-download"></i> 保存
    </button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">PDFで保存</a></li>
        <li><a class="dropdown-item" href="#">画像で保存</a></li>
    </ul>
</div>

7. 分割ボタンが活躍する場面

7. 分割ボタンが活躍する場面

分割ボタンは、よく使う操作が決まっているけれど、たまに別の操作もしたいときに向いています。 例えば「保存」はいつも使うけれど、「別名で保存」も必要な場合です。 一つのボタンに全部詰め込むより、分けた方が安心して操作できます。 これは初心者向けの画面を作るときに、とても大切な考え方です。

8. 初心者がつまずきやすいポイント

8. 初心者がつまずきやすいポイント

分割ボタンが動かない場合、多くはドロップダウンの設定が抜けています。 形をそのまま真似することが、最初は一番の近道です。 理解は後から自然についてくるので、安心して使ってください。 Bootstrap5の分割ボタンは、正しく使えばとても安全で親切な部品です。

まとめ

まとめ

ここまで、Bootstrap5の分割ボタンについて、基本から具体的な使いどころまでを順番に見てきました。 分割ボタンは、ただ見た目が少し変わったボタンではなく、使う人の迷いを減らし、操作を分かりやすくするための工夫が詰まった部品です。 左側のメインボタンは「いつも使う動作」を担当し、右側の小さなボタンは「選択肢を表示する役割」を持っています。 この役割分担があることで、初心者でも安心して画面を操作できるようになります。 Bootstrap5では、btn-group、dropdown-toggle、dropdown-menuといった決まったclassを使うだけで、この分割ボタンを簡単に作ることができます。 プログラムに慣れていない人でも、形をそのまま真似することで、実用的な画面を作れる点が大きな魅力です。 また、色やサイズ、アイコンを組み合わせることで、重要な操作や注意が必要な操作を自然に伝えることができます。 例えば、削除や危険な操作は赤色にする、保存や完了の操作は緑色にするなど、見た目だけで意味が伝わる画面になります。 分割ボタンは、保存、削除、設定変更、ダウンロードなど、よく使う場面が多く、実務でも頻繁に使われています。 特に初心者向けの画面や、説明書を読まなくても使える画面を作りたい場合に、とても効果的です。 うまく使うことで、画面全体がすっきりし、操作ミスも減らすことができます。 Bootstrap5の分割ボタンは、覚えておくと長く使える便利な知識なので、ぜひ何度も触って体に覚えさせてください。

まとめとしてのサンプルプログラム

最後に、この記事で学んだ内容をまとめた、シンプルで実用的な分割ボタンの例を見てみましょう。 実際の画面を想像しながら確認すると、理解がより深まります。

<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">
    </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>

このように、分割ボタンを使うことで、「保存」という基本操作と、「保存方法の選択」を一つの場所にまとめることができます。 ボタンが増えすぎず、画面がごちゃごちゃしない点も大きなメリットです。 Bootstrap5の分割ボタンは、見た目の美しさだけでなく、使いやすさを重視した設計になっています。 初心者のうちは難しく感じるかもしれませんが、何度か使ううちに自然と理解できるようになります。