960pxのグリッドシステムを使用する際に役立つサイト集
Post on:2009年5月22日
960pxのグリッドシステムをサイトデザインに使用する際に役立つ、サンプルや実装例、テンプレート、フレームワーク、グリッドの設計ツール・確認ツールなどを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-01.png)
960pxのグリッドシステムについては、簡単ながら当サイトの紹介記事を参照ください。
ページの幅960pxを基準にして、設計するグリッドデザイン
960pxグリッドシステムのサンプル
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-23.png)
Mashup of Two Rockin' CSS Grids - 960.gs & Blueprint
960pxのグリッドシステムがどのようなカラム構成になるか、エレメントの配置サンプル、レイアウトのサンプルなど。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-24.png)
Typogridphy
タイポグラフィのサンプル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-03.png)
Gridding the 960
960pxのグリッドシステム用の定規画像がダウンロードできます。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-04.png)
Developing the grid that supports your design
960pxのグリッドシステムのベーシックなカラム設計。
960pxグリッドシステムの設計・確認
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-19.png)
gridr buidrrr
960pxのグリッドシステムの設計、エレメントの配置も可。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-05.png)
Grid System Generator
960pxのグリッドシステムの設計、カラムのサンプル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-16.png)
Variable Grid System
960pxのグリッドシステムの設計、CSSのダウンロードも可。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-26.png)
Grid Designer
グリッドシステムの設計。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-27.png)
Plumb
エレメントを配置し、HTMLを生成。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-02.png)
960 Gridder
960pxのグリッドシステムの確認用のBookmarklet。
960pxグリッドシステムのテンプレートや素材
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-25.png)
sparkle960
960pxグリッドシステムのCSSのフレームワーク。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-15.png)
960 CSS Framework
960pxグリッドシステムのCSSのフレームワーク。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-13.png)
Fluid 960 Grid System
960pxグリッドシステム+jQuery(MooTools)のテンプレート。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-20.png)
960px Photoshop Grid Template
960pxグリッドシステムのPSDのテンプレート。
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-21.png)
960 Grid System sketch
960pxグリッドシステムのスケッチ。
960pxグリッドシステムのチュートリアル
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-06.png)
How to Create a Sleek and Textured Web Layout in Photoshop
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-07.png)
How to Elevate Your Website Design Process and Results
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-08.png)
Design a Clean Blog Theme in Photoshop
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-09.png)
How to Convert a Photoshop Mockup to XHTMLCSS
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-10.png)
Design a Beautiful Website From Scratch
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-11.png)
Create a Clean Modern Website Design in Photoshop
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-12.png)
How to Create a Clean Web 2.0 Style Web Design in Photoshop
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-14.png)
Prototyping With The Grid 960 CSS Framework
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-17.png)
Design A Fresh Blog Theme On The 960 Grid
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-18.png)
Design a Web Template using the "960 Grid System"
![サイトのキャプチャ](/wp-content/uploads-2009/2009052201-22.png)
sponsors