CSSグリッドベースはCSSによるレイアウト手法の1つです。最近では主流になりつつあるこの手法ですが、少し複雑に感じてしまう人もいるのではないでしょうか。
そこで今回はCSSグリッドベースのフレームワークについてご紹介いたします。もくじ
◆CSSグリッドベースとは
HTMLでコーディングする際には、コードを上から下に書いていきますが、その際に生成された要素は、何も指定しなければ全て上から下に縦並びになっています。
今まではCSSによって横並びにする方法が主流でしたが、CSS3の新しい機能により2次元レイアウトを表現できるようになりました。
今までの様にブロックを作って並べるのではなく、1枚のブロックを縦方向や横方向に区切っていく、という考え方になります。
そのためコンテンツを好きな順番に配置したり、マス目を結合したりすることができます。
デザインの自由度は高まりますが慣れるまでに時間がかかり、CSSグリッドベースを使いこなすのはハードルが高いという声もあり、あらかじめ使いやすいようにテンプレートとして用意されているフレームワークが少しずつ登場しています。
◆CSSグリッドレイアウトの特徴
・固定と可変のトラックサイズ
ピクセル単位を使って固定トラックサイズのグリッドを作成することができ、グリッドに所望のレイアウトに合うようなピクセルを設定することができます。
・アイテムの配置
グリッドの線の番号や名前を使ってグリッドのある位置を指定してアイテムを配置することができます。
・コンテンツを保持する為の追加のトラックの作成
必要に応じて柔軟に行や列を追加できるようになっていて、わかりやすくグリッドを定義することができます。
・整列の制御
グリッドには整列機能が含まれているので、グリッドエリア内でアイテムがどのように整列するのか、グリッド全体がどのように整列するかを制御することができます。
・オーバーラップコンテンツの制御
グリッドセルやグリッドエリア内には複数のアイテムも配置することができ、部分的にオーバーラップすることができます。
また、z-indexやプロパティで制御することができます。
◆おすすめフレームワーク4選
・iota
とてもシンプルなレスポンシブ対応のCSSグリッドベースのフレームワークです。
親要素であるグリッドコンテナーにクラス名「grid」を付けるだけで簡単に実装できます。読み込み速度が非常に早く容量が非常に小さく軽量です。
・Simple Grid
従来のグリッドシステムと同じように960pxで12カラムの縦のグリッドを組み合わせていくフレームワークです。
・Milligrid
MilligramというFlexboxを使ったフレームワークを利用した、レスポンシブ対応のフレームワークです。
Sassによる設定も可能で、好みの幅に変えたりすることもできます。
・Web Grid
floatやflexを一切使わない、CSSグリッドを活用したフレームワークです。
12グリッドで組み立てる形式で、非常にシンプルで軽量です。
◆まとめ
CSSグリッドベースを採用すればサイドバーなども実装しやすくなります。
CSSグリッドレイアウトに慣れるまでには時間がかかるので、まずはフレームワークを利用してみてはいかがでしょうか。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞