LoginSignup
146

More than 5 years have passed since last update.

lessがわからない人のBootstrap簡単カスタマイズ方法

Last updated at Posted at 2014-03-12

はじめに

デザインに手をかけず、とりあえずアプリを動かすためにBootstrapを使っています。
デフォルトのまま使えるかと思ったら、やっぱりちょこちょこ調整したくなったのでメモ。

2つのやり方

場合によって次のやり方を使い分けています。使い分けは後述します。

CSSを上書きする

カスタマイズ用のcssファイルを作ってbootstrapのCSSより後から読み込みます。

<!-- Bootstrap -->
<link href="/xxx/public/bootstrap-3.0.3-dist/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- カスタマイズ用CSS -->
<link rel="stylesheet" media="screen" href="/xxx/public/stylesheets/bootstrap-custom.css">
<link rel="stylesheet" media="screen" href="/xxx/public/stylesheets/my.css">

カスタマイズ用CSSは2つに分けています。
bootstrap-custom.cssは、全体に適用するものを書きます。
my.cssは一部分だけ(このdivの中身だけ変えたい)というものを書きます。
Bootstrapのデフォルトと異なるスタイルを適用しているのが全体なのか一部なのか意識するためです。

公式サイトのCustomize and downloadを使う

ここでlessの変数を変更すると、それを反映したcssがダウンロードできます。
変数がたくさんあってくじけそうになりますが、必要なとこだけ変更すればいいので大丈夫です!

customize.png

全体的にフォントサイズを変えたい

Customize and download@font-size-baseを変更します。
Less variablesの配下のTypographyの中にあります。
Bootstrapでは@font-size-baseを元にしてH1~H6などのサイズを相対的に決めていますので、1か所変えるだけで全てのフォントサイズが変更できます。

fontsize.png

全体的にフォントの種類を変えたい

これもフォントサイズと同様に、Customize and downloadを使います。
@font-family-baseでフォントの種類が決まるのですが、@font-family-baseがさらに@font-family-sans-serifを参照しているのでこちらを変更します。
次の例はMeiryo UIを追加しているところです。

font.png

全体的にxxxを変えたいんだけどCustomize and downloadで設定できないよ?

lessの変数になっていない項目は、CSSを上書きします。
たとえばTooltipの色やフォントサイズを変える等。

bootstrap-custom.css
/* ツールチップ  */
.tooltip > .tooltip-inner {
  background-color: #d9534f;
  font-size: 16px;
  font-weight: normal;
}
.tooltip.top > .tooltip-arrow {
  border-top-color: #d9534f;
}

部分的にxxxを変えたい

たとえば、サイト内にあるテーブルのうち、ある1つのテーブルのスタイルだけを変えたいといった場合、cssを上書きします。
部分的な適用であることを意識するために、my.cssに書いておくといいでしょう。

my.css
/* テーブル */
.my-table .table-hover tbody .tr-pointer:hover td {
  background-color: #AFEEEE;
  cursor: pointer;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
146