CSSレイアウト参考記事まとめ

はてブも煩雑になってきたし、CSSレイアウト系はこちらにまとめてこうかなと。。

• CSSによる段組（マルチカラム）レイアウト講座
• CSSフレームワークによる作業の効率化 - MdN Interactive
• CSSで実現するエラスティックレイアウト - バシャログ

考察系

• 幅固定か可変かではなく、読者環境に合わせて見やすいデザインを提供しよう - Liner note
• 一行あたりの文字数を制限する elastic layout （エラステックレイアウト） - 2xup.org
• 2xupで実装されているエラステックレイアウトを調べてみた - TRANS
• CSSによる段組レイアウトのフレームワーク - Lucy bag::blog
• 2カラムサンプル13種 - CSS Happy Life
• 今webサイトは幅何pxで製作されているのか - Liquid Paper Clips
• スタイルシートによる崩れない　2カラム　3カラム・レイアウト - YEAR OF THE CAT STYLE
• CSSレイアウト時のよくやる失敗と対処法 - flat memo

新テク

• CSSレイアウトテクニック"偽装絶対指定" - A List Apart

テク

• CSSでフッタ位置をレイアウトする （CSS Sticky Footer） - youmos
• divもfloatもclearもhackも使用しないで組む3カラムレイアウト - coliss

YUI

• Yahoo!が提供するレイアウト用CSSライブラリ - PHPSPOT
• Yahoo! UI Library　Grids CSSを使ってページレイアウト - WEBデザイン　BLOG

Javascript系

• ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」
• リキッドレイアウトでサイズに応じたイベント処理 （wrapResize.js）- youmos
• IEでposition:fixedを再現するFixed positioning - to-R

フレームワーク系

• 複雑な段組みを可能にするCSSフレームワーク「Emastic」- MOONGIFT
• emベースのスタイルシートのフレームワーク -emastic - coliss
• CSSのフレームワーク『Blueprint CSS』まとめ - IDEA*IDEA

関連

• リキッド・レイアウトでチェックボックスを綺麗に並べる - WebOS Goodies
• ボックスを上下左右画面中央に - CSS HappyLife
• クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート - coliss
• HTMLをシンプルに保ちつつ、横並びリンクの区切りを表現する方法 - バシャログ
• スタンダードな画面パターン13選 - creamu

Webサービス

• CSSデザインレイアウトをオンラインで簡単に作成する （YAML）- youmos
• CSS Grid Builder-Yahoo!Library Grid CSS対応ページが簡単にレイアウトできる - WEBデザイン　BLOG

ブックマークレット

• CSSレイアウト情報をレイヤー表示するブックマーク （XRAY）
• グリッドレイアウトブックマークレットを作りました

テンプレート

• CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ - ホームページを作る人のネタ帳
• IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』
• わりとシンプルで使いやすそうなCSSレイアウトのコード12選 - IDEA IDEA
• 3カラムレイアウトのサンプルサイト集 - coliss