Bootstrap4 Button(ボタン)の使い方を徹底解説

Bootstrap4で利用できるボタンクラスの使い方をご紹介します。

Bootstrap3→4に変わってからの主な変更点

Bootstrap3→4になり、廃止・変更されたクラスがいくつかありますので注意して利用しましょう。

• button-outline-{color}が登場した
• button-blockが登場した
• button-{color}の種類が増えた

ボタンbuttonクラスの基本的な使い方

ボタンクラスはa要素、button要素、input要素で利用できます。対象要素に対してclass=”btn btn-xxxxx”という形式で指定します。

■表示例

■上記のソースコード

  <h2>ボタン</h2>
  <a href="#" class="btn btn-primary" role="button">btn-primary</a>
  <a href="#" class="btn btn-secondary" role="button">btn-secondary</a>
  <a href="#" class="btn btn-success" role="button">btn-success</a>
  <a href="#" class="btn btn-info" role="button">btn-info</a>
  <a href="#" class="btn btn-warning" role="button">btn-warning</a>
  <a href="#" class="btn btn-danger" role="button">btn-danger</a>
  <a href="#" class="btn btn-light" role="button">btn-light</a>
  <a href="#" class="btn btn-dark" role="button">btn-dark</a>

role=”button”ってなんでしょうか？必要なんですか？

a要素でボタンクラスを利用する際には、role=”button”を追加することが推奨されています。（button要素やinput要素では不要です。）
見た目はほとんど変わらないので、つけなくても通常問題ありませんが、スクリーンリーダーなどでWebページを読む際に利用するそうです。

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role=”button” to appropriately convey their purpose to assistive technologies such as screen readers.

Buttons | Bootstrap 4.3より引用

btn-{サイズ} ボタンの大きさ

btn-{サイズ}でボタンの大きさを設定することができます。

■ボタンの大きさ(大きいボタンbtn-lgと小さいボタンbtn-sm)

■上記のソースコード

  <h2>ボタンの大きさ</h2>
  <a href="#" class="btn btn-info btn-sm" role="button">btn-sm</a>
  <a href="#" class="btn btn-info" role="button">btn(通常)</a>
  <a href="#" class="btn btn-info btn-lg" role="button">btn-lg</a>

また、btn-blockクラスを利用するとボタンをブロックレベル要素(width:100%)にすることができます。btn-blockはbtn-smやbtn-lgと組み合わせることができます。

■表示例

■上記のソースコード

  <h2>ボタンの大きさ</h2>
  <a href="#" class="btn btn-info btn-block btn-sm" role="button">btn-block + btn-sm</a>
  <a href="#" class="btn btn-info btn-block" role="button">btn-block(通常)</a>
  <a href="#" class="btn btn-info btn-block btn-lg" role="button">btn-lg + btn-lg</a>

背景透明のボタン btn-outline-{color}

■表示例

■上記のソースコード

  <h2>ボタン</h2>
  <a href="#" class="btn btn-outline-primary" role="button">btn-primary</a>
  <a href="#" class="btn btn-outline-secondary" role="button">btn-secondary</a>
  <a href="#" class="btn btn-outline-success" role="button">btn-success</a>
  <a href="#" class="btn btn-outline-info" role="button">btn-info</a>
  <a href="#" class="btn btn-outline-warning" role="button">btn-warning</a>
  <a href="#" class="btn btn-outline-danger" role="button">btn-danger</a>
  <a href="#" class="btn btn-outline-light" role="button">btn-light</a>
  <a href="#" class="btn btn-outline-dark" role="button">btn-dark</a>
  <br><br><br>
  <h2>ボタンの大きさ</h2>
  <a href="#" class="btn btn-outline-info btn-block btn-sm" role="button">btn-block + btn-sm</a>
  <a href="#" class="btn btn-outline-info btn-block" role="button">btn-block(通常)</a>
  <a href="#" class="btn btn-outline-info btn-block btn-lg" role="button">btn-lg + btn-lg</a>

まとめ

いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のボタン(Button)の使い方の基本をご紹介しました。
使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
Buttons | Bootstrap4.3

今回は、以上になります。最後までご覧いただきありがとうございました。