概要
BootstrapやFoundationを参考にしながら（パクりながら、ともいう）CSSフレームワークを作りました。
詳細はKomitsuboshi-cssにまとめています。GitHubでも公開中。
ある程度デバッグもできたので公開しましたが、利用する際はベータ版くらいの感覚で使ってください。バグがあれば教えてください。
名称は小三ツ星インターフェイスという屋号でやっているので「Komituboshi-css」という何のひねりもない名前です。当初kicssという名称で開発していたところ、GitHubに既に同じ名前のフレームワーク作っている人がいて、混乱を招きそうなので急遽変更しました。呼び名が長いんで、とりあえず、K-cssと略しますね。KocssとかKoshicssとかいい感じの略称つけたいなぁ。
作成の経緯
さて、世の優れたエンジニアの人たちがBootstrapとかスゴイの作っている中でなんでわざわざ作ったかというと、使わない機能が9割もあって私にはオーバースペックだったからです。
また、実際の案件ではボタンなどの装飾は全部作り直すのでむしろ邪魔になることもあります。グリッドのところだけコピペして使ったり、なんてことも一時期やってたんですが、数回使って以降はグリッドの作り方をまねてスクラッチで作るようになってしまいました。
大抵一度作ったものを使いまわしたりしてたんですが、その途中でBEMという手法を知ったり、SassやGitを使い始めたり、大規模案件にちょっと関わって大体のページのレイアウトパターンが見えてきたり、Foundationというフレームワークを知ったりと、自分がいろいろアップデートされてきたこともあり、一度まとめたいなと。
工夫したところとか
最初に（パクりながら）と書きましたが、実はパクったというほどには原形をとどめていません。
グリッドの配置方法
Bootstrapはrowのネガティブマージンを子要素のpaddingで相殺するやりかたですが、K-cssは親要素（rowではなく、float,flex,flex-rを指定します）のネガティブマージンを、子要素のmarginで相殺しています。paddingを使うと、background-colorを指定したときに隣の要素と完全に接触しちゃうんで都合が悪かったんです。borderをつけたいときとかも困ったのでこの点はBootstrapとは異なります。
これに伴い、子要素のwidthにcalcを使って、要素の幅はリキッドで、要素間のmarginは固定しています。
子要素間のmarginは、ブレイクポイント毎に違う値に設定できるようにしました。PCサイズの画面では要素間のmarginを20pxに、画面の小さいスマートフォンでは5pxにしてコンテンツの表示領域を広くとることが可能です。
なお、IE8はcalcプロパティおよびメディアクエリ非対応なので、IE8ではmarginも%指定になりウィンドウ幅に応じて縮みます。
グリッドの命名規則
Bootstrapのrowに当たるのがfloat, col-*に当たるのはcol-(画面サイズ)-(占有グリッド数)となります。
Bootstrapでは画面サイズの表記にxs, sm, md, lg がありますが、K-cssは sp, tab, pcの3種類だけです。文字通りスマートフォンサイズ、タブレットサイズ、パソコンモニタサイズを意味します。
ブレイクポイントはデフォルトで480px,768pxの2つで、containerのサイズを980pxにすることが多いので、これ以上細かくする必要はないと考えています。
基本は12グリッドなので、col-sp-4のように表記します。
指定した画面サイズ未満になると縦並びとなります。
12グリッド+2
12グリッドに加え、N/5, N/7の分割比も用意しました。col-sp-2by5のように表記します。
12グリッドだけで等分割パターンは1,2,3,4,6,12をカバーできますが、これに5と7を加えてより細かくカバーできるようにしました。
これに8から11を加えるかどうかは検討中です。拡張コンポーネントとして作るかもしれません。
子要素の右詰め
Foundationの場合、右端の子要素のみ、float:right;がかかるようになっているみたいです。これにヒントを得て、子要素のクラス名の末尾にrをつけるとその要素にはfloat:right;がかかるようにしました。表記はcol-sp-4rのようになります。
また、使い道は思いつきませんがrのあるものとないものを混ぜることも可能です。
オフセットは未対応
Bootstrapでは子要素の配置をオフセットして表示場所を入れ替えることができますが、その機能は今のところありません。
flexboxレイアウト対応
親要素にflexまたはflex-rをつけると、子要素の高さをそろえることができます。flexが左詰めの横並び、flex-rが右詰めの横並びです。
子要素の表記はfloatの場合と全く同じです。ただし、親要素がflexの場合は子要素にrがついていても左詰め、flex-rの場合は逆に子要素にrがなくても右詰めになります。
ただし、flexboxに非対応のブラウザではfloat同様floatによる配置になるため、親要素flexの場合はrなし、flex-rの場合はrをつける必要があります。非対応のブラウザでもjquery.matchHeight.jsを使って高さがそろうようにしています。（わざわざflex使う必要があったのかどうか悩むところです。）
flex等幅分割
親要素にflex-(画面サイズ)-eqを指定すると、子要素が等幅分割されます。このとき子要素にはクラス名をつけなくてもOK。数が増減しても等幅分割になります。
IE8と10ではtableレイアウトを使っています。
画像キャプション対応
写真の下にキャプションを別途つけられるクラス名を標準で入れました。ただし画像の幅を計算するためのJavaScriptファイルを読み込む必要があります。
課題と今後の展開
解説ページを見ればわかりますが、導入が少しばかり面倒です。読み込むスタイルはstyle.cssのほか、ie8,ie9,ie10用のスタイル、さらにjQueryライブラリ、標準のjsファイル（kcss.js）、旧ブラウザ対応のためにhtml5shiv, jQuery.machHeigt.jsを各ブラウザ向けに読み込ませる必要があります。読み込みも、IE用の振り分けのほか、ユーザーエージェントを判別しての読み込みがあってややこしいことになってます。
よく使う機能についてはcomponentとして随時追加していく予定です。
また、カスタマイズにはSassを使える必要があります。もともとCSS使える人向けに作ったのでこの点はご容赦を。Sassの使い方がわからないという人は下のSassの教科書が1冊あればどうにかなります。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 Web制作者のための教科書シリーズ
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレス
- 発売日: 2013/10/02
- メディア: Kindle版
- この商品を含むブログを見る
