BootstrapでスピーディーにレスポンシブWebデザイン

ボタンについて

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルコードにはボタンが配置されています。aタグに対してふられているClassを変更してどんなものがあるか見てみましょう。
講師:
08:44

字幕

Bootstrap で用意されているジャンボトロンを挿入するとここに Learn more とボタンがありますね。Bootstrap ではボタンも様々なタイプが用意されています。このサンプルページを見てみると色や、ここを見るとボタンもいろいろな色や大きさがあることがわかりますね。この様に調整するにはどうしたらいいのでしょうか。まずはこちらBootstrap のページからCSS をクリックしてButtons右側のメニューの Buttonsをクリックします。そうすると、一覧があります。Default Primary Success InfoWarning Danger Link とあります。この Primary というのを指定すると青くなるようです。テキストエディターでももう一度見てみるとここに a class="btn" の後ろbtn-primary とありますね。では例えばここを Danger にしてみたらどうなるのでしょうか。早速書き換えてみたいと思います。これでファイルを保存して「レッスンページ」を更新してみましょう。赤くなりましたね。この様に様々な色がここで調整できます。意味合いがしっかりしてるのも良いですね。 基本的には Default や Primaryを使い、うまくいった時Information の時警告、危ない時など意味づけされているのでとても使いやすいです。そして更にサイズもあります。先程のテキストエディターにあるクラスはbtn-lg でした。ここも btn-lg となっていますね。一番上のものなのでこのぐらい大きいものです。サイズを変えたい時はここを見てbtn の sm や xs丁度上から2番目のものはデフォルトのサイズの様なので何も指定しないとこのサイズになるんですね。ではこの xs 小さいボタンに変えてみましょう。これをコピーしておいてテキストエディターを開きここを xs に変更します。ファイルを保存して「レッスンページ」を更新します。小さくなりましたね。これでサイズと色を変更することが可能です。テキストエディターに戻ります。サイズを戻しておきましょう。Bootstrap のボタンにはこの様に幾つかのサイズがあるので非常に使いやすいです。また、下を見ていくとbtn-block というのを使うことによってこの様な見た目を実装できるようです。これも真似してコピーして貼り付けてみましょう。 テキストエディターを開いてこの btn-lgこの後ろにスペースをこの様に押してPasteこれで保存をしてみます。「レッスンページ」はどのように変わるのでしょうか。この様に幅がこの文字に合わさって綺麗になりましたね。幅でピッタリ合わせたい時Large でも足りない時はこれを使うと非常に便利です。更に見ていきましょう。後は、この様に押されたような見た目にすることも可能なようです。active とありますね。これをコピーして、更に足してみましょう。コピーをしてまた btn-block の後ろにSpace を押して貼り付け先程のように保存してまた「レッスンページ」を更新します。この様に色味が変わりましたね。ここで解説している様に押されている状況を表示させる時にもこの見た目が使えます。他にも様々ありこの様にボタンを押せませんよという見た目の時は、ここdisabed="disabled"にすれば OK です。しかしこれはボタンの時の見た目です。今私たちが操作しているのはここを見るとa タグですね。a タグでそのような見た目にしたい時はこちらクラスを足すと良いようです。コピーしてテキストエディターに戻り貼り付けをします。 active ではないので一度削除して Pasteファイルを保存してもう一度ブラウザーを更新してみます。この様に薄くなってマウスカーソルもこの様に変わりません。こうすることでボタンの様々な情報を見せることができます。予め用紙されているので非常に便利です。また CSS などがいじれるようになるとこちらの色も自分でかえることができるようになります。厳密には CSS をそのまま編集するのではなくLess というプログラムファイルが必要です。Less によって、この様に設定をした後その Less ファイルというのをCSS に変換するということが必要です。もし興味がある人はLess 等で検索してみると良いでしょう。こちらのページです。ここに様々な方法などがありますので見ておくこともお薦めしておきます。Bootstrap のページに戻りましょう。そういえば、こちらのボタン一番最初に見たこのプックリした形とちょっと違いますよね。この様に立体的に表示させたい場合は新たに CSS を読み込む必要があります。テキストエディターに戻りCSS を追加しましょう。追加する CSS は この中のこちらです。bootstrap-theme.cssこちらと、この min改行などを圧縮して、より軽量化したものがmin になっています。 内容は同じなので読み込む場合はどちらでも大丈夫です。ではこのファイル名をコピーしておきここに読み込みをしましょう。コピーをして貼り付けをします。そして予めコピーしておいたものをカットしてここですね。ここに貼り付けます。これで準備が OK です。ファイルを保存します。この様な見た目にしたいんですよね。「レッスンページ」今この様な形です。このままじゃ分かりづらいので一度戻しておきます。ここを primary青いやつですね。そして block と disabled は不要なので削除してもう1度保存この状態で更新するとここのように青くてプックリしたものになります。では更新してみましょう。更新できました。こんな形でプックリした見た目になっていますね。CSS を除外してみるとこの様に見た目が変わります。この theme.css というのは基本的にこういった見た目をプラスアルファするものなのです。ちょっと見た目を変えたい時等はこの様に使ってみると質感を変えられてとても楽しいです。このレッスンでは、このボタンの使い方について紹介しました。

BootstrapでスピーディーにレスポンシブWebデザイン

Twitter社が提供するBootstrapは、よく使うテンプレートをまとめてCSSを読み込むだけですてきなスタイルを適用できるとても優れたフレームワークです。このコースではBootstrapについて解説しながら、その簡単な使い方やlessによる便利なスタイルのカスタマイズ方法について紹介します。

2時間22分 (21 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。