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」部分には、アウトラインの種類を指定します。

表示

primary

secondary

info

success

warning

danger

light

dark

設定

<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」部分には、背景色の種類を指定します。

表示

primary

secondary

info

success

warning

danger

light

dark

Link

設定

<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>

まとめ

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

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

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

▼前回の記事はこちら

ゆにメモ

 

4 Pockets

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

https://blog.universe-web.jp/2733

おはようございます！社員Aです👩今回は、WEBデザイン初心者でも簡単に使えるBootstrap4の使い方をご紹介します。これから、複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していければと思っているので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。今回はまず最初ということで、入門編からスタートです！Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターし...