8つのCSS Tipsが紹介されてます。コーディング作業で日常的に、また困った際にも活躍してくれそう。備忘録代わりに紹介。“高さを固定している場合、縦方向にセンタリング”、“レイアウト崩れを防ぐためにDIVからはみだしたコンテンツを隠す”、“IEで通常は常に表示されている縦方向のスクロールバーを非表示に”といったような小技が8つ紹介されています。ブラウザによるレイアウト崩れ（まぁだいたいIEが原因なんだけど）に対処する場合なんかに参考になります。
ウェブデザインでネタとして使える、ボタンデザインのチュートリアル集を作ってみました。とりあえずはアップルのサイトのメインナビゲーションメニューと、Windows Vista風（といっても使った事ないから、どこがどうVistaなのかは不明）のボタンデザインの2つを紹介。どちらもAdobe Photoshopを使った製作過程の紹介。続きを読むクリックで各デザインと、チュートリアルが紹介されているリンクを見る事ができます。多分この記事、今後ネタ帳として随時追加していくと思います。
2008-03-05追記：久しぶりにこの記事追記しました。
WordPress内にある、過去の下書きを見ていたらこんな記事が（2006年の記事でした）。CSSでデザインされた入力フォーム。フォームをデザインしたものってSafariでは再現できない場合をよく見かけるんだけど、こちらで紹介されているものはSafariでも全然オッケー。しかもZipファイルでソースや画像まで配布されてます。最近じゃECサイトやCMSガラみのサイト等、入力フォームのある仕事も多いからとってもありがたい。いつか使おっと。
などのJavascriptを使わずに、サムネール画像をユーザーの必要に応じて大きく見せる方法。デモはこちらで見る事ができます。概要を読むと、CSS書いた事のある人なら「あぁなるほどね」と思うような、ごくシンプルな内容です。リンク指定した画像の上にマウスオーバーすると、“overflow:hidden”されていたものが“visible”に変化するというもの。JSを使えば確かにリッチな見せ方はできますが、ロードに時間がかかったり、他のJSライブラリとのからみで導入できない場合もあるので、そんな時に便利な小技。
テキスト関係のCSSを、分かりやすいインターフェースで生成してくれるジェネレーター。左の入力欄にサンプルテキストを放り込んで、入力欄下部にある各種項目を指定するだけで、ページ右側にCSS記述を生成してくれます。この手のサイトっていくつかあるけど、ロードレスであること、スライダーを動かした時に連動するサンプルテキストの動き、マック環境でも変な動きをしないカラーパレット等、かなり使いやすい印象。特に“line-height”、“letter-spacing”、“word-spacing”の指定方法が秀逸。サイト内のpタグの基本指定を作る際に役立ちそうです。といってもフォントの種類に関しては基本的に英語圏でのサンプルしかないので、日本語フォントに関しては自分で指定する必要があります。
CSSレイアウトの切替スイッチ。いわゆる2カラムと3カラムの切り替えというものではなく、フローズンレイアウト（横幅固定）、リキッドレイアウト（ブラウザウィンドウに追従）、エラスティックレイアウト（文字サイズのサイズ切り替えにレイアウトも連動）の3種を切り替えるという点で新しいと思います。サイトの作り手としてはフローズンレイアウト（ソリッドって言うのが普通なのかな？）の方が作りやすいんだけど、横幅可変の方が見やすいという人もいれば、最近流行りのエラスティックレイアウトが理にかなってるという意見もあるでしょう。だからまぁそのへんは見る人で切り替えちゃってくださいという感じで、親切な機能ですね。その内使おうと思い備忘録。
