週刊Webテク通信

2009年10月第4週号　1位は，CSSのfloatプロパティの謎，気になるネタは，Barnes & Noble、電子書籍端末「nook」を発表—Kindleキラーとなるか

Webテク, Webデザイン, Web広告, CSS, AIR, jQuery, 電子書籍

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

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

1. The Mystery Of The CSS Float Property ≪ Smashing Magazinehttp://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

「CSSのfloatプロパティの謎」といったタイトルですが，たしかにやっかいな挙動をしてくれるfloatプロパティに関するまとめ記事です。

もともとfloatプロパティは段組みのためのものではないので，段組みレイアウトに使うにはテクニックが必要で，初心者がつまずきやすいところです。

ボックスの中の画像をfloatさせた場合，全体の高さが自動で拡張されないため画像がボックスからはみだしてしまう現象が起きる場合があります。これはよく知られるもので仕様としては間違ってないのですが，これを解決するのにClearfixというテクニックがよく使われます。

この記事でもやはり，Clearfixに関する解説がメインになっていますね。

Internet Explorerではfloatに関して問題が起きることが多いのですが，バグ対策のリンク集が用意されています。

図1　CSSのfloatプロパティのまとめ記事

図1　CSSのfloatプロパティのまとめ記事

2. ウェブデザインの見栄えをよくするための7つのキーワード | コリスhttp://coliss.com/articles/build-websites/operation/design/7-key-principles-that-make-a-web-design-look-good.html

「7 Key Principles That Make A Web Design Look Good」という記事を翻訳しています。

7つのPrinciple（原理，原則）とは，

  1. バランス
  2. グリッド
  3. カラー
  4. グラフィック
  5. タイポグラフィー
  6. ホワイトスペース
  7. コネクション（一貫性と整合性）

とのことです。

図2　Webデザインの見栄えをよくするためのレクチャー記事

図2　Webデザインの見栄えをよくするためのレクチャー記事

3. 50 Air Apps and Browser Addons for Web Designers and Developers ? Web.AppStormhttp://web.appstorm.net/roundups/50-air-apps-and-browser-addons-for-web-designers-and-developers/

Webデザイナー／デベロッパーのための，AIRアプリとブラウザのアドオンを紹介しています。

AIRアプリ，ブラウザ＋アドオンは，ほとんどの場合OSを選ばずに使えるというのもうれしいですね。

Adobeが開発したAIRですが，本格的な画像編集ソフトなどがAIRアプリで出てきて，Adobeのソフトがいらなくなったりしそうで複雑です。

図3　AIRアプリとブラウザアドオンを50個も紹介

図3　AIRアプリとブラウザアドオンを50個も紹介

4. 10+ jQuery Form Enhancement Plugins | tripwire magazinehttp://www.tripwiremagazine.com/ajax/developer-toolbox/10-jquery-form-enhancement-plugins.html

フォームを機能強化するためのjQueryプラグインを紹介しています。見た目を変えるためのものもありますが，使い勝手を向上させるためのものが中心ですね。

JavaScriptだけでフォームを複数ページに分割するというのは便利だと思います。

図4　フォームを機能強化するためのjQueryプラグイン

図4　フォームを機能強化するためのjQueryプラグイン

5. 55+ Exceptional Logo Design Tutorials | Tutorial Loungehttp://www.tutoriallounge.com/2009/10/55-exceptional-logo-design-tutorials/

ロゴデザインのチュートリアルのリンク集です。

アプリケーション操作のチュートリアルもあれば，発想の段階からの過程を紹介している記事もありますね。

図5　優れたロゴデザインのチュートリアル

図5　優れたロゴデザインのチュートリアル

そのほか先週の記事から，Webデザインのインスピレーションを得るのに参考になりそうなサイトを紹介します。

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

ツイッターアイコンメーカー - フリーで使える似顔絵ジェネレーターhttp://twittericonmaker.com/

髪型，りんかく，目，くち…といったパーツを選んで似顔絵を作れるWebサービスです。

Twitterのユーザーアイコンにすることをターゲットとしています。自分の顔写真を使う人は日本人には少ないので，これはいいですね。Wiiのように，Twitterにも標準でこういう似顔絵作成機能が付いたら面白いかもしれません。

作成した画像は48×48ピクセルのPNG画像として保存できます。

図6　Twitterのユーザーアイコン向けの似顔絵ジェネレーター

図6　Twitterのユーザーアイコン向けの似顔絵ジェネレーター

今週の気になるWebネタ

Barnes & Noble，電子書籍端末「nook」を発表?Kindleキラーとなるか:ニュース - CNET Japanhttp://japan.cnet.com/news/tech/story/0,2000056025,20401997,00.htm

日本ではAmazon.comのKindleが買えるようになり話題となっていますが，アメリカでは大手書店チェーンのBarnes & Nobleも電子書籍端末を発表しました。

購入した電子書籍を友人に貸し出すという機能が面白いですね。電子書籍はパソコン，iPhone，その他スマートフォンの一部機種でも読むことができるそうです。

日本で言えば紀伊國屋書店や丸善が電子書籍端末を出すようなものでしょうか。書店が家電メーカーとタッグを組んで，書店ブランドの電子書籍端末を開発するというのは面白いかもしれません。

でも，端末で囲い込みをするより，電子書籍のフォーマットを統一してどんな端末でも読めるようにしてほしいですよね。

Webテク, Webデザイン, Web広告, CSS, AIR, jQuery, 電子書籍

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote