display:flexを使ってグリッドデザインのテンプレートを作ってみた話 #CSS #scss

display:flexを使ってグリッドデザインのテンプレートを作ってみた話 #CSS #scss

Bootstrapに代表されるようなフレームワークはいっぱいあります。web制作する人にとってフレームワークの有無は作業工程の短縮や作業効率のアップに関係するとても重要なものです。

Microsoft御大がIE9~10のサポートを終えたということもあり、IE11やEdgeがwindowsにとっての標準的なブラウザになりました。そう、つまり、ようやくCSS3を全面的に使用しても問題ないという時が来たわけです。グリッドデザインのシステムも一生懸命floatで整えたり、clearfix使って回り込み解除したりといった煩わしさから開放されたと言っても過言ではないはず(笑)

そこで、せっかくなので、Flexboxを使ってグリッドデザインのフレームワークを作ってみることにしました。scssの組立の練習にもなりますし、Flexboxの仕組みをしっかりと理解する上でも大切なことだと考えたわけです。新しい技術って使えるようになるとわくわくするのもあるので、まだまだ若くありたい――そう考える心理が働いたのかも?

Flexboxって何?

意外と知らない人も多いかもしれないので、Flexboxについて簡単な説明でも。詳しい説明は「LIG:CSS3のFlexboxを基本から理解して、使い倒そう!」のほうを確認してくれると嬉しいです。

さて、簡単にいうと、フレキシブルに変化するボックスのことです。レスポンシブなんて言われている世の中において、これほど便利なものはありません。しかも何が長所かというと、containerを設定したものの子関係になるブロックに勝手に適用されるということです。これにより、floatを使ったメンドーさから解放されます。

ちなみに昔はdisplay:boxっていっていたアレです。
わかる人はきっとわかるはず(笑)

Flexboxをつかってそれっぽいグリッドデザイン

やったこと自体はそんなにすごいことではないです。これまでにBreakPointの設定をするmixinflexboxを使うmixinを書きましたが、実はそれもここまでにやりたかったことの伏線みたいなもんです。

その伏線になるmixinを読み込んだ、framework.scssを作成します。

グリッドデザインのためのscssを作ろう

今回はグリッドデザインのためのscssを_grid.scssとして、以下のソースをツッコミます。考え方そのものはbootstarapを参考にしました。

なんでもかんでも、flex-growで設定するのは少々不安があったので、グリッドを作る部分をflex-itemのサイズ調整のところで作っています。

このグリッドデザインの使い方

基本的にはdivで組み立てるbootstrapと何ら違いがありません。

sample1

例えば左の図のような感じのレイアウトを作る場合は、下のようなソースを作ればいいわけです。

サイドバーの位置を左側でなく、右側に移動させたい場合は、CSSのほうで

classでflex-itemを与えられてるブロックの並び順を、orderで変えてあげればすぐできます。

また、各ボックスのサイズを変えたいときは、bootstrapのごとくにclass名をつくったflex-(サイズ)-(1~12)で調整できます。bootstrapとの大きな違いは、合計値が必ずしも12にならなくても良い所ですかね。

工夫次第ではけっこう何でもできそうです。

まとめ

現在、うちのブログでも、Flexboxをベースにつくったフレームワークを使っていますが、モダンブラウザで見る分には何ら問題ない感じです。(ただし最新版に限る)floatをベースにブロックを動かしていると、どうしてもclearし忘れるということがあって何が何だかわからなくなることがあったのですが、それらも解消されて使いやすいですね。

そのうち、Flexboxをつかうグリッドデザインが標準になってくのではと思いました。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top