1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。

Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。
今回はBootstrap4を使ったボタンの作り方を紹介していきたいと思います。

目次
  1. ボタンの作り方の基本
  2. 色、デザインの指定
  3. サイズの指定
  4. 状態の指定
  5. トグル ( toggle )
  6. まとめ
  7. 参考サイト

ボタンの作り方の基本

ではまずボタンの作り方の基本を紹介していこうと思います。
「btn」というクラスと、ボタンのデザインやサイズを示すクラス(btn-xxxx)と組み合わせて使うことで、色々なパターンのボタンを作ることができます。

<button class="btn btn-primary" type="button">buttonタグ</button>
<button class="btn btn-primary btn-lg" type="button">buttonタグ</button>
<button class="btn btn-primary btn-sm" type="button">buttonタグ</button>

上の例では、buttonタグを使いましたが、aタグやinputタグも使うことができます。

<button class="btn btn-primary" type="button">buttonタグ</button>
<input class="btn btn-primary" type="button" value="Inputタグ">
<a class="btn btn-primary" href="#" role="button">aタグ</a>

色、デザインの指定

色の指定をしてみましょう。
次の例をご覧ください。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

また、アウトラインデザインのボタンを作ることもできます。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

サイズの指定

.btn-lg, .btn-sm, .btn-blockで、ボタンのサイズを指定することもできます。
また、.btn-blockについては、「btn-lg」や「btn-sm」とも組み合わせることが可能です。

<button type="button" class="btn btn-primary btn-lg">大きいボタン</button>
<button type="button" class="btn btn-primary btn-sm">小さいボタン</button>
<button type="button" class="btn btn-primary btn-lg btn-block">幅いっぱい</button>

状態の指定

ボタンの状態を指定することもできます。
まず「active」というクラスを使うことで、ボタンを押された状態に保っておくことができます。
また、buttonタグのdisabled属性を使うことで、そのボタンを無効状態にしておくことができます。
しかしボタンにaタグを使用している場合、クラスに「disabled」を使う必要があります。

<button type="button" class="btn btn-primary active" aria-pressed="true">アクティブ</button>
<button type="button" class="btn btn-primary" disabled>無効なボタン</button>
<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">無効なボタン</a>

トグル ( toggle )

トグルとは、ボタンの ON OFF を切り替えられるようにするものです。
ボタンの初期値をONにする場合は、activeクラスと、aria-pressed="true"を使います。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
	切り替え
</button>
<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true">
	切り替え
</button>

まとめ

Bootstrap4にはボタンで使える様々なクラスが含まれており、組み合わせることでより多くのパターンのボタンを作ることができます。
今回はボタンのサイズや色などの指定方法を紹介しましたが、さらにBootstrap4にはボタングループという機能も備わっており、それを使うことで複数のボタンをまとめることもできます。
ボタングループについては後日紹介する予定です。

興味のある方はぜひお試しください。

参考サイト

参考サイト : Bootstrap 公式ページ

この企画の一覧はこちら

  1. Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

【Git】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。 前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてし

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチ)より、少しレベルアップして、J

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です