Bootstrap4 Buttonの使い方を徹底解説

Bootstrap CSS

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

投稿日:2019年4月21日 更新日:

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
 

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

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

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-Bootstrap, CSS
-, ,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.