最近Bootstrapを使う機会が増えたので、カスタマイズする上で知っておきたい考え方を紹介します。
今回は特にCSSについてのお話です。
Bootstrapのカスタマイズパターン
現状、CSSのカスタマイズ方法として考えられるパターンが3つあります。
梅パターン
すでに用意されているスタイル・コンポーネントをそのまま使う方法。
定義済みの スタイル や コンポーネント の組み合わせにより、ページを作成します。配置するのみ。
見た目のカスタマイズができないので、簡素でオリジナリティの無いデザインになります。
ザ・Bootstrap。
竹パターン
すでに用意されているスタイル・コンポーネントをカスタマイズして使う方法。
定義済みのCSSを継承（上書き）して、元のデザインを変更します。
少ない作業で効率的にコーディングができます。
松パターン
すでに用意されているスタイル・コンポーネントをカスタマイズしつつ、
Bootstrapで用意されているAPI（Sass, Less）を使ってカスタムコンポーネントを定義する方法。
前述の松パターンに加えて、既存コンポーネントから独自コンポーネントを作ることができます。
機能は同じだけど、クラス名を変更したコンポーネントを作れたり、グリッドシステムを自作できたり。
CSSプリプロセッサをわかってないとカスタマイズできないので、難易度高め。
どのカスタマイズパターンがいいのか
一番効率的なパターンはズバリ「竹パターン」ですね。
- 元々あるスタイルを生かせるから、作業が早い。楽ができる
- 柔軟にデザインを変更できる
- 複雑にならない
- メンテナンスしやすい
以前 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-submit {
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の構造の理解が、カスタマイズの柔軟性を広げます。
やみくもに使うのではなく、フレームワークの特性をきちんと抑えておくことが重要です。
