Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ボタン編】

         

Bootstrap

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ボタン編】

2018年12月25日 8:00 2019年09月06日

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ボタン編】

おはようございます!社員Aです👩

前回、Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【入門編】を更新しましたが、今回はよく使う「ボタン編」を公開したいと思います。

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していければと思っているので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか?

Bootstrap4基本の使い方シリーズ


 

Bootstrap4のボタンスタイル

Bootstrap4では、クラス付与だけで様々なボタンスタイルを適用することができます。

用途に合わせて差別化することで、ユーザビリティも向上します。

 

ボタンスタイルのルール

ボタンスタイルのルールを見てみましょう。

  1. <button>要素に、「btn」と各種スタイルのクラスを付与します。
  2. 「btn」クラスは、基本的には<button>要素に使用しますが、<a>または<input>要素でも使用できます。

 

基本のボタンタグ

まずは基本的なボタンタグから説明していきます。

<button>要素もしくは<a><input>要素にクラス「btn」を付与すると、青色のボタンスタイルが適用されます。

表示

 

設定

<button class="btn">ボタン</button>

 

アウトラインボタン

<button>要素もしくは<a><input>要素にクラス「btn」と「btn-outline-xx」を付与すると、アウトラインボタンスタイルが適用されます。

「btn-outline-xx」の「xx」部分には、アウトラインの種類を指定します。

表示

 

設定

<button class="btn btn-outline-primary">primary</button>
<button class="btn btn-outline-secondary">secondary</button>
<button class="btn btn-outline-info">info</button>
<button class="btn btn-outline-success">success</button>
<button class="btn btn-outline-warning">warning</button>
<button class="btn btn-outline-danger">danger</button>
<button class="btn btn-outline-light">light</button>
<button class="btn btn-outline-dark">dark</button>

 



背景色のついたボタン

<button>要素もしくは<a><input>要素にクラス「btn」と「btn-xx」を付与すると、背景色のついたボタンスタイルが適用されます。

「btn-outline-xx」の「xx」部分には、背景色の種類を指定します。

表示

 

設定

<button class="btn btn-primary">primary</button>
<button class="btn btn-secondary">secondary</button>
<button class="btn btn-info">info</button>
<button class="btn btn-success">success</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-light">light</button>
<button class="btn btn-dark">dark</button>
<button class="btn btn-link">Link</button>

 

ボタンのサイズ

<button>要素もしくは<a><input>要素にクラス「btn」と「.btn-lg」もしくは「.btn-sm」を付与すると、ボタンのサイズが変更できます。

表示

 

設定

<button class="btn btn-lg">大きいボタン</button>
<button class="btn btn-sm">小さいボタン</button>

 

アクティブボタン

<button>要素もしくは<a><input>要素にクラス「btn」と「active」を付与すると、ボタンが押されたように見えるアクティブボタンスタイルが適用されます。

表示

 

設定

<button class="btn active">アクティブなボタン</button>

 



無効ボタン

<button>要素もしくは<a><input>要素にクラス「btn」を付与するし、「disabled」を追加すると無効ボタンスタイルが適用されます。

表示

 

設定

<button class="btn" disabled>無効ボタン</button>

 

まとめ

今回はボタン編ということで、様々なボタンスタイルの設定方法をご紹介しました。

クラス付与だけで、ボタンのアクティブ・無効化や色・サイズの変更など柔軟に設定でき、用途に合わせて簡単に変えられるのが魅力ですね。

前回のグリッドレイアウトやテーブルレイアウトと合わせて覚えておくと、便利です。

 

▼前回の記事はこちら

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺