category
サイト構築 -デザイン

ページの幅960pxを基準にして、設計するグリッドデザイン

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。

960 Grid Systemのキャプチャ

960 Grid System
デモページ

960pxを基準にする理由としては、下記の2つが挙げられています。

  • 最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。
  • 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。

デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることができます。

またサイトでは、資料としてHTML+CSSをはじめ、PDFファイル、PSD・PNG・VSDファイルが一式でダウンロードできます。

グリッドの詳細については、下記ページにもエントリーがあるので参照ください。
グリッドシステム -サイトへの有効活用方法

Post on:2008年3月25日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

yuichis
on 2008年3月26日

印刷した際にA4用紙幅で収まることも、WEBページのレイアウトには欠かせないファクターだと思います。
特に技術系や情報系サイトの場合。
有益な情報は印刷したいと言う人はそれなりに多く、いざ印刷してみるとページが切れて・・・とかw
これはCSSを多様するようになって問題が増えてきましたね。
960pxは同意。でも3コラムにして、中央を700px、左右を130pxずつ振り分け、印刷する際は中央部分のみ印刷されるようにCSSを配慮する等。

p.s.このサイトの確認ブラウザはsafari?firefoxは無難に表示されているけど、Ie6だと不表示部分がありますね(汗

コリス
on 2008年3月26日

おっと、IE6だと非表示になってたり、ずれたりしてしまうところがありますね。
IE8のテストに夢中になってました。

このサイトは実験的なことをするので(このtextareaとかも)、問題点は多数あります。
すぐにIE6の修正はできないですが、ご了承ください。

P.S. ページ幅やグリッド設計はプロジェクトにより異なるので、これが唯一だ、というのは無いと思います。方法論の一つとして、僕はとらえています。

ページの先頭へ




© coliss

RSS