Bootstrapをカスタマイズする上で必ず知っておきたい考え方

スポンサーリンク

最近Bootstrapを使う機会が増えたので、カスタマイズする上で知っておきたい考え方を紹介します。
今回は特にCSSについてのお話です。

Bootstrapのカスタマイズパターン

現状、CSSのカスタマイズ方法として考えられるパターンが3つあります。

梅パターン

すでに用意されているスタイル・コンポーネントをそのまま使う。

定義済みの スタイルコンポーネント の組み合わせにより、ページを作成します。配置するのみ。
見た目のカスタマイズができないので、簡素でオリジナリティの無いデザインになります。
ザ・Bootstrap。

竹パターン

すでに用意されているスタイル・コンポーネントをカスタマイズして使う。

定義済みのCSSを継承(上書き)して、元のデザインを変更します。
少ない作業で効率的にコーディングができます。

松パターン

すでに用意されているスタイル・コンポーネントをカスタマイズしつつ、
Bootstrapで用意されているAPI(Sass, Less)を使ってカスタムコンポーネントを定義する。

前述の松パターンに加えて、既存コンポーネントから独自コンポーネントを作ることができます。
機能は同じだけど、クラス名を変更したコンポーネントを作れたり、グリッドシステムを自作できたり。

CSSプリプロセッサをわかってないとカスタマイズできないので、難易度高め。

どのカスタマイズパターンがいいのか

一番効率的なパターンはズバリ「竹パターン」ですね。

  • 元々あるスタイルを生かせるから、作業が早い。楽ができる
  • 柔軟にデザインを変更できる
  • 複雑にならない
  • メンテナンスしやすい

Bootstrapデモサイト

以前 creive さんで、竹パターンを使用して実際にポートフォリオサイトを作る記事を書かせてもらいました
カスタマイズの具体的なイメージができると思うので、ぜひ参考にしてみてください。

技術的に見た目安としては、

梅: 初心者
竹: 中級者
松: 中級〜上級者

と考えておくと良いと思います。

CSSを変更するにはどうするか

では具体的にCSSを変更する方法を説明します。

まず、head内でbootstrap.css を読み込みます。

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">

bootstrap.css がBootstrapのメインのCSSファイルです。

CSSをカスタマイズしていくには、このベースのCSSを上書きしていきます。
必ず bootstrap.css とは別に、上書き用のCSSファイルを用意しましょう。

<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

この例では、style.css に上書きするCSSを書いていきます。
編集用ファイルを分けることで、カスタマイズした箇所がすぐにわかりますし、複数人で作業するときも共有しやすいです。

style.css

.btn-blue {
    background-color: blue;
}

アンチパターン

Bootstrapのクラスを直接上書きしてしまうのは、一番悪いパターンです。

例えばBootstrapには Jumbotron という主要コンテンツ紹介のコンポーネントがありますが、
この .jumbotron というクラスをCSSセレクタに指定してしまうのは、後で自分が困ります。

/* ダメ、絶対 */
.jumbotron {
    width: 800px;
}

初期のスタイルを変更してしまうと、サイト全体でスタイルを変更してしまうことになり、
後で初期スタイルのコンポーネントを使えなくなってしまうんですね。
元に戻すのも、上書きしたCSSを打ち消さなければならないため、指定が複雑になってスパゲッティになるのが目に見えます。

クラスを複数付与して、上書きするのが一番スマートです。

html

<div class="jumbotron jumbotron--extend">
   ...
</div>

css

.jumbotron--extend {
    width: 800px;
}

フレームワーク構造を理解するのが一番の近道

Bootstrapの構造の理解が、カスタマイズの柔軟性を広げます。
やみくもに使うのではなく、フレームワークの特性をきちんと抑えておくことが重要です。

スポンサーリンク