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

スポンサードリンク

関連コンテンツ

オススメ記事

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

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

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

Scratchでピアノを 作ってみよう!

小学生から始めるScratch入門。ピアノ鍵盤を作って音を鳴らそう!

小学生から始めるScratch入門です。 前回はじゃんけんゲームを作りました。 今回はピアノの鍵盤を作って、音を鳴らしてみましょう。 プロローグ [serif icon="ar

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

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

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

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

コメントをどうぞ!

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