フロント開発時によくお世話になるBootstrap。CSSやjsの要素がパーツ化されているのでしっかりしたUI/UXを爆速で作ることができます。
ただ、用意されているコンテンツやコンポーネントをそのまま利用するとどうしてもBootstrapぽさ、Bootstrap臭みたいなものが残ってしまい、あまりオリジナリティのある見た目のサイトにはなりません。
これを解消するために私がよくやっている方法を紹介します。
基本的な方針
しっかりとBootstrapに則って（Bootstrapで規定されているclassを利用して）HTMLを組んでいれば、そのサイトの見た目は読み込んでいるbootstrap.min.cssに完全に切り出されているはずです。
この状況であれば、このbootstrap.min.cssファイルをBootstrapを基にカスタマイズされたCSSファイルに置き換えることでHTML構造に影響を与えることなく見た目を切り替えることができます。
この置き換えるためのCSSファイルを取得したり作ったりできるサイトがあるので、いくつか紹介します。
予めカスタマイズされたCSSファイルを利用する
これは予めBootstrapを基に見た目がカスタマイズされたCSSファイルを取ってくるやり方です。下記2つのサイトがおすすめです。
hackerthemes
- 無料版でもCSSファイルのダウンロードにはFacebookかtwitterでの拡散が必要です。
- 有料版もありますが無料版のものだけでもけっこう使えます。
bootswatch
- 無料版は制限なくダウンロードできます。
- CDN版も提供されているので、自らファイルを保持する必要もありません。
https://cdnjs.com/libraries/bootswatch
Bootstrapベースで自分でカスタマイズする
これはBootstrapベースで色やサイズなどを自分好みに変更し、出来上がったCSSをCSSファイルとしてダウンロードして利用するという方法です。
リアルタイムで見た目を確認しながら作業を進められるので、どんなデザインにしたいかイメージがある程度固まっている場合におすすめです。
bootstrap.build
- 作成途中のCSSデザインが実際にどのようにサイトの見た目として反映されるのかを、Previewから様々なHTMLのパターンから選択して確認することができます。
- コンテンツやコンポーネントのHTMLも確認できます。
pikock.github.io
- 上記のサイトよりもシンプルな機能で、同様にCSSファイルをエクスポート可能です。
bootstrap-live-customizer
- Bootstrap4未対応なのであまりおすすめできませんが、一応載せておきます。