• ボタンのHTMLタグ
• オプション
• サイズ
• アクティブ状態
• 無効状態

ボタンのHTMLタグ

<a>、<button>、<input>要素に、ボタン用のクラスを使用します。

Link Button

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

特定の場所(コンテキスト)での使用
ボタンのクラスは<a>と<button>要素で使用することが出来ますが、 <button>要素だけがnavとnabvarコンポーネントでサポートされます。

リンクをボタンとして動作させる
もし、<a>要素を、別のドキュメントや現在ページのセクションへのナビゲーションとしてではなく、 ページ内の機能をトリガするようなボタンとして動作させている場合、 適切にrole="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">Info</button>

<!-- このアクションに対して注意を払うべきとして警告を示します -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- 危険または後ろ向きなアクションを示します -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- ボタンの挙動を残しつつ、見た目をリンクにすることでボタンの強調を抑えます -->
<button type="button" class="btn btn-link">Link</button>

支援技術に対して意図を伝える
色を使用することでボタンに意味付けすることは、あくまで視覚的な指示を提供するだけであり、 スクリーン・リーダーのような支援技術を使用するユーザーにその意図は伝達されません。 色で表現される意図を、コンテンツ自身からそれが明確に伝わるようにするか(ボタンの可視テキスト)、 .sr-onlyクラスを使用した非表示テキストを追加するなど、 いずれかの対策を行ってください。

サイズ

大きいボタンが好みですか?または小さいボタンが良いですか? .btn-lg、.btn-sm、.btn-xsを追加することで、サイズを調整することができます。

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

.btn-blockを追加することで、親要素の幅いっぱいに拡がるブロック(レベル)要素のボタンを作成します。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

アクティブ状態

アクティブ時、ボタンは押された(凹んだ)表現になります。 (背景とボーダーがやや暗くなり、内側に影ができます) <button>要素では、:activeを介してこれが行われます。 <a>要素では、.activeを使用してこれを行います。 ただし、アクティブ状態をプログラム的に再現する必要がある場合には、 <button>上で.activeを使用しても構いません。 (そして、aria-pressed="true"属性を含めます)

ボタン要素

擬似クラスとしての:activeの追加は不要ですが、同じ外観にすることを強制させる必要がある場合は、 .activeを追加しても構いません。

Primary button Button

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

アンカー要素

<a>ボタンへ.activeクラスを追加します。

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

無効状態

opacityを使用して色褪せた見た目にすることで、ボタンがクリック不可であるかのように表現します。

ボタン要素

<button>ボタンへdisabled属性を追加します。

Primary button Button

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

クロスブラウザの互換性
IE9以下では<button>へdisabled属性を追加すると、 醜い(?)テキストシャドウによってテキストがグレーで描画されてしまい、これは解決することが出来ません。

アンカー要素

<a>ボタンへ.disabledクラスを追加します。

Primary link Link

ここでは.activeと同様に汎用クラスとして.disabledを使用しています。 そのため接頭辞は必要ありません。

 Back to top