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

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

---

---

        <p>Habakiri には汎用的に使える固有の CSS クラスがいくつか用意されています。</p>

.section

ワンページデザイン等でセクションを区切りたいときに余白を確保するためのクラスです。

サンプルコード

<div class="section">
<p class="text-center">サンプルです</p>
</div>

<section class="section">
<h1 class="text-center">サンプルです</h1>
<p class="text-center">サンプルです</p>
</section>

表示サンプル

サンプルです

サンプルです

.section .section__title

セクションにタイトルをつけるときに良い感じに表示するクラスです。デフォルトのh1だとサイズが大きいので少し小さめで、中央揃えになるように調整してあります。

サンプルコード

<section class="section">
<h1 class="section__title">タイトル</h1>
<p class="text-center">サンプルです</p>
</section>

表示サンプル

タイトル

サンプルです

.section.section–image

セクションに背景画像を設定するときに良い感じにサイズを調整するクラスです。

サンプルコード

<div class="section section--image" style="background-image:url( url )">
<h1 class="section__title">タイトル</h1>
<p class="text-center">サンプルです</p>
</div>

表示サンプル

.section.section–fixed

セクションに背景画像を設定するときに背景画像を固定するクラスです。

サンプルコード

<div class="section section--image section--fixed" style="background-image:url( url )">
<h1 class="section__title">タイトル</h1>
<p class="text-center">サンプルです</p>
</div>

表示サンプル

.jumbotron .btn-default

.jumbotronは Bootstrap 固有のクラスですが、その中にこちらも Bootstrap 固有のクラスである.btn-defaultを配置したときに、流行りのゴーストボタンなデザインになるように調整しています。

サンプルコード

<div class="jumbotron section--image" style="background-image:url( url )">
<h1 class="text-center">タイトル</h1>
<p class="text-center">サンプルです</p>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<a class="btn btn-default btn-block">ボタン</a>
</div>
</div>

表示サンプル

        <!-- end .entry -->