週刊Webテク通信

2009年7月第2週号　1位は，カラムの高さをそろえる4つの方法／気になるネタは，マイクロソフトのブラウザOS「Gazelle」から探る「Google Chrome OS」

Webテク, Webデザイン, Web広告, Illustrator, ワイヤーフレーム, Google, 洋書, OS, ブラウザ, Gazelle

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

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

1. Four Methods to Create Equal Height Columns | Build Internet!http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

横並びのカラムの高さをそろえる方法がまとめられています。

紹介されている方法は以下の4つ。括弧内はデメリットです。

  1. CSSのdisplay:tableを使う方法
    （⁠7以前のIEでは使えない）
  2. JavaScriptを使う方法
    （⁠JavaScriptがオフの環境では使えない）
  3. 背景画像を使う方法
    （⁠可変幅では使えない）
  4. 背景色用のdiv要素で囲む方法
    （⁠余計なdivを使いCSSの記述も複雑）

3の，全体を囲む要素にカラムごとに色分けした背景画像を「repeat-y」で配置するという方法はよく使われていると思います。上下に別画像を追加して，角丸や影付きの矩形で囲まれているようにもできますしね。

なお，ミツエーリンクスが配布しているJavaScriptライブラリ「MJL (MITSUE-LINKS JavaScript Library)」には，要素の高さをそろえる機能が用意されています。親要素に「class="equalize"」を付けるだけと簡単で，わたしはよくこの機能を利用させてもらっています。

図1　カラムの高さをそろえる方法を細かく紹介しています

図1　カラムの高さをそろえる方法を細かく紹介しています

2. Mastering Illustrator Effectshttp://www.webdesignerwall.com/tutorials/mastering-illustrator-effects/

Illustratorの「効果」機能をくわしく紹介しています。基本的な使い方が中心ですが，意外と知らないことや使ったことのない機能が見つかる人も多いと思います。

作例として紹介した図形がすべて入ったaiファイルをダウンロードすることもできます。図形の素材集としても使えるかもしれません。

図2　Illustratorの効果を豊富なサンプルとともに紹介しています

図2　Illustratorの効果を豊富なサンプルとともに紹介しています

3. Using Wireframes to Streamline Your Development Process | Webdesigner Depothttp://www.webdesignerdepot.com/2009/07/using-wireframes-to-streamline-your-development-process/

Webサイト開発のプロセスを効率化するワイヤーフレームの使い方の記事です。ワイヤーフレームを作るときのポイントや使うツール，いろんなパターンのサンプルなどが紹介されています。

よく言われることですが，グレイスケールでワイヤーフレームを作ったほうが，要素の配置を確認するなどの目的に集中できていいとのことです。カラーで作るとクライアントが最終のモックアップだと誤解する恐れもあるというアドバイスには，思い当たる節のある人も多そうですね。

4. 40 Free and Essential Web Design and Development Books from Google : Speckyboy Design Magazinehttp://speckyboy.com/2009/07/06/40-free-and-essential-web-design-and-development-books-from-google/

Googleブックスで読むことができる，WebデザインやWebデベロッパー向け書籍（洋書）の紹介です。便利な時代になったものですね。

今ではWebデザインに関する日本語の書籍も充実していますし，良い洋書はいずれ翻訳版が出るので洋書に手を伸ばす人も少ないかもしれません。とはいえ，無料でパソコン上で読めるとなると，興味のある人も多いんじゃないでしょうか。

試し読みとしてここで読んで，気に入ったら購入するのもいいですよね。

図3　Web関連の洋書が無料で読めます

図3　Web関連の洋書が無料で読めます

5. 株式会社サムライファクトリー　｜　インフォメーション　-　【OS・ブラウザー国内シェア調査】～Windows国内シェアは94%。Google Chromeの普及率は1.06%へ～　2009年6月度発表http://www.samurai-factory.jp/info/2009/2009070796.html

国内最大級のユーザー数というアクセス解析ツール「忍者アクセス解析」を設置しているサイトの解析データから集計した，OS・ブラウザシェアの調査結果です。

この発表を見て，Webデザイナーが気になるのはIE5，6あたりのシェアじゃないでしょうか。

IE5は0.54%ということで，さすがにサポート対象から外してもよさそうな感じです。IE6は25.64%なので，まだまだ対応が必要でしょうね。

OSとブラウザのクロス集計では，Macintosh / IE 5の0.17%というのが，個人的に気になる数字でした。未だにDTPユーザーはMac OS 9で使っている人も多いようで，その辺が反映された数字かなと思う次第です。

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

そのほか先週の記事から，ちょっと面白い情報を紹介します。

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

10 Minute Mailhttp://www.10minutemail.com/10MinuteMail/

10分間だけ使える使い捨てのメールアドレスを作れるサービスです。

あやしいWebサービスに登録してみるときに使えそうです。もちろんメールアドレスを教えたくない相手と一度だけやりとりするのにも便利でしょう。メール送信テスト用の宛先として使うという利用法もあるかもしれません。

アクセスするといきなりメールアドレスが作られるシンプルさがいいですね。「⁠もう10分延長」というリンクを押すと時間が延長できるようです。

『[ウェブサービスレビュー]10分だけの使い捨てメールアドレスが取得できる！「10 Minute Mail」』に詳しいレビューが掲載されています。

図4　シンプルで日本語にも対応しているサービスです

図4　シンプルで日本語にも対応しているサービスです

今週の気になるWebネタ

【レポート】マイクロソフトのブラウザOS「Gazelle」から探る「Google Chrome OS」 (1) マイクロソフトのブラウザOS「Gazelle」とは? | パソコン | マイコミジャーナルhttp://journal.mycom.co.jp/articles/2009/07/09/gazelle/index.html

Google Chrome OSが話題ですが，マイクロソフトも「Gazelle」というブラウザOSのプロジェクトが既に存在していたということが報道されています。

セキュリティ的に安全で，パフォーマンスの低下やクラッシュが起きにくいものになるようです。まだまだ研究段階のプロジェクトのようですが，Google Chrome OSが発表されたことでGazelleへの注目度も高まったみたいですね。

Webテク, Webデザイン, Web広告, Illustrator, ワイヤーフレーム, Google, 洋書, OS, ブラウザ, Gazelle

著者プロフィール

芦之由（あしのよし）

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

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

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