ページの幅960pxを基準にして、設計するグリッドデザイン
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。
960pxを基準にする理由としては、下記の2つが挙げられています。
- 最近のモニターは1024x768の解像度をサポートしており、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日
Comments
yuichis
on 2008年3月26日
印刷した際にA4用紙幅で収まることも、WEBページのレイアウトには欠かせないファクターだと思います。
特に技術系や情報系サイトの場合。
有益な情報は印刷したいと言う人はそれなりに多く、いざ印刷してみるとページが切れて・・・とかｗ
これはCSSを多様するようになって問題が増えてきましたね。
960pxは同意。でも３コラムにして、中央を700px、左右を130pxずつ振り分け、印刷する際は中央部分のみ印刷されるようにCSSを配慮する等。
p.s.このサイトの確認ブラウザはsafari？firefoxは無難に表示されているけど、Ie6だと不表示部分がありますね（汗
コリス
on 2008年3月26日
おっと、IE6だと非表示になってたり、ずれたりしてしまうところがありますね。
IE8のテストに夢中になってました。
このサイトは実験的なことをするので（このtextareaとかも）、問題点は多数あります。
すぐにIE6の修正はできないですが、ご了承ください。
P.S. ページ幅やグリッド設計はプロジェクトにより異なるので、これが唯一だ、というのは無いと思います。方法論の一つとして、僕はとらえています。
日々、ウェブデザインとネットニュースとゲームとか。
on 2008年3月26日
ã¢ã³ã¹ã¿ã¼ãã³ã¿ã¼ãã¼ã¿ãã«2ndＧçºå£²åæ¥ã…
ããçºå£²åæ¥ã§ãããææ¥ããããããã¢ã³ãã³ãã¬ã¤ããã°ã«ãªãããã§æãã§ããç¬
å ¬å¼ãµã¤ãã§ãＯＰã®ã ã¼ãã¼ãå ¬éããã¦ã¾ããç§ã… (more…)
takumaの「デザインはあれでアートはそれで」
on 2008年3月27日
ã960ãã¶ã¤ã³ / è¨è¨ã…
ãã¶ã¤ã³å¥½ãã§ãã
ã³ã³ãã³ãè¨è¨å¤§å¥½ãã§ãã
Takumaã§ãã
ã
ãè¨è¨ã
ï¼ å»ºé ç©ã®å·¥äºãæ©æ¢°ã®è£½é ãªã©ã«éãã対象ç©ã®æ§é ã»ææã»è£… (more…)
私がwebサイトのラフデザインを制作する時の流れ | Design Spice
on 2011年6月23日
[...] 殆どのサイト制作で960pxグリッドを使用します。 参考：ページの幅960pxを基準にして、設計するグリッドデザイン | コリス [...]
グラフィック出身から見た印刷物とWebの違い | グラフィックデザイン研究室mayolabo
on 2011年7月14日
[...] で、調べたらちゃんと裏付けがあるんですね。わからないことはほとんどグーグル先生に聞いていました。 参考：ページの幅960pxを基準にして、設計するグリッドデザイン｜コリス [...]
LAMPにCMSでサイト作ってみた(concrete5編)
on 2011年10月20日
[...] CSSのクラスに数字を入れることでカラムの大きさを自由に変えれるというテーマでした。 ここで説明するより、以下のリンク先を読んだほうが理解できると思うので説明を省きます。 18 [...]
TOYS の あ・れ・こ・れ
on 2011年12月5日
幅960pxの謎。
知人がWebの横巾960pxで納得した とコメントがあって調べてみた。トラックバック先の方の記事を見てもらうのが一番早い。読むと凄く納得します。