デザイナーなら知っておくべきCSSテクニック50、という記事。最近流行りのCSS3がらみではなく、CSS2.1ベースで実現できる各種Tipsといった内容です。紹介されている量や質は悪くないんですが、なんかサムネールの縦横比が変ですねこの記事。と思って画像単体で表示してみたら、HTML側で引き延ばしてました。見た目はアレですが、内容としては確かにデザイナーが知っておいて損はないものでした。
CSS3を使ってこんな事ができるよ、というよりは、このサイトのココはCSS3で表現されているよ、という形での紹介記事。例えばエンボス加工のように見えるテキストエフェクト、ボックスの角を丸くしてドロップシャドウを付ける、DVD盤が回りながら出てくる、サイト内の動きをCSS3で描画している、テキストシャドウなど、CSS3を使った様々な表現とその作例を見る事ができます。また記事下部では、どんな時にCSS3を使うべきなのかについての解説もあります。時期的になかなかホットです。
印刷用のCSS記述においてやっておくとイイよ、という内容の記事。ナビゲーションメニューを消す、コンテンツエリアを広げる、背景色やテキストカラーをなくす、フォントの種類や大きさに注意する、ブログであればコメント表示を消す、プリントアウトした時にだけ表示されるメッセージを追加するといった内容が紹介されてます。プリントアウトする際、多くのユーザーはそのサイト内の情報だけを求めているので、ナビゲーションをなくしてコンテンツエリアを広くするというのは親切ですね。
CSS関連の便利なウェブアプリケーションが紹介された記事。いわゆるCSS補助ツールですね。classやIDの抽出、外部CSSをインライン化するツール、CSS Spriteジェネレーター、カラーピッカー、CSSファイルのコンバインツール、グリッドシステム、斜めや円形のグリッド作成ツールなどがその内容。CSSの上級テクニックを簡単に実現するためのツールが多い印象。オンラインツールを使って効率的に作業をしたい場合にナイスな記事。
クールでいまどきな感じの、CSSナビゲーションが30例紹介された記事。ところでCutting Edgeって最先端って意味なんですね。最先端って言うだけあって、モダンな印象のデザインが多いです。最近はただ単にデザインに凝るだけではなく、JSを組み合わせてドロップダウンしたり、オンマウスでポップアップを出現させて簡単な説明を表示したりして、機能面で工夫されたナビゲーションを多く見ます。ようするに装飾と同じくらい機能美が求められるんでしょうね。ナビゲーションデザインする際のネタ帳になります。
jQueryとCSSを使って行うクールな表現がまとめられた記事。CSSで装飾するのはコレ系のテクニックでは当然のことなので、いわゆるクールなjQueryプラグイン、みたいな内容です。スライダー、CSSスイッチャー、アコーディオン、動きのあるホバー表現、フェードを使ったホバー表現、ポップアップ、CSS Sprite、ドロップダウンなどが紹介されてます。サイト内でJSを使ってリッチな表現を行いたい場合にナイスな記事。
今年はCSS3関係で結構な盛り上がりが期待されるところではありますが、制作者にとったら「まーた新しい事覚えなきゃなんないのか・・・」みたいな部分もあるにはあります。まぁウェブで食ってく事をチョイスした時点で、こればっかりは逃れられませんが、そこが楽しいところでもあります。というわけでCSS3を学ぶ際に有効な、ベストチュートリアルがまとめられた記事がこちら。CSS3を使った新しい表現の紹介から、過去の記述を簡略化する方法、チートシートなど色々あります。HTML5と併せて、今年からまた過渡期に入っていくような感じなので、ウェブに携わる人間として気にしていきたいところです。
CSSとJavascript。以前はHTMLさえ書ければウェブデザイナーと言われましたが、最近じゃこのあたりも含めて理解できないとウェブデザイナーとは言えないそうです。というわけでCSSとJSを使った、使えるテクニックをまとめた記事。オンマウス時のアクションをJSで工夫したものや、ひとつの画像をウマく使い回すためのTips、動きを使って表現するJSなど、リッチな表現を目指す際に有効なテクニックが色々紹介されてます。各リンク先では細かな実装方法などの解説もあり勉強になります。
