ウェブデザインのレイアウトに役立つ１１サイト
今回は、ウェブデザインのレイアウトに役立つサイトをいくつかご紹介します。
そのまま使えるレイアウトのサンプルや、いい感じのスクリプト、レイアウトの参考になりそうなインスピレーション系などを集めてみました。
CSS Layouts: A collection of 168 Grid and CSS Layouts
100%のリキッドレイアウト、950ピクセル、750ピクセルの３パターンの横幅で、合計168種類のCSSレイアウトが公開されています。ファイルのダウンロードもできるので、そのまま使えます。
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
こちらも有名４０種類のCSSパターン。ダウンロードも可能です。
Little Boxes
一つのボックスから、徐々にレイアウトされていく過程が確認できるので、初心者の方には、分かりやすいかもしれません。
jQuery UI.Layout Plug-in
jQueryを使ったレイアウト・マネージャーです。ヘッダーとサイドバーのみの簡単なものから、ツールバー、メニュー、ヘルプパネル、ステータスバーなど複雑なレイアウトまでカバーできます。まずは、デモページでどんな事ができるのか確認してみてください。
dfFlexiGrid
ユーザーがレイアウトを変更できるスクリプトです。こちらのデモページの上部のメニューをクリックすると、レイアウトがアニメーションで切り替わります。
Setting Equal Heights with jQuery
各カラムのボックスの高さを合わせてくれるスクリプトです。こちらのデモページからどうぞ。
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。
footerStickAlt
フッターをブラウザの最下部、もしくはコンテンツの最下部に表示させるCSSのテクニック。デモページはこちらから。
How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds
Photoshopのチュートリアルです。ロゴやメニュー、テキストなどの配置と余白の取り方などが説明されています。
960 Grid System
960ピクセルを基準にサイトサムネイルの右上に配置されているボタンをクリックすると、12もしくは16本のカラムを表示してくれるインスピレーションサイトです。
Grid and Column Designs
美しいグリッドデザインをたくさん集められているサンプル集です。どのサイトもとってもきれいなサイトばかりです。
|
|
|
1月 16th, 2009 at 9:06 PM
[...] ウェブデザインのレイアウトに役立つ１１サイト | DesignWalker (tags: webdesign layout) [...]
1月 17th, 2009 at 1:20 AM
バランスの良いWEBサイトを製作、アレンジする為のTIPS…
基本的なデザイン構成から、バランスの良い企業サイト等を製作する為の方法が載っています。（英語）
「配置」「余白の取り方」「配色」「パターン」等、参考になりますね！
記事の…
1月 21st, 2009 at 1:00 PM
HTMLで雑誌のような美しい段組みレイアウトを実現するjQueryプラグイン！…
WEBサイトを閲覧していて、ずらずら縦に長い文章を読んでいるとやはり目が疲れますよね。（私のサイトもそうです。）苦笑
それを解消する為には、「ページを分割する」か、又は、「…
2月 1st, 2009 at 4:02 AM
[...] ウェブデザインのレイアウトに役立つ１１サイト | DesignWalker [...]
2月 28th, 2009 at 10:50 PM
CSSは便利ですが面倒、というか管理が大変です。すぼらなぼくにはどうもストレスの元です。でも頑張りましょうね。