Webデザインにグリッドシステムを利用する

均等なマス目に分割したグリッドに従ってレイアウトするグリッドデザインは、正確で規則的なレイアウトを実現でき、Webサイトに整然とした印象を与える手法です。専用のフレームワークもありますが、この記事では簡単な利用方法をいくつか紹介します。

フレームワークとして配布されているグリッドシステム(Grid System)をフルで活用するには、添付されているCSSに定義されているクラスをマークアップするときに指定します。
しかし単純にレイアウト確認のために背景としてグリッドを表示しておく利用方法もあります。

私も実際のところ、グリッドを背景に表示しておいて、レイアウト崩れがないか確認するだけの目安として使うほうが多いです。

【コンテンツ】

  1. 960 GRID SYSTEM
  2. 960 Gridder
  3. griddle.it

960 GRID SYSTEM

グリッドシステムとしてはもっとも有名なサイトです。
PhotoshopやIllustrator用に作成されたグリッドファイルもダウンロードできますので、デザインカンプを作成するときにも活用できます。

CSSやテンプレートのダウンロードは下記ページから行います。
http://960.gs/

このテンプレートを一番簡単に活用するには、ダウンロードした圧縮ファイルに含まれている PNGファイルを html要素か body要素の背景として設定することです。

以下は CSSの設定例です。

ブラウザでの表示は以下になります。

960 GRID SYSTEM の表示例

960 Gridder

サイトの HTMLや CSSファイルに何も追加する必要のないブックマークレットが便利です。
Webページをブラウザで表示し、登録したブックマークレットをクリックすればグリッドが描画されます。

下記ページにアクセスします。
http://peol.github.io/960gridder/

ボタンをブックマークバーにドラッグします。

960 Gridder サイト

あとはブックマークレットをクリックすれば、グリッドが描画されます。この例では水平線も表示しています。

960 Gridder 表示例

左に表示されている[960 Gridder]をクリックすると、カラム数や表示色を変えることができます。
[width]はガーターの幅です。全体の幅は960pxで固定されていますので、カラム幅はガーター幅とカラム数で決まります。

960 Gridder 条件設定画面

griddle.it

背景画像を用意しなくても、backgroundプロパティに URLを指定するだけで背景にグリッドを描画できます。
サイトは下記になります。
http://griddle.it/

griddle.it サイト

URLの書式は以下になります。全体幅は両端のガーターを除いた数値です。

http://griddle.it/[全体幅]-[カラム数]-[ガーター幅]

例えば、全体幅:940px、カラム数:12、ガーター幅:20px としたら、以下のようにCSSに設定します。

ブラウザでの表示は以下です。

griddle.it 表示例

ガーターなしのグリッド

ガーター幅を省略した場合、あるいは "0" を指定した場合はガーターなしのグリッドになります。

ガーターなし表示例

色の変更

URLにクエリパラメータを指定すると色を変更できます。

  • color: カラム色
  • background: 背景色
  • text: テキスト色

例えば以下のように設定してみます。

ブラウザでの表示は以下です。

色指定した表示例

水平線の描画

クエリパラメータに "horizontal=間隔" を指定すると、水平線を描画することができます。

例えば以下のように設定してみます。

ブラウザでの表示は以下です。

水平線を加えた表示例

テキストの非表示

テキストを表示したくないときは、「num=false」あるいは「num=0」をクエリパラメータに指定します。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ