初心者でも手軽にできる!Bootstrapで作るbutton(ボタン)の作り方

初心者向けにBootstrapで作るbutton(ボタン)の作り方を解説しています。HTMLの記述だけで見栄えの整ったボタンを作ることができるので、CSSがあまりよく知らなくてもWebデザインのスキルがなくても簡単にできるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

今回はBootstrapで作るbutton(ボタン)の作り方です。

ボタン要素をHTMLで記述すれば、ボタンとしての機能は果たしますが見た目が良いとは言えません。そこでCSSを自分で書かなくてもBootstrapを使えばデバイスのサイズに合わせて自動で調整してくれるボタンにしてくれます。

初心者の方でも難しい知識は必要ないので、すぐに利用できるでしょう。

 

本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。

 

20163020-2

 

今回はBootstrapでボタンを作成してみよう。

 

20160620

 

田島メンター!!Bootstrapではどんなボタンが使えるんですか〜?

 

20163020-2

 

バリエーションとしてdefault・primary・success・info・warning・danger・linkのタイプが用意されているよ。また、ボタンを押した状態や、無効化された状態を表現したりもできるんだ。

 

20160620

 

かなり色々なことができるんですね。ぜひやってみたいです!

 

目次

 

ボタンの作り方

<button>要素や<a>アンカー要素のクラスに「.btn .btn-***」を指定することでボタンを表示できます。

以下のボタンの種類があります。

001

 

デフォルト

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

20163020-2

 

基本の各種ボタンの使い方だよ。

 

20160620

 

各ボタンの用途によって、色が違っていますね。

 

20163020-2

 

そうだね。また、linkの場合は背景の色が設定されずにテキストだけが表示されるようになっているんだ。ボタンの大きさも変更できるのでそれも見てみよう。

 

また、ボタンのサイズは以下を指定して変更できます。
「.btn-lg」「.btn-sm」「.btn-xs」

002

使い方は次の通りです。

ラージボタン

<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」で幅いっぱいに広がるブロックのボタンを作成できます。

003

 

書き方

<button type="button" class="btn btn-default btn-lg btn-block">B-button</button>

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

実際に書いてみよう

実際に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ページを実現しています。皆さんも、このようなボタンを活用してみてください。

 

20163020-2

 

今回はBootstrap CDNを利用してボタンを配置してみたよ。CDNは公式で指定されているリンクを使うことで簡単にBootstrapを利用できるものなのでそちらも覚えておこう。

 

20160620

 

分かりました!それぞれのボタンの種類と、大きさの指定方法を覚えておいたらだいたいのことはできそうですね。

 

20163020-2

 

Bootstrapを使うことでボタンのスタイル指定に使う時間を短縮することができるので、どんどん使ってみよう。

 

20160620

 

そうですね、挑戦してみます。ありがとうございました!

 

 

[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。