css3CAUTION!Javascriptが無効になっています。このサイトを正常に表示させるには、Javascriptを有効にしてください。Grid」の使い方2014/11/04Jomosass,web巷にはたくさんのグリッドシステムがありますが、正直どれを使っていいか分からないです...。Gridについて意外と解説が少ないので、自分が使っている範囲で説明してみようと思います。Gridとは?Sass(SCSS)を使ったグリッドシステムです。BootstrapやFoundationの様にUIなどは用意されておらず、完全にレイアウト専用ですね。Gridのページ、またはGithubからダウンロードができます。使うファイルは_grid.scssのみ。ProfoundGridは、おおまかに2つの使い方があります。Queryでレイアウトを切り替える場合→1の方法Fluid又は固定レイアウトで切り替えない場合→2の方法という感じがあるかなぁ...と思います。組み合わせて使うこともできますよ!さっそく使ってみよう基本的には他のグリッドシステムと同じで、「コンテナになる要素を生成し、その中の各要素に対してグリッドを指定する」感じになります。それではさっそく、実際の使い方を見てみましょう!初期値の設定まずは初期値(変数)の設定をします。設定するのは以下の3つ。設定していないとデフォルト値が使われます。//container左右のマージン。//生成カラムの余白(ガーター)幅。//container左右のマージン。//生成カラムの余白(ガーター)幅。図で表すとこんな感じです。ここで注意したいことが。この3つに「%指定」と「px指定」が混ざっていると、エラーが出てSassがコンパイルされません!デフォルト値は混ざってるので、そのまま使うとまさかのエラーが出ます。リキッドレイアウトにしたい時は%指定、固定幅ならpx指定...という感じで統一してください。基本リキッドで最大幅を指定したい...という時は、コンテナにした要素(詳しくは後述します)に対してmax-widthを設定して、$container_marginをautoにしてあげればOKです。個別にコンテナの最大幅が変え放題って柔軟でいいですよね!また、カラム数も自分で決めることができます。ことがなければ変えなくていいと思います。Sass$total_columns:12;//カラム数。デフォルトは121$total_columns:12;//カラム数。デフォルトは12ちなみにコンテナ内の分割数=カラム数になるので、1カラムの幅はコンテナ幅に依存します。コンテナを入れ子にしたりした場合は、その分1カラムの幅が狭くなったりするのでお気をつけ下さい。大まかなレイアウトをする場合は、以下の3つのmixinを使えばOKです。こんな感じのレイアウトにしたい場合は、以下の様にします。column();の引数は、カラム幅を指定します。1だと1/12の幅、6だと6/12=半分の幅になります。push();の引数は、カラム位置です。1だと左から1カラム分、6だと左から6カラム=半分の位置に移動します。コンテナはそのつどclearfixをかけてあげないとコンテナが全部重なる...という悲しいことになりますので、ご注意ください。generate_grid_positions();を使います。column();を設定します。generate_grid_positions();を指定してください。(分かりやすいように子要素の下に書いてますが、別に上でもOKです。)引数はカラム指定した子要素と、その子要素のカラム幅です。これでずらりと並びます。グリッドの縦マージンは、$gutter_widthと同じ値になります。generate_helper_classes();でクラスを生成して、マークアップ時にクラスを付与するタイプです。ここではこんな感じにしたい場合のマークアップにしてみます。container();をします。generate_helper_classes();も呼び出しましょう。これでクラスが生成されます。generate_helper_classes();場合によりますが、generate_helper_classesは特定要素に対して@includeしない方が使い勝手がいいと思います。html生成したクラスをhtml側でマークアップします。col+カラム数のクラスでカラム幅を指定、push+プッシュ数のクラスでカラム位置を指定できます。Queryで切り替えるレスポンシブでいろいろ切り替えたい方は、それぞれのブレークポイント内で異なるmixin設定をすることになります。generate_grid_positions(section,12);}}これで、それぞれのブレークポイント内でカラム数が異なるグリッドが実現できます!プラスαで気をつけたいところ使っていて少し気になった部分があります。それがclearfixとbox-sizingです。思った見た目にするには割と大事な部分だと思うので、一応...。Gridにはclearfixのmixinが入っています。overflow:hidden;タイプのclearfixなんですよね...。装飾の具合によっては使いにくい場合もあるかと思います。そんな時は、legacy-pie-clearfixというmixinも用意されています。こちらはafter要素にclear:both;をかけているタイプなので、コンテナからはみ出して装飾したい場合などはこちらを使用した方がいいですよ!box-sizingの設定そのままだとpaddingの設定ではみ出したり何だりで、せっかくのグリッドがややこしいことになります。Compassでbox-sizeingを呼び出して、border-boxあたりをきちんと設定してあげるとよろしいかと思います。覚えるmixinとかclassも少ないですし。物覚えが悪い私にぴったり。