週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 3 分

ネットで見かけた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アニメならおまかせのジェネレーター

今週の気になるWebネタ

メールアドレスを掲載するときは すぐそばに「広告お断り」の注意書きを | キャリアアップ | nikkei BPnet 〈日経BPネット〉 http://www.nikkeibp.co.jp/article/column/20090202/129106/

「改正特定電子メール法(改正法)」によると,広告メールの受信を望まない人は,ネットなどに掲載するメールアドレスのそばに「広告お断り」の注意書きを明記しなければいけないと日経BPネットの記事にありました。書いておかなければ同意のない広告メールを送られても文句を言えない場合があるとのことです。

注意書きを入れたところで,その人に広告メールが送れなくなる技術があるわけでもないですし,そもそも海外のスパム業者には通用しないと思うので,微妙なところですよね。

広告メール(迷惑メール)のほかに,ネットの「暗」の部分としてさいきん話題なのが,掲示板やブログのコメント欄などでの誹謗中傷です。

Yahoo! ニュースではニュースに対してコメントをつけられるようになっていますが,芸能記事などには結構辛辣な意見が書かれていることが多いです。この Yahoo!ニュースのコメント欄には,そのコメントに対しての「そう思う」ボタンが付いていたのですが,最近「そう思わない」ボタンも追加されました。

また,投稿者のIDを一部表示するようになったりと,誹謗中傷などのコメントに対しての,ゆるやかな対策になっている気もしますね。

Yahoo!ニュース,「私はそう思わない」ボタン追加 」という記事にヤフーの人へのこの機能に関するインタビュー記事が載っています。

迷惑メールにしろネット中傷にしろ,完全になくしてしまうことは難しいでしょうが,ネットスキルが低い人でも安心してネットを楽しめるようにもっと考えていく必要がありそうです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入