最近、java(もちろんjavascriptではない)への興味が湧いてきた犬吉です。

さてさて、Bootstrapのドキュメントを読んでみたシリーズ CSS編のも5記事目になりました。

目次

  1. 概要 – Overview
  2. グリッドシステム – Grid system
  3. 文字 – Typography
  4. コード – Code
  5. 表組み – Tables
  6. フォーム – Forms
  7. ボタン – Buttons
  8. 画像 – Images
  9. 補助 – Helper classes
  10. レスポンシブ – Responsive utilities
  11. Lessを使う – Using Less
  12. Sassを使う – Using Sass

赤字が今回の内容

レスポンシブ – Responsive utilities

デバイスによって、表示、非表示を切り替える箇所や、印刷対応だったりのclass郡

Available classes

具体的な表は、本家の表を参考。

「xs」がついたclassは、768px以下。

「sm」がついたclassは、768px以上。

「md」がついたclassは、992px以上。

「lg」がついたclassは、1200以上。

そこ以外を非表示にする.visible-*。

ピンポイントでそこだけ非表示にする.hidden-*。

Print classes

.visible-print-block、.visible-print-inline、.visible-print-inline-blockはブラウザでは非表示、印刷時に表示される。

.hidden-printは、ブラウザでは表示、印刷時には非表示。

Lessを使う – Using Less

さて、boostrapのcssはLessをつかって書かれてるわけですが、

変数やミックスインを把握しておけば、最小限の変更でBoostrapの全体の調整ができます。

Variables

設定されている変数について。これらの変数はBoostrapの各所で使われているため、

変更すれば全体に影響がでます。言い換えれば、個々を変えればだいぶ変わるわけです。

Colors

色についての変数。

グレースケールですね。サイトの背景色によっては調整の必要ありかな。

いままで、primariyとかsuccessとかつくclassが沢山でてきましたが、それらの色設定部分。WEBサイトのブランドカラーによって変更するところですね。

Scaffolding

bosy要素の色とテキストの色。

Links

リンクの色設定と、aタグの内容。
さきほどの@brand-primaryがどのように使われてるかわかりますね。

一つの値を変えるだけで、hoverも調整されるように書かれてます。

Typography

文字周りの変数。サイトに合わせて調整するところですね。

フォントファミリーの設定。日本人向けに直さないとね。

フォントサイズの設定。ベースは14px。見出しの各種サイズなど違う場合は修正が必要。

行間などなど。

Icons

アイコン型Webフォントの設定。

Components

Bootstrapが用意してくれてる便利なclassなどで使われる余白や線の値。

Vendor mixins

各種ブラウザに対応、調整するための変数。

box-sizing

box-sizingは全部のブラウザでリセットしてるみたい。

ただ、自動プリフィックス機能ってのがlessにはあるから3.2では使ってないけど、v4までは古いverの為に一応書いてるみたい。

Rounded corners

全部の角を角丸にするミックスインは、もともとブラウザで対応しているので必要ないけども、個別の辺を角丸にするミックスインは、用意してるみたい。

Box (Drop) shadows

ボックスシャドウの設定。bootstrapはレガシーなブラウザには公式には対応しないので、iOS iOS 4.3、Android4.1以前に対応する場合は、-webkitの行をさっきの使用してないミックスインにかえてね。

あとシャドウの色は、なるべくrgpで指定すると奇麗らしい。

Transitions

もろもろに対応するためのミックスイン。これもあるけど使ってない。transition、transition-property、transition-delay、transition-duration、transition-timing-function、transition-timing-function、transition-transformを調整する必要があれば指定する。

Transformations

回転、拡大縮小、移動、傾け。あるけど使ってなーい。

Animations

アニメーションのミックスイン。あるけど使ってな~い。

Opacity

不透明度の設定。IE8のためにfilterをつかった記述がありますね。

Placeholder text

主に、フォーム要素の代替テキスト。入力フォームの中にうっすら灰色のテキストで入力例が表示されてたりするヤツのことね。

Columns

cssでカラムを作る。column-widthで列幅、column-countで列数、column-gapでカラムの間隔。