gihyo.jpサイトのロゴ

週刊Webテク通信

2009年2月第1週号1位は、5つの有名なCSSフレームワーク／気になるネタは、メールアドレスを掲載するときはすぐそばに「広告お断り」の注意書きを

2009-02-12

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年2月2日～2月8日の間に見つけた記事のベスト5です。

1. 5 Popular CSS Frameworks + Tutorials & Tools for Getting Startedhttp://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html

これから使ってみようという人向けに、5つの有名なCSSフレームワークをチュートリアルやツールとともに紹介しています。選ばれたのは、960 Grid System、Blueprint CSS、jQuery UI CSS Framework、Yaml (Yet Another Multicolumn Layout)、Yahoo YUI Grids CSSでした。それ以外のものやCSSフレームワークに関する記事へのリンクもまとめられています。

以前はBlueprint CSS、最近では960 Grid Systemの話題を目にするケースが英文記事では多いのですが、日本ではそれほど盛り上がってないようです。英文サイトだと、文字もピクセル指定でグリッドにきっちり合わせようという作りのサイトが少なくないですしね。

ちなみに960 Grid Systemはその名の通り、横幅960pixelで設計したグリッドレイアウトを実現するためのソリューションです。Yahoo!JAPANが横幅 950pixelになってから、日本でもそのくらいの横幅のサイトが増えましたよね。この960 Grid Systemでは、CSSファイル以外にもデザインのベースとなるグリッドの入った用紙ファイル（Photoshop、Fireworks、 OmniGraffle、Visio用）も用意されているので、それだけを使うというのもアリだと思います。

2. Clear And Effective Communication In Web Design | How-To | Smashing Magazinehttp://www.smashingmagazine.com/2009/02/03/clear-and-effective-communication-in-web-design/

わかりやすく効果的にメッセージを伝えるためのWebデザインについてのまとめです。英文でボリュームがあって文章ばかりなので、全部読むのは大変ですね。まずは「4.Tips for Effective Communication」あたりから読んでもいいかもしれません。

この記事をベースにした日本語記事として、「⁠ウェブデザインにおける効果的なコミュニケーションの取り方 | コリス」があります。簡潔に意訳したものとありますが、それでもかなりのボリュームですね。

3. 15 jQuery Plugins to Fix and Beautify Browser Issues | DevSnippetshttp://devsnippets.com/article/15-jquery-plugins-to-fix-and-beautify-browser-issues.html

ブラウザ間でのCSSのサポートの違いや、CSSの指定でできそうだけどできないことをなんとかしてくれるjQueryのプラグインを紹介しています。

横並びのボックスの高さをそろえる、フッタを常に画面下に配置する、画像を使わずに角丸やドロップシャドウを作るなど、実用的なものばかりです。また、IEの問題を解決するためのものも多いですね。

ボックスの中に写真や解説文があって「詳しくはこちら」のようなリンクテキストがある場合に、ボックス全体をクリックできるようにしてくれるプラグインが「13. Increase the size of click targets」で紹介されていますが、これは使えるケースが多そうです。

図1　ブラウザの問題をなんとかしてくれるjQueryプラグイン集
図1　ブラウザの問題をなんとかしてくれるjQueryプラグイン集

4. 25 Beautifully Minimalist Websites - Part 5 | Vandelay Design Bloghttp://vandelaydesign.com/blog/hosting/minimalist-inspiration/

ミニマル（最小限の）なデザインのWebサイトのデザインギャラリーです。このミニマルデザインを紹介する記事はすでに第5弾になっており、個人的にも好きなシリーズです。

ちなみに、minimal（ミニマル）とminimum（ミニマム）は同じ「最小限」と訳されますが、英語においては微妙な使い方の違いがあるそうです。

1960年代に建築・美術・音楽などの分野で、装飾的要素を最小限に切り詰めた簡素な形式がミニマリズムと呼ばれ始めたようで、芸術的なことの場合ミニマルを使うようですね。

図2　ミニマルデザインの美しいWebサイト集のパート5
図2　ミニマルデザインの美しいWebサイト集のパート5

5. CSS should not be used for layouthttp://www.flownet.com/ron/css-rant.html

久しぶりに見た感のある、テーブルレイアウトの方がいいじゃんという記事です。CSSを使うなと言っているわけではなくて、段組にはテーブルの方が楽だということで、一時期はやったハイブリッドレイアウトを推奨しているような感じです。

CSSで段組レイアウトをした場合、各カラムに背景色やボーダーを引いても自動的に下まで伸びてくれない（低い方のカラムが中途半端になる）など、たしかに初心者がつまずきやすい点は多いですよね。

CSS3のマルチカラムレイアウトが普及して、初心者でも段組がやりやすくなるのに期待したいです。

図3　このサイト自体は一段組みなのでテーブルレイアウトは使われてませんでした
図3　このサイト自体は一段組みなのでテーブルレイアウトは使われてませんでした

以上、メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

先週のほかの記事としては、あいかわらず話題の多いGoogle関連のものや、Twitter関連のものが目立っていましたので、ピックアップして紹介します。

先週の気になるWebサービス

Preloaders.net | Free AJAX animated loading gif'shttp://preloaders.net/

Ajaxの読み込み時に表示するプリローダー画像のアニメーションGIFを作るWebサービスです。

4つのカテゴリーに分かれた豊富な種類からプリローダー画像を選べます。種類のほかに色、背景色、サイズ、スピードをカスタマイズできるようになっています。

簡単にしゃれたプリローダー画像が作れるので、ぜひおためしください。

図4　プリローダーのGIFアニメならおまかせのジェネレーター
図4　プリローダーのGIFアニメならおまかせのジェネレーター

おすすめ記事

記事・ニュース一覧