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

1. px - em - % - pt - keywordhttp://css-tricks.com/css-font-size/

CSSでの文字サイズ指定についての記事です。どの指定方法がベストかは場合によりけりとしながら、keyword、px、em、%、ptの順で推奨としているようです。

簡単にまとめてしまうと、扱いやすさのkeyword、細かく設定しやすいけど問題もあるpx、ちょっと面倒だけどプロ向きのemと%、印刷用のpt、といったところでしょうか。

px指定での問題とは、Internet Explorerで文字サイズをリサイズできないという、よく知られる問題です。Internet Explorer 7以降では標準での拡大／縮小が文字サイズでなくページ全体の拡大／縮小となったので、その問題も解決したようなしてないような…。

em、%はIEでのリサイズ問題もなく、かつkeywordより細かい単位で指定できるので、Webデザイナーの間では好まれています。しかし、親要素のサイズを継承した上での相対的なサイズとなるので扱いに注意が必要です。

この記事では、p要素に1.2em、li要素に1.2emを指定していた場合、liの中にpを入れると、そのサイズは1.2×1.2（=1.44em）となってしまうという例で、相対サイズ指定のやっかいさを説明しています。

文字サイズの指定方法については、これが絶対的なベストという方法がないのが悩ましいところですが、そこがまたCSSデザインの面白いところかもしれません。

2. ウェブデザインのクオリティをアップする7つのポイント | コリスhttp://coliss.com/articles/build-websites/operation/design/quality-within-web-design.html

「How to Spot Quality within Web Design: Examples & Tips」というエントリーの翻訳記事です。余白や行間を十分に取るなど当たり前のようなことも多く書かれていますが、その当たり前のことができていないサイトも多いということでしょう。

境界部分に1ピクセルのラインを入れるとか、ソフトなグラデーションを使うなど、細部へのこだわりが質を高めるということを肝に命じたいですね。

ところで最近、アメリカのサイトでもいわゆる「バタくさい」感じのデザインってあまり見かけない気がします。派手なものより細部にこだわった上質なデザイン志向が流行なんでしょうかね。

3. 24 HTML Form Elements Customization Techniques | NetWaverhttp://www.netwaver.com/23/24-html-form-elements-customization-techniques/

フォーム要素の見た目をカスタマイズするソリューションのリンク集です。CSSだけでフォームの見た目を変えるには限界があるので、JavaScriptが使われたものばかりです。ライブラリになっていて、実装は簡単なものが多いと思います。

一般的な問い合わせフォームの場合には、フォーム要素の見た目を変えてしまうとユーザーの混乱をまねく可能性もあります。ページ内のナビゲーションとしてドロップダウンを使う場合などは、うまくデザインしてサイトの雰囲気を壊さないようにしたいですよね。

余談ですが、このブログの作者はフィリピンのセブ島出身のWebデザイナーのようです。

4. Web Design Trend Showcase: Horizontal Bandshttp://line25.com/articles/web-design-trend-showcase-horizontal-bands

流行のWebデザインのギャラリーとして、横幅いっぱいに帯が伸びているサイトが大量に紹介されています。

2位で取り上げた「ウェブデザインのクオリティをアップするポイント」通り、ソフトなグラデーションや境界部分の1ピクセルラインが多くのサイトで使われていますね。

グラデーションで塗られた水平方向の帯画像を作り、CSSで指定するところまで紹介されていますが、これは特筆すべきテクニックを使っている訳ではありませんでした。

5．50 Excellent Corporate Website Designs | Webdesigner Depothttp://www.webdesignerdepot.com/2009/04/50-excellent-corporate-website-designs/

ステキなデザインの企業サイトのギャラリーです。業種はあまり幅広く取り上げられてないようで、ほとんどIT企業のような気もします。Webサービスのサイトが多いようで、そのせいでデザインも似通っているんじゃないでしょうか。アイコンを使ったサイトが多いですね。

また繰り返しになってしまいますが、ソフトなグラデーションや境界部分の1ピクセルライン、横幅いっぱいの帯、と2位や4位で取り上げたことと同じようなデザインの傾向がうかがえます。

人物が出てこないサイトが多いのも気になったのですが、これはIT企業のサイトが多いからかもしれません。

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

そのほか先週の記事から、なぜか最近よく見かけるFirefoxのアドオン関連の記事を紹介します。

• 15 Firefox add-ons for Web developers | Webware - CNET
  WebデベロッパーのためのFirefoxアドオンの紹介記事です。
• Lifehacker - Top 10 Must-Have Firefox Extensions, 2009 Edition - Firefox Extensions
  Firefoxの必携アドオン2009年版だそうです。
• Mozilla Re-Mix: 【⁠2009年4月版】きっと誰かの役に立つ44個のFirefoxアドオン。
  単機能のFirefoxアドオンを多数紹介しています。
• はてなブックマークFirefox拡張で新しいインターネットを体験しよう
  はてなブックマークを便利に活用するためのFirefoxアドオンが登場しました。はてなブックマークユーザーでなくても、見ているページのブックマーク数やブックマークコメントを見られる機能は便利だと思います。

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

mixPaper | ミックスペーパーは電子ブック配信サービスですhttp://mixpaper.jp/

「mixPaper」は日本の企業が提供する、ユーザー参加型電子ブック投稿・共有サイトです。

ページごとに分けて用意した画像をアップロードするだけで、Flashベースの電子ブックが簡単に作成できるようです。無料会員でも50MBまでの容量が使え、さらに容量が増やせる有料プランも用意されています。

商用目的の利用も可能とのことで、会社案内やカタログをアップしてもいいとのこと。作った電子ブックはブログパーツ化もできるので、製品カタログを電子ブック化して製品ページに埋め込むなんてこともできそうですね。

「電子ブック共有サイト「mixPaper」公開、ブログパーツも - ファンタジスタ | ネット | マイコミジャーナル」に紹介記事が掲載されていました。