Bootstrap4を使ってリンクをボタンとして表示する方法

ウェブページに掲載するリンクは、ただのテキストリンクではなくボタン型に装飾したいこともあります。指で画面をタップして操作するモバイル環境では、文字に下線を引いただけのテキストリンクよりも、ボタン型に装飾されたリンクの方が押しやすくて便利でしょう。フレームワーク「Bootstrap4」を使えば、HTMLのa要素で作るテキストリンクを、ほんの短い記述だけで簡単にボタン化して表示できます。

ただのテキストリンクよりもボタンにした方が見やすくて押しやすい

ただのテキストリンクよりもボタンにした方が見やすくて押しやすい


Bootstrap4で作成できるボタンのデザインは、配色やサイズの選択肢があらかじめ用意されているため選びやすくて便利です。元がテキストリンクなので、ボタンを横並びに配置することも、右寄せ・中央寄せ・左寄せで配置することも簡単です。

単に1つのリンクを1つのボタンに装飾して並べるだけではなく、複数個のボタンを縦横に連結したボタンや、枠付きのリスト形式で縦に並んだボタン、ドロップダウンメニュー付きのボタン、ページ移動用ボタンなど、様々なボタンを簡単にカスタマイズして表示できます。

Bootstrap4を使うと、リンクを簡単にボタン形状で表示できる

Bootstrap4を使うと、テキストリンクを簡単にボタン形状で表示できる


今回は、フレームワークBootstrap4を使って、a要素で作るテキストリンクをボタン型に見えるよう装飾する方法を解説いたします。

Bootstrap4はCDN経由で簡単に読み込める

BootstrapはCDN経由で読み込める

BootstrapはCDN経由で読み込める

Bootstrap4を使うには、そのウェブページ上でBootstrap4の構成ファイルを読み込む必要があります。しかし、Bootstrap4はCDN経由で提供されていますから、自サイト上に設置する必要はありません。単に数行のHTMLソースを追記するだけで使えます。

詳しくは、記事「見やすいUIを作れるフレームワークBootstrap4の使い方」で解説していますので、併せてご参照下さい。

これ以降は、Bootstrap4が既に読み込めていることを前提にした解説です。

【本記事の目次】

Bootstrap4を使ってボタンを作成する方法の基礎 (HTMLの書き方)

Bootstrapでは、リンクを作るa要素に対して指定のclass名を付加することでボタン型に装飾できます。ボタン化して表示する際にはclass名「btn」を書き、さらに配色やサイズや表示形態などを表すclass名を必要に応じて加えます。下記のHTMLソースでは、a要素のclass属性に値として「btn」と「btn-primary」の2つのclass名を付加しています。
<a class="btn btn-primary" href="https://allabout.co.jp/">オールアバウト</a>
CSSを適用しなければ、特徴のない普通のテキストリンクに見えるHTMLソースです。しかし、Bootstrap4用のclass名を付加しているため、Bootstrap4が読み込まれている場合にはボタン型リンクとして表示されます。

class属性値に、表示したいボタンの仕様を必要なだけ加える記述方法
例えば下図のように、リンクを作るa要素に対して3つのclass名「btn」+「btn-primary」+「btn-lg」を付加すると、このテキストリンクはボタン型(btn)に装飾され、ボタンの配色は濃い青色(btn-primary)で表示され、ボタンのサイズは大きめ(btn-lg)になります。

Bootstrapを読み込んでいれば、指定のclass名を付加するだけで見やすい装飾を表示できる

Bootstrapを読み込んでいれば、指定のclass名を付加するだけで見やすい装飾を表示できる


※a要素で作るテキストリンクのほか、button要素で作るボタンや、input要素で作るボタンも同様のclass名で装飾できます。

Bootstrap4でボタンの配色を指定する方法

Bootstrap4で作成できるボタンには、あらかじめ下記に示す8種類の配色が用意されており、どれも指定のclass名を付加するだけで簡単に表示できます。
<a href="#" class="btn btn-primary">ボタン Primary</a>
<a href="#" class="btn btn-secondary">ボタン Secondary</a>
<a href="#" class="btn btn-success">ボタン Success</a>
<a href="#" class="btn btn-danger">ボタン Danger</a>
<a href="#" class="btn btn-warning">ボタン Warning</a>
<a href="#" class="btn btn-info">ボタン Info</a>
<a href="#" class="btn btn-light">ボタン Light</a>
<a href="#" class="btn btn-dark">ボタン Dark</a>
class名として「btn-primary」を付加すると青色のボタンとして表示され、「btn-danger」を付加すると赤色のボタンとして表示されます。primaryは「最初の」という意味で、dangerは「危険」という意味です。このように、class名は色名を表しているわけではありません。上記のHTMLソース8行をブラウザで表示すると、下図のように見えます。

Bootstrap4で指定できるボタンの配色8種類

Bootstrap4で指定できるボタンの配色8種類



枠線だけに色を付けた明るいボタンも表示できる
先ほどのようにボタンの表面を塗りつぶす配色だけでなく、枠線(アウトライン)だけに色を付けた明るいボタンも作れます。
<a href="#" class="btn btn-outline-primary">枠ボタン Primary</a>
<a href="#" class="btn btn-outline-secondary">枠ボタン Secondary</a>
<a href="#" class="btn btn-outline-success">枠ボタン Success</a>
<a href="#" class="btn btn-outline-danger">枠ボタン Danger</a>
<a href="#" class="btn btn-outline-warning">枠ボタン Warning</a>
<a href="#" class="btn btn-outline-info">枠ボタン Info</a>
<a href="#" class="btn btn-outline-light">枠ボタン Light</a>
<a href="#" class="btn btn-outline-dark">枠ボタン Dark</a>
塗りつぶす場合のclass名「btn-primary」に対して、間に「outline」を加えて「btn-outline-primary」のようなclass名にするだけです。上記のHTMLソース8行をブラウザで表示すると、下図のように見えます。

Bootstrap4で指定できるボタンの配色8種類(枠線のみ)

Bootstrap4で指定できるボタンの配色8種類(枠線のみ)


※上図では、7番目(左下)の「Light」は薄すぎるためにかなり見えにくいですが、ボタンを掲載する箇所の背景が濃い色ならハッキリ見えます。


Bootstrap4でボタンの大きさを指定する方法

Bootstrap4で作れるボタンの大きさには、下記の3種類が用意されています。大きさを示すclass名を何も付加しなければ標準サイズで表示され、「btn-lg」を加えれば大きく、「btn-sm」を加えれば小さく表示されます。
青色ボタンで大中小を表示:
<a href="#" class="btn btn-primary btn-lg">ボタン大(Large)</a>
<a href="#" class="btn btn-primary">ボタン中(標準)</a>
<a href="#" class="btn btn-primary btn-sm">ボタン小(Small)</a>
緑色ボタンで大中小を表示:
<a href="#" class="btn btn-success btn-lg">ボタン大(Large)</a>
<a href="#" class="btn btn-success">ボタン中(標準)</a>
<a href="#" class="btn btn-success btn-sm">ボタン小(Small)</a>
上記のHTMLソースをブラウザで表示すると、下図のように見えます。

Bootstrap4で作成できるボタンのサイズ3種類

Bootstrap4で作成できるボタンのサイズ3種類


ブロックレベルボタン
class名に「btn-block」を加えれば、描画領域の横幅全体に広がるブロックレベルボタンとして表示することもできます。
<a href="#" class="btn btn-primary btn-lg btn-block">ブロックボタン大(青色)</a>
<a href="#" class="btn btn-success btn-block">ブロックボタン中(緑色)</a>
<a href="#" class="btn btn-warning btn-sm btn-block">ブロックボタン小(黄色)</a>
ここでは例として青色・緑色・黄色の3色だけを使いましたが、配色や大きさの指定はこれまでにご紹介した書き方をどれでも併用可能です。上記のHTMLソースをブラウザで表示すると、下図のように見えます。

描画領域の横幅いっぱいに広がるボタンも作れる

描画領域の横幅いっぱいに広がるボタンも作れる



Bootstrap4で横方向の連結ボタンを作る方法

2つ以上のボタンを連結(合体)させて掲載することもできます。単純に複数のボタンが隙間なく並ぶだけではなく、各ボタンの角丸形状が調整されて「連結されたグループの四隅」だけが角丸になるよう表示されます。これによって、複数のボタンの連結関係が明確になるでしょう。
<div class="btn-group">
  <a href="#" class="btn btn-success">左端ボタン</a>
  <a href="#" class="btn btn-success">中央ボタン</a>
  <a href="#" class="btn btn-success">右端ボタン</a>
</div>
上記では同じ色のボタンを3つ連結していますが、個数はいくつでも必要なだけ連結できますし、異なる配色のボタンを連結することもできます。なお、連結ボタンのサイズは、外側のdiv要素に対して以下のように指定します。
<div class="btn-group btn-group-lg">
  <a href="#" class="btn btn-success">左端ボタン</a>
  <a href="#" class="btn btn-success">中央ボタン</a>
  <a href="#" class="btn btn-success">右端ボタン</a>
</div>
連結されているすべてのボタンは、div要素にclass名として「btn-group-lg」を加えると大きいサイズのボタンとして表示され、「btn-group-sm」を加えると小さいサイズのボタンとして表示されます。大中小の3サイズで表示させた例は下図の通りです。

Bootstrap4で作成できる連結ボタンの例

Bootstrap4で作成できる連結ボタンの例



Bootstrap4で縦方向の連結ボタンを作る方法

ボタンの連結方向は横だけではなく縦にもできます。これは、横方向の連結ボタンを作る際に指定したclass名「btn-group」の代わりに「btn-group-vertical」を指定するだけです。
<div class="btn-group-vertical">
  <a href="#" class="btn btn-success">上端ボタン</a>
  <a href="#" class="btn btn-success">中央ボタン</a>
  <a href="#" class="btn btn-success">下端ボタン</a>
</div>
それぞれのボタンは、HTMLソースに記述した順序で上から下へ並びます。大きさの指定方法は、横方向の場合と同じです。

Bootstrap4で作成できる縦方向に連結したボタン群の例

Bootstrap4で作成できる縦方向に連結したボタン群の例



Bootstrap4でリストボタンを作る方法

余白部分もクリック(タップ)可能な、リスト形式のボタン群を作ることもできます。各項目をa要素で作り、それらの外側をdiv要素で囲みます。div要素にはclass名「list-group」を付加し、a要素には下記の通りのclass名を付加します。
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">HTMLの解説 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action">CSSの解説 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action">JavaScriptの解説 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action">PHPの解説 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action">CGIの解説 &raquo;</a>
</div>
上記のHTMLソースをブラウザで表示すると、下図のように見えます。

Bootstrap4で作成できるリスト型のボタン群

Bootstrap4で作成できるリスト型のボタン群


色付きのリストメニュー項目を作ることもできる
これらのリストボタンに対しても、他のボタンと同様に8種類の色を付けられます。ただし、色を加えるためのclass名は、ボタン用の「btn-primary」ではなくリスト項目用の「list-group-item-primary」を使います。その際も、配色の種類を表す「primary」や「success」などのキーワードは共通です。
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">primary項目 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">secondary項目 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">success項目 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">danger項目 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">warning項目 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">info項目 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">light項目 &raquo;</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">dark項目 &raquo;</a>
</div>
上記のソースを表示すると、以下のような感じに見えます。この図ではスペースを節約するため、外側のブロックの横幅を制限することで狭く表示しています。

リスト項目にも色を付けられる

リスト項目にもBootstrap4で定義されている各色を付けられる



Bootstrap4でドロップダウンメニューの付いたボタンを作る方法

ボタンをクリック(タップ)すると動的にサブメニュー項目が出てくるドロップダウンボタンを作ることも簡単です。ボタンを作るa要素には指定class名のほかに「data-toggle="dropdown"」というHTML5仕様の属性を加える必要がある点に注意して下さい。
<div class="dropdown show">
   <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
      押して選んで下さい
   </a>
   <div class="dropdown-menu">
      <a class="dropdown-item" href="#">ドロップダウンリンク1</a>
      <a class="dropdown-item" href="#">ドロップダウンリンク2</a>
      <a class="dropdown-item" href="#">ドロップダウンリンク3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">ドロップダウンリンク4</a>
   </div>
</div>
上記のソースに書いている内容は、概ね以下に示す5種類です。

  1. 全体を <div class="dropdown show"> ~ </div> で囲む。
  2. ボタンはa要素で作り、配色や大きさはこれまでに紹介した書き方で指定。class名には「dropdown-toggle」を加え、属性「data-toggle="dropdown"」も加える。
  3. ドロップダウンメニューの中身は <div class="dropdown-menu"> ~ </div> で囲む。
  4. ドロップダウンメニューの各項目はa要素で作り、class名に「dropdown-item」を加える。
  5. メニュー内に分割線を引きたい場合は <div class="dropdown-divider"></div> と書く。

上記のHTMLソースをブラウザで表示すると、下図の左側のように見えます。ボタンに太い枠線が付加されているのは、クリックしたためです。

Bootstrap4で作成できるドロップダウンメニュー付きボタン

Bootstrap4で作成できるドロップダウンメニュー付きボタン


ドロップ用の[▼]ボタンが分割されているスプリットドロップダウンボタンも作れる
ボタン表面に表示するテキストと、ドロップダウンメニューを出す[▼]部分が別々に機能するスプリットドロップダウンボタンも作れます。
<div class="btn-group">
   <a href="#" class="btn btn-danger">Action</a>
   <a href="#" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> </a>
   <div class="dropdown-menu">
      <a class="dropdown-item" href="#">ドロップダウンできる</a>
      <a class="dropdown-item" href="#">下矢印部分だけが分離</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">リンク</a>
   </div>
</div>
これは、連結ボタンを作る記述方法と、ドロップダウンボタンを作る記述方法を併用した形です。上記では「Action」というラベル文字でボタンを1つ作り、さらにラベル文字のないドロップダウンボタンを作り、それら2つのボタンを連結させています。ブラウザで表示すると下図の右側のように見えます。

ボタン表面の文字部分とドロップダウンメニューを出す矢印部分を分離したボタンも作れる

ボタン表面の文字部分とドロップダウンメニューを出す矢印部分を分離したボタンも作れる


下方向だけでなく、上や左右にドロップさせるボタンも作れる
ドロップダウンメニューとは「サブメニューが下方向に表示される」形のメニューのことですが、Bootstrap4ではボタンの上側や左右にメニューを出すこともできます。
上に出す場合: <div class="btn-group dropup"> ~ </div>
右に出す場合: <div class="btn-group dropright"> ~ </div>
左に出す場合: <div class="btn-group dropleft"> ~ </div>
外側のdiv要素に対して、class名「dropup」を加えれば上方向にドロップし、「dropright」を加えれば右方向にドロップし、「dropleft」を加えれば左方向にドロップします。ただし、描画空間に空きがない場合は、指定とは反対方向にメニューが展開されることもあります。


Bootstrap4でテキスト入力欄とボタンを連結表示する方法

Bootstrap4では、テキスト入力欄の端にボタンを合体させて表示することもできます。下記では「アカウントID」というプレースホルダの付いたテキスト入力欄の右端に「Help?」というラベルの付いたボタンを加えています。ボタンの配色は「btn-outline-info」を指定しているため水色の枠線で表示されます(※表示例は後に掲載)。
<div class="input-group">
   <input type="text" class="form-control" placeholder="アカウントID">
   <div class="input-group-append">
      <a href="#" class="btn btn-outline-info">Help?</a>
   </div>
</div>
合体させるボタンは1個だけではなく、複数個でも構いません。下記は「Help」と「忘れた」の2つのボタンをテキスト入力欄に合体させています。
<div class="input-group">
   <input type="text" class="form-control" placeholder="パスワード">
   <div class="input-group-append">
      <a href="#" class="btn btn-outline-success">Help</a>
      <a href="#" class="btn btn-outline-danger">忘れた</a>
   </div>
</div>
これらのHTMLソースをブラウザで表示すると、下図のように見えます。

テキスト入力欄にボタンを合体させることもできる

テキスト入力欄にボタンを合体させることもできる



Bootstrap4でページ移動用ボタンを作る方法

複数ページで構成されるコンテンツには、ページ番号リンクや「前のページへ」・「次のページへ」といったページ移動用のナビゲーションボタンがあると便利です。Bootstrap4では、そのようなページ移動用ボタンも簡単に作れます。ボタンはこれまでと同様にa要素で作りますが、下記ソースのように全体をul要素とli要素で囲んだリストの形にする点が異なります。
<ul class="pagination">
   <li class="page-item"><a class="page-link" href="#">&laquo; 前へ</a></li>
   <li class="page-item"><a class="page-link" href="#">1</a></li>
   <li class="page-item"><a class="page-link" href="#">2</a></li>
   <li class="page-item"><a class="page-link" href="#">3</a></li>
   <li class="page-item"><a class="page-link" href="#">4</a></li>
   <li class="page-item"><a class="page-link" href="#">5</a></li>
   <li class="page-item"><a class="page-link" href="#">次へ &raquo;</a></li>
</ul>
ここで記述している内容は、概ね下記の3種類です。

  1. 全体を <ul class="pagination"> ~ </ul> で囲む。
  2. ボタン1つずつを <li class="page-item"> ~ </li> で囲む。
  3. ページ移動ボタンはa要素で作り、class名に「page-link」を加える。

上記のソースでは両端に「前へ」と「次へ」ボタンを加えていますが、不要なら削除しても問題ありません。ブラウザで表示すると下図の上側のように見えます。

Bootstrap4で作成できるページ移動用ボタン群

Bootstrap4で作成できるページ移動用ボタン群


なお、上図の下側のように、現在位置を示すにはli要素にclass名「active」を加えます。また、ボタンをクリックできなくしたい(=無効にしたい)場合にはli要素にclass名「disabled」を加えます。
<ul class="pagination">
   <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">←前のページ</a></li>
   <li class="page-item active"><a class="page-link" href="#">1</a></li>
   <li class="page-item"><a class="page-link" href="#">2</a></li>
   <li class="page-item"><a class="page-link" href="#">3</a></li>
   <li class="page-item"><a class="page-link" href="#">次のページ→</a></li>
</ul>

大きさを指定したいとき
ページ移動用ボタン全体を大きくしたい場合や小さくしたい場合は、外側のul要素に対して下記のようなclass名を付加します。
大きく: <ul class="pagination pagination-lg"> ~ </ul>
小さく: <ul class="pagination pagination-sm"> ~ </ul>

配置を指定したいとき
標準では左寄せで表示されますが、ページ移動用ボタンの場合は中央寄せで表示したり右寄せで表示したい場合もあるでしょう。その際は、外側のul要素に対して下記のようなclass名を付加します。
中央寄せ: <ul class="pagination justify-content-center">
右寄せ: <ul class="pagination justify-content-end">

ボタンにアイコンを加えたい場合は

ボタンにアイコンを加えたい場合はFont Awesomeなどの外部ライブラリを併用

ボタンにアイコンを加えたい場合はFont Awesomeなどの外部ライブラリを併用する

Bootstrap3までは、Glyphiconsというアイコンフォントが含まれており、ボタンに豊富なアイコンを表示できました。Bootstrap4ではGlyphiconsアイコンフォントが廃止されたため、そのままでは従来のようなアイコンを付加できません。

しかし、Font Awesomeなどの外部ライブラリを併用すれば、図のようにアイコンを加えられます。詳しくは、記事「アイコンをWebフォントで表示! Font Awesomeの使い方」の解説をご参照下さい。

ボタンも簡単に作れるフレームワークBootstrap4

上記でご紹介したように、Bootstrap4はテキストリンクをボタン型にも装飾できる便利なフレームワークです。スマートフォンやタブレットはもちろんですが、最近ではノートPCでもタッチ型ディスプレイを備えた製品が多々あります。ウェブ上のリンクは、ボタン型の方が押しやすくて便利でしょう。ぜひ試してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。