ウェブデザインのレイアウトに役立つ11サイト

今回は、ウェブデザインのレイアウトに役立つサイトをいくつかご紹介します。

そのまま使えるレイアウトのサンプルや、いい感じのスクリプト、レイアウトの参考になりそうなインスピレーション系などを集めてみました。

CSS Layouts: A collection of 168 Grid and CSS Layouts

100%のリキッドレイアウト、950ピクセル、750ピクセルの3パターンの横幅で、合計168種類のCSSレイアウトが公開されています。ファイルのダウンロードもできるので、そのまま使えます。


CSS Layouts: A collection of 168 Grid and CSS Layouts

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

こちらも有名40種類のCSSパターン。ダウンロードも可能です。


Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

Little Boxes

一つのボックスから、徐々にレイアウトされていく過程が確認できるので、初心者の方には、分かりやすいかもしれません。


Little Boxes

jQuery UI.Layout Plug-in

jQueryを使ったレイアウト・マネージャーです。ヘッダーとサイドバーのみの簡単なものから、ツールバー、メニュー、ヘルプパネル、ステータスバーなど複雑なレイアウトまでカバーできます。まずは、デモページでどんな事ができるのか確認してみてください。


jQuery UI.Layout Plug-in

dfFlexiGrid

ユーザーがレイアウトを変更できるスクリプトです。こちらのデモページの上部のメニューをクリックすると、レイアウトがアニメーションで切り替わります。


dfFlexiGrid

Setting Equal Heights with jQuery

各カラムのボックスの高さを合わせてくれるスクリプトです。こちらのデモページからどうぞ。


Setting Equal Heights with jQuery

HOKYPOKY. | MULTICOL. jQuery Plugin

MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。


HOKYPOKY. | MULTICOL. jQuery Plugin

footerStickAlt

フッターをブラウザの最下部、もしくはコンテンツの最下部に表示させるCSSのテクニック。デモページはこちらから。


footerStickAlt

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Photoshopのチュートリアルです。ロゴやメニュー、テキストなどの配置と余白の取り方などが説明されています。


How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

960 Grid System

960ピクセルを基準にサイトサムネイルの右上に配置されているボタンをクリックすると、12もしくは16本のカラムを表示してくれるインスピレーションサイトです。


960 Grid System

Grid and Column Designs

美しいグリッドデザインをたくさん集められているサンプル集です。どのサイトもとってもきれいなサイトばかりです。


Grid and Column Designs

デザインblogランキング

コメント 5 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



5 Responses to “ウェブデザインのレイアウトに役立つ11サイト”

  1. links for 2009-01-16 « 個人的な雑記 Says:

    […] ウェブデザインのレイアウトに役立つ11サイト | DesignWalker (tags: webdesign layout) […]

  2. Ys DESIGN Says:

    バランスの良いWEBサイトを製作、アレンジする為のTIPS…

    基本的なデザイン構成から、バランスの良い企業サイト等を製作する為の方法が載っています。(英語)
    「配置」「余白の取り方」「配色」「パターン」等、参考になりますね!
    記事の…

  3. Ys DESIGN Says:

    HTMLで雑誌のような美しい段組みレイアウトを実現するjQueryプラグイン!…

    WEBサイトを閲覧していて、ずらずら縦に長い文章を読んでいるとやはり目が疲れますよね。(私のサイトもそうです。)苦笑
    それを解消する為には、「ページを分割する」か、又は、「…

  4. Bookmark::090131 « Kuu2’s Blog Says:

    […] ウェブデザインのレイアウトに役立つ11サイト | DesignWalker […]

  5. 桜井 Says:

    CSSは便利ですが面倒、というか管理が大変です。すぼらなぼくにはどうもストレスの元です。でも頑張りましょうね。

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ