Habakiri は Bootstrap ベースの WordPress テーマなので、Bootstrap の CSS を使用することができます。ここでは良く使う便利な Bootstrap の CSS をご紹介します。

ボタン

a、button、input[type="button"]、input[type="submit"]は、.btnというクラスを付けることでボタンのスタイルを適用することができます。

<a class="btn btn-default">リンク</a>
<button class="btn btn-default">button</button>
<input type="button" class="btn btn-default" value="input">
<input type="submit" class="btn btn-default" value="submit">

リンク button

.btnには6つのカラーリング用のクラスが用意されています。通常、.btnとあわせていづれかを指定します。

<a class="btn btn-default">default</a>
<a class="btn btn-primary">primary</a>
<a class="btn btn-success">success</a>
<a class="btn btn-info">info</a>
<a class="btn btn-warning">warning</a>
<a class="btn btn-danger">danger</a>

default primary success info warning danger

また、.btn-blockを加えることでブロック要素にすることもできます。

<a class="btn btn-primary btn-block">btn-block</a>

btn-block

テキスト背景

bg-*というクラスをつけることで背景色をつけることができます。*の部分にはカラーリングの指定が入ります。.btnのものと同様です。デフォルトでは余白は入らないので、適当に余白を入れると良いと思います。

<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>

bg-primary

bg-success

bg-info

bg-warning

bg-danger

グリッドシステム

Bootstrap で一番便利だと思うのはこのグリッドシステムです。グリッドシステムは何かと言いますと、画面上に仮想のガイドラインを設定し、それに合わせてカラム分割を行うシステムのことです。Bootstrap のデフォルトでは仮想的に12のグリッドが設定され、そのカラムをいくつ使う、という指定をすることでカラム分割を実現します。

下記は.col-md-6、.col-md-4、.col-md-2という3つのカラムに分割する例です。.col-md-6のmdがPCサイズ以上の場合という指定、6が6つのグリッドを使うサイズ、という意味です。それぞれのカラムは.rowで囲むというルールがあります。

<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-2">col-md-2</div>
</div>

mdの部分を変更することで、カラム分割を行うデバイスサイズを変更できます。smとすることでタブレットサイズ以上、xsでスマホサイズ以上、lgでワイドサイズのPC以上、となります。

カラムは入れ子にできたり、デバイスサイズによって使用するグリッドのサイズを変更したり、オフセットを指定したり、ここで紹介しているより、もっといろいろなことができます。詳しくは公式サイトでご確認ください。

テキストの行揃え

.text-left、.text-center、.text-rightでテキストの行揃えを指定できます。

<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>

text-left

text-center

text-right

画像の装飾

画像を、角丸、円形、ボーダー付きに装飾できます。

<img src="url" class="img-rounded" />
<img src="url" class="img-circle" />
<img src="url" class="img-thumbnail" />

表の装飾

横線のみの装飾。table.table

見出し	見出し	見出し	見出し
項目	項目	項目	項目
項目	項目	項目	項目
項目	項目	項目	項目

しましまの装飾。table.table.table-striped

見出し	見出し	見出し	見出し
項目	項目	項目	項目
項目	項目	項目	項目
項目	項目	項目	項目

縦横線の装飾。table.table.table-bordered

見出し	見出し	見出し	見出し
項目	項目	項目	項目
項目	項目	項目	項目
項目	項目	項目	項目