初心者でも手軽にできる！Bootstrapで作るbutton(ボタン)の作り方
初心者向けにBootstrapで作るbutton(ボタン)の作り方を解説しています。HTMLの記述だけで見栄えの整ったボタンを作ることができるので、CSSがあまりよく知らなくてもWebデザインのスキルがなくても簡単にできるでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はBootstrapで作るbutton(ボタン)の作り方です。
ボタン要素をHTMLで記述すれば、ボタンとしての機能は果たしますが見た目が良いとは言えません。そこでCSSを自分で書かなくてもBootstrapを使えばデバイスのサイズに合わせて自動で調整してくれるボタンにしてくれます。
初心者の方でも難しい知識は必要ないので、すぐに利用できるでしょう。
本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。
今回はBootstrapでボタンを作成してみよう。
田島メンター！！Bootstrapではどんなボタンが使えるんですか〜？
バリエーションとしてdefault・primary・success・info・warning・danger・linkのタイプが用意されているよ。また、ボタンを押した状態や、無効化された状態を表現したりもできるんだ。
かなり色々なことができるんですね。ぜひやってみたいです！
目次
ボタンの作り方
<button>要素や<a>アンカー要素のクラスに「.btn .btn-***」を指定することでボタンを表示できます。
以下のボタンの種類があります。
デフォルト
<button type="button" class="btn btn-default">Default</button>
プライマリー
<button type="button" class="btn btn-primary">Primary</button>
サクセス
<button type="button" class="btn btn-success">Success</button>
インフォメーション
<button type="button" class="btn btn-info">Infomation</button>
ワーニング
<button type="button" class="btn btn-warning">Warning</button>
デンジャー
<button type="button" class="btn btn-danger">Danger</button>
基本の各種ボタンの使い方だよ。
各ボタンの用途によって、色が違っていますね。
そうだね。また、linkの場合は背景の色が設定されずにテキストだけが表示されるようになっているんだ。ボタンの大きさも変更できるのでそれも見てみよう。
また、ボタンのサイズは以下を指定して変更できます。
「.btn-lg」「.btn-sm」「.btn-xs」
使い方は次の通りです。
ラージボタン
<button type="button" class="btn btn-default btn-lg">L-button</button>
スモールボタン
<button type="button" class="btn btn-default btn-sm">S-button</button>
エクストラスモールボタン
<button type="button" class="btn btn-default btn-xs">ES-button</button>
「.btn-block」で幅いっぱいに広がるブロックのボタンを作成できます。
書き方
<button type="button" class="btn btn-default btn-lg btn-block">B-button</button>
実際に書いてみよう
実際にHTMLを書いてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
#button {
padding-top: 50px;
padding-left: 50px;
}
#long{
padding-top: 50px;
padding-left: 50px;
}
#block{
padding-top: 50px;
}
</style>
</head>
<body>
<div id="button">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Infomation</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div id="long">
<button type="button" class="btn btn-success btn-lg">L-button</button>
<button type="button" class="btn btn-success btn-sm">S-button</button>
<button type="button" class="btn btn-success btn-xs">ES-button</button>
</div>
<div id="block">
<button type="button" class="btn btn-primary btn-lg btn-block">B-button</button>
</div>
</boby>
</html>
今回説明したボタンがすべて出力されていると思います。このようにbootstrapはボタンを用意してくれています。
今回はCDNを用いてbootstrapをダウンロードせずにWebページを実現しています。皆さんも、このようなボタンを活用してみてください。
今回はBootstrap CDNを利用してボタンを配置してみたよ。CDNは公式で指定されているリンクを使うことで簡単にBootstrapを利用できるものなのでそちらも覚えておこう。
分かりました！それぞれのボタンの種類と、大きさの指定方法を覚えておいたらだいたいのことはできそうですね。
Bootstrapを使うことでボタンのスタイル指定に使う時間を短縮することができるので、どんどん使ってみよう。
そうですね、挑戦してみます。ありがとうございました！
[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。
