Jump to the content

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

Bootstrap

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

注目記事

最近の記事

ぼくが書いてます

イソップ

フロントエンドエンジニア

イソップ

ページの先頭に戻る

Search results

×