さてさて、浦島太郎が通りますよっと。
皆様こんにちわ、2年間の沈黙を経てWEB業界に戻ってきた犬吉です。

時代からの取り残されっぷりは、まさしく浦島太郎!
モバイルファーストの時代、世のコーディングはどんなのがナウいのか?
そんな流行を感じ取るために、CSSフレームワークの王道「Bootstrap(ブートストラップ)」を使ってみるよ!!

しかし、あたりまえなのだけど、フレームワークは理解して使わないと痛い目みますよね。
オウンゴールといいますか…余計に手間かかる。

な・の・で、しっかりドキュメントを読んでBootstrapの流儀を理解していこうと思います。

さて、これからドキュメントをボクなりに読み解いていくわけだが、
そのまえに大事なことを伝えておこう。

“私は英語はさっぱりだ!”。

ゆえに、これから書く項目に対して書いてることは翻訳ではなく“私が解釈した内容”であり、「この項目は、こういう内容だったなぁ」と思い出すためのメモ書きであります。

ダウンロードしてファイル構成を確認

Bootstrap3.3.1をダウンロードして解凍すると「dist」という
馴染みのない名前のフォルダが出てくる。
まあ、中身はcss、fonts、jsとコーディング時にはcommonとか命名したフォルダに突っ込むファイル群だったりする。(あくまで私の個人の話)

カスタマイズしてダウンロードしたほうが楽そう

公式サイトを見るとカスタマイズページがある。

http://getbootstrap.com/customize/

上記のページであらかじめカスタマイズしてからダウンロードできるようだ。

まあ、知ってたけどね!

こほん!

まあこれは、ちゃんとカスタマイズしてダウンロードしたほうが、コーディングの効率も良いだろう。

ということなのだが…英語だ。

カスタマイズページ自体の解説は別記事としよう。

目次

  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

赤字の部分が今回の内容。

1.Overview(概要)

まずは、http://getbootstrap.com/css/のページにて、

制作者の創意工夫を順に見てみよう。

1.1 HTML5 doctype

まずは、HTML5のdoctypeではじめるらしい。
いまさらxhtmlのdoctypeで始めるメリットがわからんので、大いに賛成でございやす。文字のエンコーディングだけjaに直すけどね。

1.2 Mobile first

猫も杓子もモバイルファースト。Bootstrapももちろんさ。
なのでモバイル向けのメタタグいれてますよって話なのかな。

そしてWEBアクセシビリティ界隈の意見が分かれる「user-scalable=no」問題(詳しくは:http://2ndidea.com/accessibility/pros-cons-of-user-scalable-no/)については、彼らは「user-scalable=no」を”入れる”派だそうです。

1.3 Typography and links

テキストとテキストリンク周りの設定。

  • 背景色は“白”bodyタグに書いてる
  • 書体(@font-family-base)、文字サイズ(@font-size-base)、行間(@line-height-base)がベースで他は相対指定
  • テキストリンクは@link-color、hoverの時だけ下線でる

これらはscaffolding.lessってファイルに書いてるらしい。

.lessファイルはcssの拡張言語Lessの保存形式で@がついた値は、ミックスインと呼ばれる変数みたいなものだったりします。

ふむ、では見てみよう。

まず、box-sizingプロパティについてリセット設定。

肝心の内容は、http://getbootstrap.com/getting-started/#third-box-sizingに書いてるようだ。

ちなみにbox-sizengは、パディングとボーダーを幅と高さに含めるか含めないかを設定するプロパティなのだが、“含めない”に設定してるみたいだ。

-webkit-tap-highlight-colorって何さ!?と思って調べたら、「スマホでa要素をタップしたときにハイライトさせるプロパティ」だそうです。

とうことで上の記述は、ハイライトの“非表示”に設定されてます。

フォント周りは別の箇所で指定されるようですね。

ふーむ、フォーム周りのテキスト設定。
祖先要素の指定を継承させるinheritにされてる。

リンクの設定

テキストリンクの下線などは無しに設定。

ほかはミックスイン(内容は別の場所に書いてる)。

HTML5から新たに追加された要素である、figure(図表)の設定。

boostrapはブラウザ間の表示誤差を補正するnormalize.cssを利用してるのだけど、normalize.css側でfigure要素のマージンがリセットされてないから、ここで書いてるみたい。

画像の設定。

img要素のvertical-alignをmiddleに設定。
他は、ミックスイン。

サムネイル画像に付けるclass「img-thumbnail」の設定
1pxの枠線が付くのは固定で、色や余白はミックスイン。
横幅100%で広がるようですね。

画像を正円でマスクするclass「img-circle」の設定
このclassをつけると画像が正円になる。

区切りタグの設定。
1pxの直線なのは固定みたいで、色と余白がミックスイン。

スクリーンリーダー(画面読み上げソフト)系のclass。
主に、視覚障害者の方などが利用するスクリーンリーダーに配慮する時に使うクラスですね。

さっすがBoostrap!気が利いてる!!

一度、特にそういった配慮を求められるWEBサイトを作ったから懐かしい。
classがあっても、ちゃんとhtml側にも設定されてないと意味ないけどね。

1.4 Normalize.css

デフォルトスタイルシートのプロジェクトである「Normalize.css」を採用してる。とのこと。

いまは、もうリセットより補正する時代ということか。
というかNormalize.css作った人すごい…

1.5 Containers

大枠のclassは、レスポンシブだけど指定幅まで.containerか、

ブラウザ幅いっぱいに広がる.container-fluidのどちらかを使うのがルールらしい。

2.Grid system(グリッドシステム)

2.1 Introduction

本丸のグリッドシステムの概要。横幅を12にわけてレイアウトする。
詳細が後の項目であるので割愛。

2.2Media queries

Media queriesはおおまかに

  • スモール(@screen-sm-min)
  • ミドル(@screen-md-min)
  • ラージ(@screen-lg-min)

小中大の三段階に絞って設定。
例外的に、max-widthを用いて〇〇px〜〇〇pxまでと、
限定的に使用してる箇所もある。

2.3 Grid options

端末によって表示を変える時に、便利なclassの表組み。

2.4 Ex: Stacked-to-horizontal

具体的に、横幅12分割をどのようにclass指定するかの例。

2.5 Ex: Fluid container

横幅100%バージョンのclass。
.container-fluidの使い方の例。

2.6 Ex: Mobile and desktop

モバイルとデスクトップでレイアウトを変更。
.col-xs-* .col-md-*を使用した例。

2.7 Ex: Mobile, tablet, desktop

モバイル、タブレット、デスクトップでレイアウトを変更。
.col-sm-*を使用した例。

2.8 Ex: Column wrapping

列の折り返しについての例。
12分割以上で指定すると折り返される。とか。

2.9 Responsive column resets

列の折り返しで、高さの違うものが混じってるときに、
clearfixをつかって行をリセットする例。

2.10 Offsetting columns

12分割の内、余白として列を指定する.col-md-offset-*の例。

2.11 Nesting columns

列を入れ子にした時の挙動。
直近の親要素の横幅にたいしての12分割でレイアウトされるっていう例。

2.12 Column ordering

列の位置を入れ替える.col-md-push-* and .col-md-pull-*の例。

2.13 Less mixins and variables

lessのミックスインと変数を設定。

[less]@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;[/less]

が大本の初期値で、そこからミックスイン専用の.make-***シリーズを作成し使用して、実際にhtml上で使用する.wrapperなどのクラスが作られてるみたい。

続きは後日

ここまででも、ちょいと疲れました。

ほんとに丁寧に説明されてますね。

続きはこちら