[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout

Post on:2015年8月21日

最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。
もちろんレスポンシブ対応で、古い環境（IE8+, iOS5+, Android3+）もサポートされています。

レイアウト用だけのフレームワークを必要としている人にはぴったりだと思います。

サイトのキャプチャ

GridLayout
GridLayout -GitHub

サポートするのがモダンブラウザだけであれば、Flexboxでレイアウトをするのがベストです。
Flexboxについては、下記ページで徹底的に解説しているので参考にしてください。

GridLayoutの主な特徴

GridLayoutのレイアウトパターン

GridLayoutのレイアウトパターン

  • 主要ブラウザをすべてサポート
    IE8+をはじめ、主要ブラウザをすべてサポート。
    ※IEのサポートには「gridlayout-ie.js」を使用します。
  • 超軽量のスタイルシート
    ファイルサイズは、1KB(gzip)の超軽量。IE用のスクリプトは0.5KB。
  • レスポンシブ対応
    レイアウトはモバイルファーストで、他に2つのブレイクポイントが用意されています。
  • 親しみのあるマークアップ
    classの命名は、Bootstrapのグリッドに類似しています。
  • 垂直のグリッド
    コンテナの全体の高さを分割します。
  • 垂直の揃え
    セルのコンテンツはclassで簡単に揃えることができます。
  • スクロールビュー
    グリッドのセルの一つにコンテンツをスクロールさせることができます。
GridLayoutのサポートブラウザ

サポートブラウザ一覧

IEのサポートには同封の「gridlayout-ie.js」を使用します。
IE8のレスポンシブ対応には「Respond.js」を使用します。

GridLayoutのデモ

デモでは、さまざまなレイアウトを実際に試すことができます。

デモのキャプチャ

Demo: Simple Layout

Webページでよく使用されるシンプルなさまざまなレイアウト。

デモのキャプチャ

Demo: Sticky Footer

コンテンツの量に関わらず、フッタを常に最下部に表示。

デモのキャプチャ

Demo: Holy Grail Layout

ヘッダ・フッタを備えたマルチカラムレイアウト。

デモのキャプチャ

Demo: Email App

3カラムのEメールアプリ用のレイアウト。

GridLayoutの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。
Normalize.cssなどのスタイルシートと併用しても問題ありません。

<head>
  ...
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/gridlayout.css">
</head>

ベースのグリッド

GridLayoutでは「display: table;」を使用してレイアウトを構築するため、各セルの正確なサイズを指定する必要はありません。サイズは均等に定められます。

<div class="gl">
  <div class="gl-cell">...</div>
  <div class="gl-cell">...</div>
</div>

レスポンシブ対応

レスポンシブ用のブレイクポイントは、デフォルトで3つ用意されています。

  • sm
    small: 全てのスクリーンサイズ用
  • md
    medium: 640pxより広いスクリーンサイズ用
  • lg
    large: 1024pxより広いスクリーンサイズ用

その要素がスクリーンサイズで表示したい時は、classを加えます。

<div class="gl gl-sm">
  ...
</div>

スクリーンサイズでカラム数を変更したい時は、それぞれclassを加えます。

<div class="gl">
  <div class="gl-cell gl-md-4 gl-lg-2">...</div>
  <div class="gl-cell gl-md-8 gl-lg-10">...</div>
</div>

sponsors

top of page

©2024 coliss