BootstrapのCSSはLessによって構築されています。 LESSとは、CSSをコンパイルするための変数、mixin、関数のような追加機能を持つCSSプリプロセッサと呼ばれるものの1つです。 コンパイルされたCSSファイルの代わりに、元となるLessファイルを使用すると、 フレームワーク全体を通して使用されている多くの変数とmixinの使用が可能となります。

グリッド変数とmixinは、グリッドシステムのセクションで説明されています。

• Bootstrapのコンパイル
• 変数
• ベンダーmixin
• ユーティリティmixin

Bootstrapのコンパイル

BootstrapにはコンパイルされたCSSを使用する方法と、元となるLessファイルを使用する方法の、 少なくとも2つの方法を選ぶことができます。 Lessファイルをコンパイルするには、Bootstrap入門のセクションを参照して、 開発環境で実行が必要となるコマンドの設定方法を確認してください。

サードパーティ製のコンパイルツールをBootstrapで使用しても構いませんが、 それらはBootstrapのコアチームでサポートされません。

変数

変数はプロジェクト全体を通して色やスペース、フォントなどを集中化して共有できる値とするために使用されます。 詳細な内訳については、カスタマイザーを参照してください。

色

グレースケールとセマンティックの2つのカラースキームを利用できます。 グレースケール色は一般的な黒の陰影を使用したクイックアクセスが提供され、 一方セマンティックには意味付けされた値が割り当てられた様々な色が含まれています。

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

これらの色の変数を使用するか、またはプロジェクトに合わせてより意味付けを行った再割当てを行って変数を使用してください。

// そのまま使用
.masthead {
  background-color: @brand-primary;
}

// Less内で変数を再割当て
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

スキャフォールディング

サイトの骨組みとなる変数で、容易に変更することが可能です。

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

リンク

適切な変数を一箇所だけ変更するだけで、簡単にリンクのスタイルを調整することができます。

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-colorは、Lessからの別の便利ツールによる関数を使用して、 自動的に明るめのhover色を作成していることに注意してください。 darken、lighten、saturate、desaturateを使用することができます。

タイポグラフィ

フォント、テキストサイズ、見出しなど様々な値を少しの変数を通して簡単に設定することができます。 Bootstrapではタイポグラフィのmixinを提供し、それを使用することができます。

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

アイコン

アイコンの場所とファイル名を示す2つの変数が用意されています。

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

コンポーネント

Bootstrapを通してコンポーネントが共有する値を設定するデフォルト変数です。 下記は頻繁に使用される変数の一覧になります。

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ベンダーmixin

ベンダーmixinは全ての適切なベンダープレフィックスをコンパイルされたCSSに含めることで、 複数のブラウザのサポートを手助けするmixinです。

Box-sizing

1つのmixiでコンポーネントのボックスモデルをリセットします。 ボックスモデルの詳細については、Mozillaの記事を参照してください。

このmixinはAutoprefixerの導入により、 v3.2.0で非推奨になりました。 後方互換性を維持するため、Bootstrapはv4まで内部的にmixinを使用し続けます。

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

角丸

今日では、モダンブラウザの全てがプレフィックス無しのborder-radiusプロパティをサポートします。 .border-radius()自体のmixinは存在しませんが、 Bootstrapには対照の特定の面の2つの角を、手軽に丸めるためのショートカットが含まれます。

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ボックス(ドロップ)シャドウ

あなたが対照とするユーザーが最新のブラウザとデバイスを使用しているのであれば、 box-shadowプロパティを使用しても問題ないでしょう。 もし古いAndroid(v4以前)とiOS端末(iOS5以前)をサポートする必要がある場合は、 -webkitプレフィックスを使用する非推奨のmixinを使用してください。

このmixinはv3.1.0で非推奨になったため、 Bootstrapは正式には標準プロパティをサポートしない旧式のプラットフォームをサポートしません。 後方互換性を保つために、Bootstrapはv4まで内部的にこのmixinを使用し続けます。

可能な限り背景をシームレスにブレンドしてくれることから、ボックスシャドウにはrgba()カラーを使用してください。

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

transition

柔軟な対応が出来るように複数のmixinが存在します。 全てのtransition情報を設定することも、必要に応じてdelayとdurationを分けて設定することも可能です。

これらのmixinはAutoprefixerの導入によって、 v3.2.0で非推奨になりました。 後方互換性を保つために、Bootstrapはv4まで内部的にこのmixinを使用し続けます。

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

transformation

オブジェクトに対して、回転、拡大・縮小、転化(移動)、歪みといった変化を与えます。

これらのmixinはAutoprefixerの導入によって、 v3.2.0で非推奨になりました。 後方互換性を保つために、Bootstrapはv4まで内部的にこのmixinを使用し続けます。

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

animation(アニメーション)

CSS3の全てのアニメーションのプロパティを1つで宣言する単一のmixinと、その他に個々のプロパティのためのmixinが存在します。

これらのmixinはAutoprefixerの導入によって、 v3.2.0で非推奨になりました。 後方互換性を保つために、Bootstrapはv4まで内部的にこのmixinを使用し続けます。

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

opacity(不透明度)

全てのブラウザのためのopacity(不透明度)の設定と、IE8のフォールバック用にfilterを提供します。

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

placeholderのテキスト

各フィールド内のフォーム要素用のplaceholderのスタイルを提供します。

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

カラム

単一要素内でのCSSによるカラム生成です。

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

gradient(グラデーション)

2色を指定して簡単に背景のグラデーションを作ることが可能です。 より複雑なグラデーションの表現をするには色を3色指定し、 方向の設定をしたい場合はradialグラデーションを使用します。 1つのmixinで、全ての必要となるプレフィックスされた文法が取得されます。

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

標準の2色を使用した線形グラデーションの角度を指定することも可能です。

#gradient > .directional(#333; #000; 45deg);

また、barber-stripeスタイルが必要なのであれば、これも簡単に指定することが可能です。 単一の色と角度を指定するだけで、半透明の白いストライプが被さります。

#gradient > .striped(#333; 45deg);

グラデーションに対する要求を更に高め、3色を使用することも可能です。 下記のmixinを使用することで、1色目、2色目、3色目と指定し、2色目はその終了位置(25%のような割合値)を指定します。

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

警告！ もし、これまでのグラデーションを削除する必要がある場合は、 あなたが追加しているかもしれないIE固有のfilterを必ず削除してください。 .reset-filter()のmixinを使用してbackground-image: none;にすることで、これを行うことが可能です。

ユーティリティmixin

ユーティリティmixinは、CSSプロパティとは無関係なものと結びついて、特有の目的またタスクを達成します。

clearfix

class="clearfix"を指定し忘れた要素に対して、代わりに適切な場所に.clearfix()を追加することができます。 Nicolas Gallagher氏のmicro clearfix を使用しています。

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// 使用方法
.container {
  .clearfix();
}

水平位置の中央寄せ

親要素内で対照の要素を手軽に中央寄せにします。 widthまたはmax-widthを一緒に指定する必要があります。

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// 使用方法
.container {
  width: 940px;
  .center-block();
}

サイズヘルパー

オブジェクト(要素)の大きさをより簡単に指定します。

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// 使用方法
.image { .size(400px; 300px); }
.avatar { .square(48px); }

サイズ変更可能なテキストエリア

テキストエリアまたは他の要素に対して、サイズ変更のオプションを簡単に設定することができます。 デフォルトは、通常のブラウザの挙動(both)になります。

.resizable(@direction: both) {
  // horizontal、vertical、bothの中から任意に指定
  resize: @direction;
  // Safari対策
  overflow: auto;
}

テキストの切り詰め

ellipsisを使用したmixinを使用して、簡単にテキストを切り詰めることができます。 対照の要素はblockまたはinline-blockである必要があります。

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 使用方法
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina画像

2つの画像パスと@1xの画像サイズ(@width-1xと@height-1x)を指定すると、 Bootstrapは@2x用のメディアクエリーを提供してくれます。 もし多くの画像をサイト上で提供するのであれば、単一のメディアクエリー内で手動でRetina画像のCSSを書くことを検討してください。

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// 使用方法
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

 Back to top