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、カルーセル機能のを実装方法!

スポンサードリンク

関連コンテンツ

オススメ記事

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

プログラミングのクラスってなぁに?

小学生からのJavaScript。クラスの概念をしっかりと理解しよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「ク

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

コメントをどうぞ!

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