便利なCSSジェネレーターサイトが50個もまとめて紹介されてます。グリッドレイアウト生成、CSSフレームワーク、フォント関連ツール、メニューボタンテンプレート、角丸DIV生成、CSSスプライト関連、フォームカスタマイズといった感じで、カテゴリごとに分けられてます。フォント関連ツールとか地味だけど実用的ですな。あとCSSフレームワーク関連も個人的にはアツいところ。
960 Grid Systemをベースにした、リキッドレイアウトのCSSフレームワーク。960が元々「横幅960pxをベースにページ内を12分割（もしくは16分割）したCSSフレームワーク」という位置づけなので、そういう意味じゃ960pxではないですね。リキッドなので。デモページを開いてブラウザウィンドウを左右に拡大縮小すると、ページ内のDIVボックスが均等に伸縮するのが分かります。またmootoolsを使った動きのあるDIVボックスも用意されていて、またこれもおそらくmootoolsを使った表現だと思うんだけど、DIVボックスのヘッダをクリックするとコンテンツエリアが格納されます。リキッドレイアウトのCSSフレームワークってわりと少ない印象なので、元々960gsを導入済み、または導入経験のあるコーダーの人でリキッドレイアウトが必要という際にイイですね。
CSS3のチートシートがPDFとして配布されています。こりゃ印刷してデスクの引き出しにでも忍ばせておくと後々イイかも。PDFの中身を見ると、見慣れないプロパティーがチラホラ。まぁ今後徐々に慣れていくほかありませんな。ちなみに赤字はショートハンド記述だそうです。自分もぼちぼち勉強してかなきゃなー、っとわりとのんびり構えております。
クロスブラウザコーディングをする上での、15のCSS Tips。CSSレイアウトは最近じゃ当たり前になりましたが、どのブラウザでもちゃんとレイアウト崩れを起こさないように作るというのは結構手間です。っていうかその手間を生んでる原因の大半はIEのクソ仕様なんですけどね。けどそんな事でグチっても仕方ありません。コーダー的にはいかにクロスブラウザコーディングの生産性を高めれるかが大事なんです。というわけで基本のCSSリセット（初期化）に始まり、IE、Opera、Safari、Chromeの各ハック、ウェブサービスを使ったレンダー確認、CSS補助ツール、IEのバージョン違い共存方法などが紹介されてます。コーダーならとりあえず押さえておいて損はない内容ですね。
CSSジェネレーターサイトが40個紹介されてます。フォント定義、CSSスプライト、CSSボタン生成、バリデーション、グリッドレイアウト補助ツール、レイアウト生成、単位変換ツール、CSSメニュー生成、CSSフレームワーク、スタイルウィザードなどなど盛りだくさん。こうやって並べてみると、数年前に比べて多くのデザイン要素をCSSに移行してるんだなーと改めて思ったり。この手のウェブアプリというか便利ツールって意外と使えるんスよね。特にフォントや単位変換などは実用的でオススメ。
CSSを使って描くサイトマップ。ただし背景用に画像ファイルは使われています。これイイっすね。サイト内の“サイトマップ”ページ用に使うもよし、顧客との打ち合わせの際に作る暫定サイトマップ用に使うのもアリだと思います。生産性がどれほどのものかは使ってみないと分かりませんが。“Download”のリンクよりソース一式をDLできます。デザイナーの方に是非。
近い将来ウェブデザイナーが使う事になるであろう、HTML 5とCSS 3の両新規格を使って作られたテストサイトが紹介されています。CSS 3に対応したブラウザ、例えばSafari4やFireFox3.5以上で見ましょう。“Source”クリックでソースダウンロード、“Demo”クリックでデモサイトを見れます。HTML5らしく、＜header＞とか書かれてますね。またデザインの要素はいくらか画像からCSSに移っていて、DIVボックスのドロップシャドウや角丸表現などはCSSにより描画されています。近い将来コーダーに要求される技術になってくると思うので、今から予習しておいて損はないという感じでしょうか。いやしかし実際のトコこうした新技術が業務に自然に入り込んでくるのっていつになるんでしょうね。TableレイアウトからCSSレイアウトへの変化はわりと早めにしちゃった方だけど、HTML5とCSS3への移行時期については見当が付かないなぁ。
