SE

見栄えのいいボタンを作りたいのですが、どんな種類がありますか？

PM

見栄えの良さはデザインの要ですからね。では実際どんな種類があるのか見ていきましょう。

Bootstrapでのbuttonの使い方とは？

今回は、Bootstrapを利用したボタンの作成方法について説明します。

Webページを作成していて何だか見栄えがよくなくて、HTMLやCSSを一生懸命修正して苦労することはないでしょうか？

Bootstrapでは独自にCSSを用意しなくてもHTMLタグに用意されたクラスをするだけで、おしゃれにデザインされたWebページを作成することができます。特にプログラムの知識も必要ありません。

ここでは、フォームやリンクなどで利用されるBootstrapのボタンを作成してみましょう。
Bootstrapに興味のある方はぜひご覧ください。

ボタンの種類

Bootstrapでは、ボタンの色やデザインを指定できます。
btn-*で指定します。

See the Pen
bootstrap_button1 by kskumd (@kskumd)
on CodePen.

アウトラインボタン

Bootstrapでは、アウトラインボタンも表示できます。
btn-outline-*で指定します。

See the Pen
bootstrap_button2 by kskumd (@kskumd)
on CodePen.

ボタンの大きさ

Bootstrapでは、ボタンの大きさを指定できます。
btn-*で大きさを指定できます。

blockを指定すると、横幅いっぱいのボタンになります。

See the Pen
bootstrap_button3 by kskumd (@kskumd)
on CodePen.

ボタンの状態

Bootstrapでは、ボタンの状態を指定できます。
「active」を指定することで、ボタンのクリック状態を保持しておくことができます。
「disabled」を指定することで、ボタンを無効状態にできます。

See the Pen
bootstrap_button4 by kskumd (@kskumd)
on CodePen.

トグルボタン

Bootstrapでは、トグルボタンを表示できます。
トグルとは、ボタンをクリックするたびにオン・オフを切り替えられるものです。

See the Pen
bootstrap_button5 by kskumd (@kskumd)
on CodePen.

トグルボタンをクリックすると、アクティブな状態が維持されてボタンの色が濃いままとなります。
もう一度クリックするとアクティブな状態が解除され、ボタンの色が薄くなります。

アイコン付きボタン

Bootstrapでは、アイコン付きボタンを表示できます。

まず、head部に以下を記載します。

次に、
https://fontawesome.com/icons?d=gallery
にアクセスします。
「Free」にチェックを付けて、キーワード検索します。
アイコンを選択し、「i class=」の部分をコピーしてコードに貼り付けます。

See the Pen
bootstrap_button6 by kskumd (@kskumd)
on CodePen.

SE

アイコンもつけられるのですね。いろいろ試してみたくなりました。

PM

それは良かった。実際にコードを書いてどんなデザインがあるのか覚えていきましょう。

Bootstrapを利用したボタンを作成してみよう

いかがでしたでしょうか。Bootstrapを利用したボタンの作成方法について説明しました。

Bootstrapでは独自にCSSを用意しなくてもHTMLタグに用意されたクラスをするだけで、おしゃれにデザインされたWebページを作成することができます。特にプログラムの知識も必要ありません。

ぜひご自身でソースコードを書いて、理解を深めてください。