デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2017年12月07日 CSS

まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

Bootstrapの使い方第二弾!

先日、Bootstrapの使い方についてまとめてみましたが、いかがでしたか?

まだ、読んでいない方は以下より一度読んでみて下さい

でも、この記事で説明していることは基本的なことです。今回は更に詳しくBootstrapの使い方を解説していきたいと思います。

テーブルにBootstrapのスタイルを付与

テーブルにもclassをつけることでブートストラップを適用させることができます。

設定方法は以下のように、<div>にclassでcontainerを設定します。ここは前回と同様ですね。

そして、<table>タグにclassでtableを設定します。

<div class="container">
<table class="table">
...
</table>
</div>

たったこれだけで、以下のように<table>タグがBootstrapのデフォルトスタイルになります。

123
123
123

tableにヘッダーをつけよう

やり方は簡単で

内を以下のようにとに<thead>で分けて<td>の代わりに<th>タグにするだけです。

厳密に言うと<th>タグを入れるだけで見出しのスタイルにはなりますが、<thead>でヘッダー部分のみ囲うことでCSSでの設定がしやすくなるため、一般的には<thead>タグで囲います。

<div class="container">
<table class="table">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
</div>

このようにするだけで、以下のように<table>タグに見出し行ができますね。

123
123
123

1行置きに色を変えてみましょう。

以下のように<table>タグにtable-stripedというclassを追加することで色を変えることができます。

<table class="table table-striped">

すると以下のように表示されますよね?

123
123
123
123
123
123

テーブルに枠をつけてみましょう。

テーブルに枠を付ける方法は、tableタグにtable-borderedというclassを入れます。

<table class="table table-bordered">

すると、以下のように表示されます。(1行おきに色付けの設定もしています。)

123
123
123
123
123
123

これだけではありません。その他に以下のclassをtableに設定することで任意のスタイルを付与することができます。

class名付与スタイルの内容
table-hoverマウスオーバーした時に背景色を変える
table-smセルの行間を狭めることができる
table-responsiveテーブルをスマホ対応化(768px未満でスクロールバー表示)

さらに背景色を変更できます。

class名付与スタイルの内容
table-activeマウスオーバーした時のデフォルト背景色(グレー)
table-success
table-info
table-warning黄色
table-danger

Bootstrapのバージョンが古いと色が表示されないようですので、必ず最新版にてお試しください。

ボタンにBootstrapのスタイルを付与

<button>に何もスタイルをいれないと以下のように、お世辞にもおしゃれといえないボタンが表示されます。

普通であれば、CSSでひとつひとつ設定をして見た目を調整していくものですが、Bootstrapを使えばとても簡単に以下のようなボタンを作ることができます。

 

 

※Bootstrapのバージョンにより見た目は変わります。古いバージョンのBootstrapではグラデーションがかかる等、当時の最新のデザインがBootstrapで設定をされています。

タグは以下の通りになっています。

<button class="btn btn-secondary">デフォルト</button>
<button class="btn btn-primary">主要</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-info">情報</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">エラー</button>
<button class="btn btn-link">リンク</button>

ボタンのサイズ変更

ボタンのサイズは、classを設定することで変更することができます。

class名付与スタイルの内容
btn-lg大きいサイズ
btn-sm小さいサイズ

※以前のバージョンでは.btn-xsという更に小さいサイズのボタン用classが存在していましたが、2017年10月19日更新分のBootstrapより廃止となりました。

ボタンをボックスの最大幅で表示

通常のボタンでは、文字サイズ分の幅がボタンのサイズになりますが、.btn-blockを使うことで親ボックスサイズのボタンを設置することができます。

<button type="button" class="btn btn-primary btn-block">親ボックスフルWidthボタン</button>

上記を記述することで以下のように表示されます。

その他の設定

さらにBootstrapでは、以下のような設定ができます。

class名付与スタイルの内容
active選択した時の状態にする
disabledボタンを無効化状態にする

フォームにBootstrapのスタイルを付与

Bootstrapのフォーム用スタイルを反映させるために、以下の通り

タグ内にform-groupというclassを設定します。

<form>
<div class="form-group">
...
</div>
</form>

この時に中に入れるinputタグにはclassにはform-controlを設定して下さい。

<input type="text" class="form-control">

テキストの横にフォームを並べたい場合

フォームをテキストラベル等の横に表示させたい時は以下のように記述します。

<form class="form-inline">
<div class="form-group">
<label>お名前</label>
<input type="text" class="form-control" placeholder="ぷれえすほるだぁ">
</div>
</form>

すると以下のように表示されます。

各inputタイプのclass設置方法

テキスト

<input type="text" class="form-control">

textarea

<textarea class="form-control" rows="3"></textarea>

チェックボックス/ラジオボタン(form-control設定なし)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    チェックボタン
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" value="">
    ラジオボタン
  </label>

セレクトボックス

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

その他設定

使用禁止

<input class="form-control" type="text" value="使用禁止" disabled>

読み専用

<input class="form-control" type="text" value="読み専用" readonly>

ヘルプテキスト

<div class="form-text">ヘルプテキスト</div>
<span class="text-muted">ヘルプテキスト</span>

サイズを変更

<input class="form-control input-lg" type="text">
class名付与スタイルの内容
input-lg大サイズ
input-sm小サイズ

まだまだ設定はありますよ!

Bootstrapを使うことでこの記事の通り、各タグが最適化されるため、最低限のデザインができた状態まですぐに持っていくことができます。要するにBootstrapさえ使ってしまえば、「後は自分の色を出すだけ!」という状態まで近道をすることができるということです。

今回はここまでですが、あと1回分Bootstrapに関する記事を投稿したいと考えています。

次回になるか近日中になるかはネタ次第ですが、Bootstrap完結編を作りたいと思いますのでご期待ください!


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月10日コレで完結!Bootstrapの使い方3
2017年12月01日スマホサイト構築に便利!Bootstrapの使い方まとめ その1
2017年01月01日CSSで四則計算!CSS calcの使い方

コメント(ブログサークルアカウントが必要です。)

  • Facebookページ
  • 公式twitterアカウント