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

Bootstrap

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

2018年12月25日 8:00 

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

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

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

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

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

▼前回の記事はこちら



 

Bootstrap4のボタンスタイル

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

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

 

ボタンスタイルのルール

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

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

 

基本のボタンタグ

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

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

表示

 

設定

 

アウトラインボタン

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

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

表示

 

設定

 



背景色のついたボタン

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

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

表示

 

設定

 

ボタンのサイズ

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

表示

 

設定

 

アクティブボタン

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

表示

 

設定

 



無効ボタン

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

表示

 

設定

 

まとめ

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

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

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

 

▼前回の記事はこちら

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!