週刊Webテク通信

2010年9月第2週号1位は、永久保存版!?携帯コーディング、これだけ読めばすぐできる!気になるネタは、Google Instantローンチ―タイプするにつれて次々に検索結果が表示される

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

1. 永久保存版!?携帯コーディング、これだけ読めばすぐできる!(テンプレートのおまけつき) | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話http://design.kayac.com/topics/2010/09/mobile-template.php

携帯電話用ページのコーディングのための、押さえておきたい基本の知識がまとめられています。

docomo、au、softbankの3キャリア向けのコンテンツを作るための、実践的なノウハウばかりです。

携帯コーディングの専門家には当たり前のことが多いのかもしれませんが、PC向けサイト制作しかやっていない人には、新鮮に感じられることが多いんじゃないでしょうか。

iPhoneなどのスマートフォンへの対応が海外ではトレンドのようですが、日本ではまだまだ携帯向けの需要が多いはず。携帯向けの案件があったときのために、このページをブックマークした人が多いのか、はてなブックマーク数が2000を超えた人気エントリーとなっています。

図1 携帯コーディングの実践的ノウハウ集
図1 携帯コーディングの実践的ノウハウ集

2. 12 Common CSS Mistakes Web Developers Makehttp://sixrevisions.com/css/12-common-css-mistakes-web-developers-make/

CSSコーディングでのありがちなミスをまとめた記事です。

  1. 正しいCSSリセットが使われていない
  2. 必要以上のセレクタ
  3. ショートハンドプロパティ(省略、一括表記)を使わない
  4. 値が「0」の場合にも「0px」と単位を付けて表記する
  5. 16進数のカラーコード(例:#FF0000)ではなくカラーネーム(例:red)を使う
  6. 冗長なセレクタ
  7. 冗長なプロパティ
  8. 代替のフォントを指定しない
  9. 不要な空白
  10. CSSをルール立てて整理しない(あとからの編集がしにくいコーディング)
  11. すべてを1つのCSSファイルだけでまかなおうとする
  12. 印刷用スタイルシートを用意しない

といった内容です。

守らなくても間違いではないだろうという項目も多いですが、一応チェックしておきたい内容です。

図2 ありがちなCSSのミス12選
図2 ありがちなCSSのミス12選

3. Showcase of Interesting Navigation Designs - Smashing Magazinehttp://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/

面白いナビゲーションデザインのショーケースです。驚くようなナビゲーションではなく、わかりやすくちょっとした動きのあるものが多いですね。

ボタン操作でスクロールするものやカルーセルが、あいかわらずトレンドのようです。

図3 面白いナビゲーションのショーケース
図3 面白いナビゲーションのショーケース

4. Commit Lab | 女子のための情報サイトデザイン21+4http://commitlab.com/20100906/female_design2101.html

日本の女性向け情報サイトのデザインショーケースです。

ツイッターで情報を募集した結果をまとめたそうです。コメント欄に寄せられた情報も追加されていますね。

女性向けといえばピンクが連想されますが、意外と落ち着いた色使いが多いようです。

図4 女性向けサイトデザインのショーケース
図4 女性向けサイトデザインのショーケース

5. 30 CSS and Javascript Tabs Solutions :Speckyboy Design Magazinehttp://speckyboy.com/2010/09/08/30-css-and-javascript-tabs-solutions/

CSSとJavaScriptでタブナビゲーションを実現するソリューションを多数紹介しています。ほとんどのものがjQueryを利用しているようです。

アニメーション効果のあるものや、スクロールするものなど、いろんな種類のものがありますね。

図5 CSSとJavaScriptでタブを作るソリューション
図5 CSSとJavaScriptでタブを作るソリューション

そのほか先週の記事から、気になるニュース記事を紹介します。

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

Evernote Site Memory | Evernote Corporationhttp://www.evernote.com/about/developer/sitememory/

ブログ記事などをEvernoteに簡単に保存するための、Site Memoryというサービスがスタートしました。

自分のブログ上にSite Memoryボタンを設置すると、本文部分など指定した範囲だけをEvernoteにクリッピングできるようになります。

ボタンのデザインは選ぶことができますが、日本では「クリップ」と文字の入ったボタンが多く使われそうです。ゾウのアイコンだけのボタンもありました。

gihyo.jpの記事にも、さっそく「ツイートする」ボタンの横に「クリップ」ボタンが登場していますね。

クリップする範囲を「<div id="content">…</div>」の中にしたいときは、⁠Content to clip」という欄に「content」と入れればいいようです。入れなくても自動でなんとかしてくれるといった記述もあります。

Site Memoryボタンを作るためのページは英語ですが、ユーザーが目にする画面はちゃんと日本語になっています。ところが、Evernoteにログインしていない人に対して出るメッセージ部分は英語のままなのが残念です。

Evernoteを知らない人がこのボタンを押すこともあると思うので、そこで日本語のメッセージを出してユーザー獲得につなげたいところですよね。

以下、Site Memoryについて解説したページです。上はEvernote公式のもの(英語⁠⁠、下は日本語の記事です。

図6 Evernoteへのクリップボタンを作れるSite Memory
図6 Evernoteへのクリップボタンを作れるSite Memory

おすすめ記事

記事・ニュース一覧