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

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

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】ボタン(btn)の作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

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

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

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

マップ上をキャラが移動できるようにしよう!

小学生からのJavaScript。マップでキャラを動かせるようにしよう!

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクタ

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

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

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

コメントをどうぞ!

メールアドレスが公開されることはありません。