初心者でも手軽にできる！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デザイナーが毎日すぐに回答します。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
