こんにちは！ 森和恵です。暑いですね。梅雨も明けてようやく夏本番ですね。この週末には、恒例のガレージキットのイベント“ワンダーフェスティバル”（通称“ワンフェス”）が開催されましたね。
アニメ好きなわたしは、自分の好きなキャラクターの“ねんどろいど”という可愛いフィギュアを集めています。まだ、13体ぐらいしか持っていないライトユーザーですけれど、この趣味がこうじて、一度はワンフェスに参加してみたいものだなぁ……と思い続けています。
夏・冬と開催されますが、毎年仕事の落ち着く時期とずれてしまって、まだ一度も参加したことはありません。開催されるたびに「行きたい」と言っているので、そろそろ“参加するする詐欺”になりそうです。
Gigazineさんが、リアルタイムで会場の様子を伝えてくれるので、その記事を読むのを楽しみにしています。今年もすでにたくさんのレポートがあがっていますよ。
なかでも今年欲しいなと思ったのが、“figma（フィグマ）”から発売が発表されたダライアスの“アイアンフォスル”。3画面の筐体でプレイしたダライアスのあの魚をお家にかざれるかもなんて……。楽しみですね。
【レトロなゲーセンのパックマン・ギャラクシアン・ギャラガの筐体を12分の1サイズでミニチュア化】
http://gigazine.net/news/20160724-mini-game-center-wf2016s/
さてさて。今回は、Bootstrapの3回目です。
前回は、<h1> や <p> など基本タグに付加されたスタイルを確認しました。Bootstrapを割り当てただけで、基本タグに下地となるデザインが付いていて便利でしたよね。
【Bootstrapの使い方をまとめてみた（2）】
https://bn.dgcr.com/archives/20160613140100.html
今回は、ボタンに付加するスタイルを見ていきます。以下のURLで、Bootstrap使用後のコードを見ながら、動作を確認してみてください。
http://r360studio.com/dgcr/bootstrap/step3.html
●ボタンスタイルの基本
<a>、<button>、<input> 要素のclass属性に「btn」を指定すると、ボタンのベーススタイルが適用されます。この設定は必須です。それに加え、ボタンの用途に合わせて、以下のオプションスタイルを適用します。
デフォルトのスタイル（白色） btn-default
主要・基本・初期値のスタイル（青色） btn-primary
成功時のスタイル（緑色） btn-success
情報のスタイル（水色） btn-info
注意時のスタイル（オレンジ色） btn-warning
警告時のスタイル（赤色） btn-danger
リンクのスタイル（デザインなし） btn-link
例えば、『警告ボタン』の場合は下記のように指定します。ボタンの背景が赤色になり目立つようになりました。
<a class="btn btn-danger" href="#">Button</a>
●ボタンのオプションスタイルは、“色指定”ではない！
オプション指定で注意しておきたいのが、ボタンの用途に合わせて選ぶことです。“ボタンを可愛くしたくて赤色にデコレーションしたいから”という理由で、警告時のスタイルを選んではいけません。意図しない意味がボタンについてしまうからです。
Bootstrapのデザインを好きなように書き換えたい場合は、独自のクラススタイルを用いて指定します。
.btn-mystyle{
color:#FFFFFF;
background-color:#FA56FF;
}
という具合にクラスを作成し、
<a class="btn btn-mystyle" href="#">Mystyle Button</a>
と、Bootstrapのオプションスタイルの代わりに指定します。
ボタンだけではなく、Bootstrapのデザインを独自にカスタマイズする方法については、いろいろと手順や手法があり、また回を改めてお話する予定です。
●ボタンのサイズオプション
さて、次はサイズを変更するオプションスタイルです。
大きい btn-lg
小さい btn-sm
特別に小さい btn-xs
例えば、『特別に小さい（Extra Small）』は下記のように指定します。ボタンが標準のサイズよりもかなり小さいボタンになりました。
<a class="btn btn-default btn-xs" href="#">Extra Small Button</a>
親要素にあわせて幅100%に固定する（ブロック指定する）には、btn-block スタイルを付加します。
例えば、<p>要素を親にして幅100%に固定するには、下記のように指定します。親要素の<p>に指定したスタイルに合わせてボタンサイズも変化します。
<p style="width:50%;"><a class="btn btn-default btn-block" href="#">Button</a></p>
●ボタンの状態を表すスタイル
その他にも、ボタン操作の状態を表すスタイルが準備されています。
アクティブスタイル（押した状態） active
ディセイブルスタイル（無効状態） disabled
例えば、『押せないボタン』を指定する場合は、下記のように指定します。ネットショップなどで在庫切れでいまは購入をストップしたい時のスタイルに使うとよいですね。
<a class="btn btn-default disabled" href="#">Disabled Button</a>
今回は、ボタンのスタイルと使い方を説明してきました。ほぼ全部紹介していますが、詳しい説明を確認したい場合は、下記の公式サイトページに掲載されていますので参考にしてください。
【Bootstrap Buttons】
http://getbootstrap.com/css/#buttons
……というわけで、今回はこの辺で。
さて、次回も基本タグの発展系で、フォームに付加されるスタイルを確認していきます。まとめてどさっと行けそうかなと思った、基本タグのスタイルですが、オプションを深堀りすると思ったより内容が多そうなので、ゆっくり進みますね。
ではでは、また！(^^)
【森和恵 r360studio 〜 Web系インストラクター 〜】
site: http://r360studio.com
mail: r360studio@gmail.com
Twitter: http://twitter.com/r360studio
web系の担当講座、8・9月分を好評受付中です。まだ発表は先ですが、9月30日に恒例の秋の無料セミナーを実施予定です。発表は、8月3日！ すぐ満席になるので、お見逃しなく。
http://r360studio.com/seminar/