ウェブデザインのレイアウトに役立つ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

関連記事

5件のコメント

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

  2. ピンバック: Ys DESIGN
  3. ピンバック: Ys DESIGN

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です