グリッドレイアウト『だけ』を簡単に使いたい

ページレイアウトを簡単にするグリッドレイアウトシステム

ページレイアウトを簡単にするグリッドレイアウトシステム (細かく分割されたグリッドを自由に組み合わせることで、望みのサイズの段組を簡単に作成できる仕組み)

ウェブページのレイアウトを簡単に作る方法として、「グリッドレイアウトを提供するフレームワーク」を活用する方法があります。Bootstrapなどの大規模なフレームワークにもその機能はあり、過去の記事「Bootstrapのグリッド機能で段組を作成」などでも使い方を解説致しました。

しかし、「グリッドレイアウトだけを使いたい」という場合に大規模なフレームワークを導入すると、読み込みに時間がかかるようになってしまったり、フレームワークに含まれている他の機能に影響されてデザインが作りにくくなったり、様々な不都合が発生することもあります。

そこで便利なのが、今回ご紹介する「Responsive Grid System」です。

グリッドレイアウトだけを簡単に利用できる軽量なCSSフレームワーク

グリッドレイアウトだけを提供するシンプルなフレームワーク「Responsive Grid System」

グリッドレイアウトだけを提供するシンプルなCSSフレームワーク「Responsive Grid System」

「Responsive Grid System」は、グリッドレイアウト機能だけを提供するシンプルなCSSフレームワークです。「フレームワーク」と呼んで良いかどうか迷うほどシンプルなので、ファイルサイズも小さく、使い方も簡単です。

グリッドは12分割・16分割・24分割の3種類が用意されていて、作りたいレイアウトの細かさに応じて選択可能です。グリッドレイアウト以外の機能はないため、自分で作るページデザインに何も影響を与えないメリットもあります。

レスポンシブ・ウェブデザインにも対応。幅の狭い画面では段組が解除される

レスポンシブ・ウェブデザインにも対応。幅の狭い画面では段組が解除される

また、(その名の通り)レスポンシブ・ウェブデザインに対応しており、描画領域が狭い場合(標準では768pxが境界)には自動的に段組を解除して表示できる仕様になっています。

モバイルファーストでデザインしているウェブページの作成場面でも活用しやすいでしょう。


 
今回は、この「Responsive Grid System」を使って段組レイアウトを作成する方法をご紹介します。