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

Bootstrap4 Buttonの使い方を徹底解説

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

Bootstrap4 button
 

 

 

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

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

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

 
 

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

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

クラス意味
.btnボタンを定義(必須)
.btn-primary青色のボタン
.btn-secondary灰色のボタン
.btn-success緑色のボタン
.btn-info水色のボタン
.btn-warning黄色のボタン
.btn-danger赤色のボタン

 

■表示例
Bootstrap4 button
 

■上記のソースコード

 

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小さいボタン
.btn-blockブロックレベルにする(width100%になる)

 

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

■上記のソースコード

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

■表示例
Bootstrap4 btn-block
 

■上記のソースコード

 

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

クラス意味
.btnボタンを定義(必須)
.btn-outline-default灰色のボタン
.btn-outline-primary青色のボタン
.btn-outline-success緑色のボタン
.btn-outline-info水色のボタン
.btn-outline-warning黄色のボタン
.btn-outline-danger赤色のボタン

 

■表示例

 

■上記のソースコード

 
 

▲▲目次に戻る▲▲

 

まとめ

いかがでしたでしょうか。
 

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のボタン(Button)の使い方の基本をご紹介しました。
 

使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
 

Buttons | Bootstrap4.3
 

 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

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

【メルマガ登録はこちら!!】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

インタビュー一覧

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ