960pxのグリッドシステムを使用する際に役立つサイト集
Post on:2009年5月22日
960pxのグリッドシステムをサイトデザインに使用する際に役立つ、サンプルや実装例、テンプレート、フレームワーク、グリッドの設計ツール・確認ツールなどを紹介します。

960pxのグリッドシステムについては、簡単ながら当サイトの紹介記事を参照ください。
ページの幅960pxを基準にして、設計するグリッドデザイン
960pxグリッドシステムのサンプル

Mashup of Two Rockin' CSS Grids - 960.gs & Blueprint
960pxのグリッドシステムがどのようなカラム構成になるか、エレメントの配置サンプル、レイアウトのサンプルなど。

Typogridphy
タイポグラフィのサンプル。

Gridding the 960
960pxのグリッドシステム用の定規画像がダウンロードできます。

Developing the grid that supports your design
960pxのグリッドシステムのベーシックなカラム設計。
960pxグリッドシステムの設計・確認

gridr buidrrr
960pxのグリッドシステムの設計、エレメントの配置も可。

Grid System Generator
960pxのグリッドシステムの設計、カラムのサンプル。

Variable Grid System
960pxのグリッドシステムの設計、CSSのダウンロードも可。

Grid Designer
グリッドシステムの設計。

Plumb
エレメントを配置し、HTMLを生成。

960 Gridder
960pxのグリッドシステムの確認用のBookmarklet。
960pxグリッドシステムのテンプレートや素材

sparkle960
960pxグリッドシステムのCSSのフレームワーク。

960 CSS Framework
960pxグリッドシステムのCSSのフレームワーク。

Fluid 960 Grid System
960pxグリッドシステム+jQuery(MooTools)のテンプレート。

960px Photoshop Grid Template
960pxグリッドシステムのPSDのテンプレート。

960 Grid System sketch
960pxグリッドシステムのスケッチ。
960pxグリッドシステムのチュートリアル

How to Create a Sleek and Textured Web Layout in Photoshop

How to Elevate Your Website Design Process and Results

Design a Clean Blog Theme in Photoshop

How to Convert a Photoshop Mockup to XHTMLCSS

Design a Beautiful Website From Scratch

Create a Clean Modern Website Design in Photoshop

How to Create a Clean Web 2.0 Style Web Design in Photoshop

Prototyping With The Grid 960 CSS Framework

Design A Fresh Blog Theme On The 960 Grid

Design a Web Template using the "960 Grid System"

sponsors