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

ボタン要素は、ユーザーがページとやり取りできるようにする、HTMLの中でも特に有用な要素のひとつです。

ログインや登録、削除、メニューの表示、カラーテーマの切り替えなど、さまざまな操作がボタンを通じて行われます。

しかし、ブラウザのデフォルトのボタンスタイルは決して美しいとは言えず、モダンなデザインからも程遠いものです。

プロジェクトごとに毎回スタイルをカスタマイズしていては、同じ結果を得るために何度も同じコードを書くことになってしまいます。

そこで活躍するのがBootstrapです。この記事では、Bootstrapのボタンで何ができるのかを詳しく見ていきましょう。

カラーボタン

    <button class="btn btn-primary">button 1</button>
    <button class="btn btn-secondary">button 2</button>
    <button class="btn btn-info">button 3</button>
    <button class="btn btn-warning">button 4</button>
    <button class="btn btn-danger">button 5</button>
    <button class="btn btn-success">button 6</button>
    <button class="btn btn-light">button 7</button>
    <button class="btn btn-dark">button 8</button>
    <button class="btn btn-link">button 9</button>

色については、Bootstrapがあらかじめ定義しているすべてのカラーに加え、リンク用のスタイルを適用する「btn-link」オプションも使用できます。

どのカラーバリエーションにも統一感のあるパディングが設定されており、マウスカーソルをホバーすると、少し暗い色合いへスムーズに遷移します。リンクタイプの場合は、ホバー時に下線が表示されます。

「btn」クラスのみを指定した場合、Bootstrapはブラウザのデフォルトスタイルを取り除くだけになります。

<button>Without Bootstrap</button>
<button class="btn">With Bootstrap</button>

実際の見た目は以下の通りです。

アウトラインボタン

同じカラーバリエーションを使って、輪郭線だけのボタンを作ることもできます。

    <button class="btn btn-outline-primary">button 1</button>
    <button class="btn btn-outline-secondary">button 2</button>
    <button class="btn btn-outline-info">button 3</button>
    <button class="btn btn-outline-warning">button 4</button>
    <button class="btn btn-outline-danger">button 5</button>
    <button class="btn btn-outline-success">button 6</button>
    <button class="btn btn-outline-light">button 7</button>
    <button class="btn btn-outline-dark">button 8</button>
    <button class="btn btn-outline-link">button 9</button>

これらのボタンは、輪郭線と同じ色を背景色として持ち、文字色はコントラストに応じて白または黒に変わります。lightとyellow（warning）は黒い文字になります。ただし、link版ではこのオプションはサポートされていません。

サイズ

Bootstrapは、ボタンに対して「小・通常・大」の3つのサイズをサポートしています。次のように、サイズを選択するクラスを追加します。

<div class="m-5">
      <button class="btn btn-primary btn-sm">small button 1</button>
      <button class="btn btn-warning btn-sm">small button 2</button>
      <button class="btn btn-primary btn-sm">small button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary">regular button 1</button>
      <button class="btn btn-warning">regular button 2</button>
      <button class="btn btn-danger">regular button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary btn-lg">large button 1</button>
      <button class="btn btn-warning btn-lg">large button 2</button>
      <button class="btn btn-danger btn-lg">large button 3</button>
    </div>

ここでは各サイズにつき3つのボタンを作成し、それぞれのサイズのグループをm-5クラスを持つdivで囲んで、マージンを与えて間隔を空けています。

ブロックレベルボタン

親要素の幅いっぱいに広がるボタンを作りたい場合は、「btn-block」クラスを追加します。ここでは、この手法の一般的な使用例であるシンプルなフォームを作ってみましょう。

<div class="form-group">
          <label for="username">username</label>
          <input type="text" class="form-control" />
          <div class="form-group"></div>
          <label for="email">Email</label>
          <input type="email" class="form-control" />
        </div>
        <button class="btn btn-lg btn-block btn-primary">
          Block Level Button
        </button>
        <button class="btn btn-lg btn-secondary my-2">Regular button</button>
      </form>

Bootstrapのフォームクラスについての詳細はここでは割愛します。

この例では、ユーザー名とメールアドレスを受け付けるシンプルなフォームを作成し、ブロックレベルボタン1つと通常のボタン1つを配置しました。

my-2は、2つのボタンを離すために追加したマージン（上下）です。

両者の違いは以下のように確認できます。

ボタンの状態

他の多くのBootstrapコンポーネントと同様に、ステートクラス（activeまたはdisabled）を使ってボタンの外観を変えることができます。

アクティブ状態

アクティブなボタンは、背景・枠線・影が少し暗めに表示されます。

      <button class="btn btn-primary">Regular</button>
      <button class="btn btn-primary active">Active</button>
      <button class="btn btn-primary">Regular</button>

無効状態

対照的に、無効化されたボタンは、同じプロパティにより淡い色合いで表示されます。注意したいのは、「disabled」クラスを追加しても、ボタンに淡い色が適用されるだけであり、実際には無効化されないという点です。本当に無効化するには、属性として宣言する必要があります。

	<button class="btn btn-primary disabled">Disabled Looking</button>
    <button class="btn btn-primary" disabled>Truly Disabled</button>

disabledクラスを付けたボタンは依然としてクリック可能であり、アクションが設定されていれば実行されてしまいます。

支援技術への配慮として、「aria-disabled="true"」属性も併せて指定しましょう。そうすることで、スクリーンリーダーのユーザーにも画面上に無効なボタンが存在することが伝わります。

また、現時点では<a>要素はdisabled属性をサポートしていないため、無効な外観にするにはクラスを指定する必要があります。

<a class="btn btn-danger" disabled>Attribute Not Supported</a>
      <a href="#" class="btn btn-danger disabled">Disabled Look</a>

<a>タグの場合、disabledクラスはCSSルール「pointer-events: none」を追加し、マウスクリックを無効化します。

しかし、この挙動はまだすべてのWebブラウザで完全にサポートされているわけではなく、対応しているブラウザでもキーボード操作経由であればリンクにアクセスできてしまいます。

機能を完全に無効化することを保証するには、「tabindex="-1"」属性を追加して、キーボードでもフォーカスできないようにすべきです。

そもそも<a>タグをボタンとして使うのは避けるべきですが、こうした仕組みを知っておくことは有益です。

ボタングループ

Bootstrapのカードコンポーネントと同様に、groupクラスを使うことで、複数のボタンを視覚的にひとつの要素として融合させることができます。

<div class="btn-group">
      <button class="btn btn-primary">button 1</button>
      <button class="btn btn-warning">button 2</button>
      <button class="btn btn-info">button 3</button>
      <button class="btn btn-danger">button 4</button>
    </div>

btn-groupクラスを持つdivで囲むだけで完成です。

各ボタンの動作はまったく変わりませんが、ボタン同士が隣接して並び、外側の角がきれいに丸められた見た目になります。

まとめ

ボタンはほぼすべてのWebサイトに存在し、オンライン体験において非常に重要な役割を果たしています。アカウントへのログイン、オンラインでの注文、ニュースレターの購読、受信箱に届くスパムのブロックなど、その多くはボタンを通じて行われます。ボタンがなければ、Webサイトはデジタル名刺のようなものになってしまうでしょう。Bootstrapを活用すれば、ボタンをサイトの美しく機能的なコンポーネントにすることができます。