2015年1月22日さてさて、浦島太郎が通りますよっと。皆様こんにちわ、2年間の沈黙を経てWEB業界に戻ってきた犬吉です。時代からの取り残されっぷりは、まさしく浦島太郎!モバイルファーストの時代、世のコーディングはどんなのがナウいのか?そんな流行を感じ取るために、CSSフレームワークの王道「Bootstrap(ブートストラップ)」を使ってみるよ!!しかし、あたりまえなのだけど、フレームワークは理解して使わないと痛い目みますよね。オウンゴールといいますか...余計に手間かかる。・の・で、しっかりドキュメントを読んでBootstrapの流儀を理解していこうと思います。これからドキュメントをボクなりに読み解いていくわけだが、そのまえに大事なことを伝えておこう。“私は英語はさっぱりだ!”。ゆえに、これから書く項目に対して書いてることは翻訳ではなく“私が解釈した内容”であり、「この項目は、こういう内容だったなぁ」と思い出すためのメモ書きであります。ダウンロードしてファイル構成を確認Bootstrap3.3.1をダウンロードして解凍すると「dist」という馴染みのない名前のフォルダが出てくる。中身はcss、fonts、jsとコーディング時にはcommonとか命名したフォルダに突っ込むファイル群だったりする。(あくまで私の個人の話)カスタマイズしてダウンロードしたほうが楽そう公式サイトを見るとカスタマイズページがある。http://getbootstrap.com/customize/上記のページであらかじめカスタマイズしてからダウンロードできるようだ。知ってたけどね!こほん!まあこれは、ちゃんとカスタマイズしてダウンロードしたほうが、コーディングの効率も良いだろう。いうことなのだが...英語だ。カスタマイズページ自体の解説は別記事としよう。Sass赤字の部分が今回の内容。制作者の創意工夫を順に見てみよう。doctypeまずは、HTML5のdoctypeではじめるらしい。xhtmlのdoctypeで始めるメリットがわからんので、大いに賛成でございやす。文字のエンコーディングだけjaに直すけどね。first猫も杓子もモバイルファースト。Bootstrapももちろんさ。モバイル向けのメタタグいれてますよって話なのかな。WEBアクセシビリティ界隈の意見が分かれる「user-scalable=no」問題(詳しくは:http://2ndidea.com/accessibility/pros-cons-of-user-scalable-no/)については、彼らは「user-scalable=no」を”入れる”派だそうです。linksテキストとテキストリンク周りの設定。背景色は“白”bodyタグに書いてる書体(@font-family-base)、文字サイズ(@font-size-base)、行間(@line-height-base)がベースで他は相対指定テキストリンクは@link-color、hoverの時だけ下線でるこれらはscaffolding.lessってファイルに書いてるらしい。.lessファイルはcssの拡張言語Lessの保存形式で@がついた値は、ミックスインと呼ばれる変数みたいなものだったりします。ふむ、では見てみよう。{.box-sizing(border-box);}まず、box-sizingプロパティについてリセット設定。肝心の内容は、http://getbootstrap.com/getting-started/#third-box-sizingに書いてるようだ。ちなみにbox-sizengは、パディングとボーダーを幅と高さに含めるか含めないかを設定するプロパティなのだが、“含めない”に設定してるみたいだ。@body-bg;}-webkit-tap-highlight-colorって何さ!?と思って調べたら、「スマホでa要素をタップしたときにハイライトさせるプロパティ」だそうです。とうことで上の記述は、ハイライトの“非表示”に設定されてます。フォント周りは別の箇所で指定されるようですね。inherit;}ふーむ、フォーム周りのテキスト設定。祖先要素の指定を継承させるinheritにされてる。{.tab-focus();}}リンクの設定テキストリンクの下線などは無しに設定。ほかはミックスイン(内容は別の場所に書いてる)。0;}HTML5から新たに追加された要素である、figure(図表)の設定。boostrapはブラウザ間の表示誤差を補正するnormalize.cssを利用してるのだけど、normalize.css側でfigure要素のマージンがリセットされてないから、ここで書いてるみたい。@border-radius-large;}画像の設定。img要素のvertical-alignをmiddleに設定。wide.img-responsive(inline-block);}サムネイル画像に付けるclass「img-thumbnail」の設定1pxの枠線が付くのは固定で、色や余白はミックスイン。横幅100%で広がるようですね。percents}画像を正円でマスクするclass「img-circle」の設定このclassをつけると画像が正円になる。@hr-border;}区切りタグの設定。1pxの直線なのは固定みたいで、色と余白がミックスイン。auto;}}スクリーンリーダー(画面読み上げソフト)系のclass。視覚障害者の方などが利用するスクリーンリーダーに配慮する時に使うクラスですね。Boostrap!気が利いてる!!一度、特にそういった配慮を求められるWEBサイトを作ったから懐かしい。classがあっても、ちゃんとhtml側にも設定されてないと意味ないけどね。Normalize.cssデフォルトスタイルシートのプロジェクトである「Normalize.css」を採用してる。いまは、もうリセットより補正する時代ということか。Containers大枠のclassは、レスポンシブだけど指定幅まで.containerか、ブラウザ幅いっぱいに広がる.container-fluidのどちらかを使うのがルールらしい。Introduction本丸のグリッドシステムの概要。横幅を12にわけてレイアウトする。詳細が後の項目であるので割愛。queriesはおおまかにスモール(@screen-sm-min)ミドル(@screen-md-min)ラージ(@screen-lg-min)小中大の三段階に絞って設定。限定的に使用してる箇所もある。options端末によって表示を変える時に、便利なclassの表組み。Stacked-to-horizontal具体的に、横幅12分割をどのようにclass指定するかの例。container横幅100%バージョンのclass。.container-fluidの使い方の例。desktopモバイルとデスクトップでレイアウトを変更。.col-md-*を使用した例。desktopモバイル、タブレット、デスクトップでレイアウトを変更。.col-sm-*を使用した例。wrapping列の折り返しについての例。12分割以上で指定すると折り返される。resets列の折り返しで、高さの違うものが混じってるときに、clearfixをつかって行をリセットする例。columns12分割の内、余白として列を指定する.col-md-offset-*の例。columns列を入れ子にした時の挙動。直近の親要素の横幅にたいしての12分割でレイアウトされるっていう例。.col-md-pull-*の例。variableslessのミックスインと変数を設定。768px;[/less]が大本の初期値で、そこからミックスイン専用の.make-***シリーズを作成し使用して、実際にhtml上で使用する.wrapperなどのクラスが作られてるみたい。続きは後日ここまででも、ちょいと疲れました。ほんとに丁寧に説明されてますね。