Flickrをベースにしたフォトギャラリーというと、わたくしも以前こんなものを作りましたが、ここで紹介されているのはもうちょっとちゃんとしたものです。サムネールをクリックすると、ちゃんとサイト内で大きい画像が表示されます。デモページはこちらから。設置には多少PHPの知識がいるっぽいけど、基本的にチュートリアルに沿ってやればイケそうな感じです。Flickr API Keyの取得も必要となります。ただのFlickrバッジではなく、ちゃんとしたフォトギャラリーをサイト内に設置したい場合にいいですね。
より良いCSS記述のためのTipsがまとめられた記事。例えばまずはCSSリセット（初期化）からスタートする、マージンを付けて読みやすくする、コメントの付け方、ハックは別ファイルに、ショートハンドを使う、目次を付ける、プロパティの指定をアルファベット順にするなど。多くのコーダーの人はすでに実践してる事だとは思うけど、例えば簡単な目次を付けるのはイイなぁとか思いました。コーディングを共同作業する案件などでこういう事ができると好印象を持たれそうです。
テキストの量に応じて幅が変わる、シンプルな角丸ボタンをCSSだけで動作させるというもの。このあたりを見ると、JSファイルが使われていない事が分かります。HTML記述がいわゆるspanタグの2重がけするものでわりと簡単であるという点、 Inactive, Active, Hoverという3つの状態を制作できる点において優れているなぁという印象。汎用性は高そうです。早速使わせてもらいます。
CSSで角丸ボックスを作る方法がいくつもまとめられた記事。最近じゃCSS3を使う方法をよく見かけるけど、それだとIEユーザーの画面では描画されないので、角を丸くする事がマストのデザインであればCSS2で作成する必要があります。またJSを併用して描画する方法もあるので、サイトの趣旨やターゲットに沿った角丸ボックスの描画法が見つかると思います。まぁ画像でやっちゃうのが慣れれば早いという話でもありますが。
グリッドレイアウトに関するテクニックとツールが紹介されています。グリッドレイアウトを導入したサイトの好例なども交え、概要からリソース、ツールとして機能するサイトの紹介までされてます。この記事で知った1KB CSS Gridというサイト、なかなかホットです。カラムの数と1カラムのWidth、マージン部のWidthを指定するだけで、それに応じたCSSを生成してくれます。あと個人的に好きなグリッドシステムである960gsなんかもナイス。こうしたグリッドレイアウトのツール類って、汎用フレームワークよりも自家製のフレームワークの方がイイ場合もあるので、使いどころが難しいと言えば難しいんですが。
Ultimate Guide To Grid-Based Web Design: Techniques and Tools
なんか今日CSSの話題ばかりっすね。ここではCSSに関するわりと初歩的なTipsがまとめて紹介されてます。CSSリセット（初期化）、マウスポインタを指マークに、CSSスプライト、フォームのフォーカス関連、コメントの付け方Tips、センタリング、印刷用のスタイルシートといった内容。今じゃ「それくらい知ってるよ」な感じのものばかりですが、CSS触り始めの頃ってセンタリングするだけで「どうすんじゃい！」と唸っていたものです。これから始めようという人にはちょうどイイ感じの内容だと思います。
これなかなかアツい。簡単にできるCSS3を使ったトリック集なんだけど、ただ角丸にしたりテキストにブラーをかけるだけじゃなく、それらを動きを使って見せてます。説明するよりデモページを見た方が早いですね。各オブジェクトにオンマウスすると、Flashのトゥイーンみたいな動きでスタートとエンドの中間を補完する形で動きます。最初JS使ってるんだと思ってソースDLしたら、CSSだけでした。-moz-transition: all 0.1s ease-in-out;あたりがソレっぽいです。CSS3でこんな事できるんですね。これを指定したところでレガシーブラウザには特に悪影響なさそうなので、モダンブラウザユーザー向けにちょっとした一手間をかける事もできそうです。
オンラインで使えるCSS関連ツールがまとめられた記事。CSS関連とは言っても結構その内容は幅広く、チートシート、フォントタイプセット、レイアウト制作補助、グリッドデザイン補助、CSSフレームワーク関連ツール、デバッグツールなど色々揃ってます。自分の場合オンラインツールでよく使うのはフォント関連。タイプセット作ったり単位変換したり。用途が限られている分結構便利なんですよね。
