960pxのグリッドシステムを使用する際に役立つサイト集

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

サイトのキャプチャ

960 Grid System
demo

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

  1. 960pxグリッドシステムのサンプル
  2. 960pxグリッドシステムの設計・確認
  3. 960pxグリッドシステムのテンプレートや素材
  4. 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"

サイトのキャプチャ

How to create RocknRolla style web design

sponsors

top of page

©2024 coliss