img { zoom: .5; }

これだと凄い楽なんですが、JSで何かする時にもめるケースが結構多いです。
zoom処理にともなって予期しないことが起きる確率が格段にあがってしまうのはあまりよろしくありません。
また、後々にPCで見た時にも一定のクオリティを担保したい、とかなったときにも結構もめると思います。
というか今もめてるんですけどね、IE8で。

IE8に限っては、zoomの値を1に戻してCSSで画像の大きさを指定するようにしました。
以下みたいな感じで。

.ie8 img { height: auto; zoom: 1; }
.ie8 img[width="100"] { width: 50px; }

こんな感じでサイト内で利用している画像サイズ分のwidthを指定しています。
で、いっそのこと640pxまでの一覧を最初から書いとけばよいじゃんと思ったのでエクセってみました。
ご利用いただく上でマシンに何かありましても責任は取れませんのでご注意ください。

half_img_120409_01.xls (51KB)

Dreamweaverで画像を挿入すると画像そのままのwidthとheightが入りますので、その値を半分にしてやっても良いですし、JSでやっても良いと思います。
Dreamweaverで半分のサイズが入るような拡張機能とかどなたか作らないですかねー。

スマホサイトのナビゲーションって概ね行全体がタップ出来るっぽくなってますよね。
概ねっていうとアレですが、概ねサイト内にはありますよね、こういう雰囲気の。

この場合、「New」とか「Sold Out」とかのアイコンもリンクテキストと一緒にa要素で包むような感じになると思いますが、そうするとAndroidではタップハイライトカラーがおかしなことになります。
本当は行全体に付いてほしい所ですが、リンクテキストにしか付かなくなってしまうような感じです。

サンプル1

ちなみにアイコンに指定している背景を取ると期待通りの結果になります。
アイコンをデバイステキストとCSSで頑張らずに画像にしてしまえば解決されたりすると思います。
また、a要素の中からアイコンを出してしまってliの直下に置けば良いじゃない、というご意見もあるかと思いますが、サンプルの2つあるリンクのうち2つ目のがそうなっています。
やっぱりおかしいですよね。

疑似要素を利用してどうにかしてみる

どうにかしたサンプルが以下です。
サンプル2

期待通りになってます。
ただ、かなりのバッドノウハウなんじゃないかと思うようなことで解決しています。ごめんなさい。
以下、検証してみたことを。

• aの疑似要素を幅・高さともに100%にしてレイヤー的にはa要素内で一番上に持ってきてます
• この要素に色がついてないとタップハイライトカラーをコントロールできませんでした
• なのでサンプル1と2ではちょっとだけ見た目が変わっているはずです
• aの背景が真っ白とかだと対応できない雰囲気です
• 透過の画像を置いたり、「rgba(0,0,0,0)」とかは試しましたけどダメでした
• a要素の中からアイコンを出してしまってliの直下に置いたほうはやっぱりダメですね

JSでどうにかしてみる

どうにかしたサンプルが以下です。
サンプル3

ボーダーの色はお好みで変更してください。

それにしてもAndroidはグラデや角丸が汚いですね。
はやく爆発したら良いと思います。

参考リンク：Androidと-webkit-tap-highlight-color[to-R]

こんな感じでFinderでPSDファイルを選択しまして、「Cmd + I」もしくは右クリックから情報をみるとクリックしますと

こんなふうになりますので、「レイヤー」部分のテキスト情報をコピーすればOKです。
PSD内のフォルダ分けがキレイすぎてテキストだけを抽出しにくいんですけど、と言ったら牧下さんが教えてくれました。
ありがとうございます！

Amazonアフィリエイト

著者の高津戸さんから弊社あてに献本いただきまして、年末年始休暇あたりに読んでみました。
で、読んだ感想としては「良い！」ってことです。

僕は業務中にそこまでJavaScriptを書く人ではありませんので、JavaScript本としての良さが美味い具合に伝えられないのですが、他のブログエントリーなんかがfacebookでまとめられてますのでこちらからいろいろ読んでみるとその良さが伝わるかと思います。

というわけでJavaScriptに焦点を絞った感じではないのですが、あまりみなさんが書いてない所で良いなと思った理由を。

キャリアパスに悩んだ方にすごく良いと思った

「Webデザイナーのための」本ということで、ビジュアルデザインのスキルがあって、最低限のHTML/CSSのスキルがあって、jQueryはプラグインを使ったことがあるという感じの方を想定されているのかなと思います。
こういう方の場合、次に強みにすべきスキルを何にしようか？と悩むことも多いのではないかと思います。

ちょっと前に一人でデザインもアプリ開発もマーケティングも全部できちゃう海外のだれかみたいになるべきだ的なブログ記事を読みました（どの記事か忘れちゃってるのでどなたかコメントなどで補完いただければ幸いです[コメントで補完いただきました]）。まさにその通りだと思いますし、僕自身もそうなりたいという思いだけはあるのですが、それってすさまじく大変ですよね。

ゼネラリストとT型人間のどちらが良いか的なお話をしている時に当時読書家だった（ですよね？）森田さんが「ぶっといIになれば良い」とおっしゃっていたのを覚えているのですが、それも森田さんだからこそ言える言葉でして、さすが神だなと思ったものです。

さて、Ajaxというキーワードがバズってからかなりの年月が過ぎました。
最近リニューアルされたり新規に作られるサイトでJavaScriptを利用したUIがないサイトの方が少ないのではないでしょうか。
今、Find jobで「フロントエンド」検索をしてみたら9件しか募集がヒットせずにそんなものなの？と思ったんですが、日常業務の中でクライアントさんやパートナーさんからの相談を受けているかぎり、フロントエンドエンジニアが全然足りないよ！という状況になっています（スマホの世界もすごいことになってますし）。

そんな状況なのでフロントエンドエンジニアの道に進もうかなと思った方は、まずこの本を読んでみると良いんじゃないかと思います。
いきなりサイ本とかを読んでしまうと挫折してしまう方がとても多いと思います（僕もそんな人ですが）。
そうなっちゃうとフロントエンドへの道がとても険しいものになっちゃって、もーこんな道はいやだーとかなっちゃうでしょう。

というわけで、フロントエンドへの道へ興味を持った方はまずこの1冊を読みましょう、話はそれからだって感じの本だと思いました。

おまけ

弊社ではフロントエンドエンジニアを積極的に募集中です！

スマホサイトのデザインでよくある、タップできる領域の右端に矢印みたいなのがついてるものがあります。
こんなやつですね。

こんな時に矢印みたいなアイコンをCSSで実装してみましょう。
以下のHTMLとCSSで実装可能です。

HTML
<ul>
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこさしすせそたちつてとなにぬねの</a></li>
</ul>
CSS
* { margin: 0; padding: 0; }
a {
display: block;
position: relative;
border-bottom: 1px solid #ccc;
padding: 11px 25px 11px 11px;
color: #000;
font-weight: bold;
text-decoration: none;
}
a:after {
display: block;
position: absolute;
top: 50%;
right: 10px;
width: 7px;
height: 7px;
margin-top: -4px;
border-top: solid 2px #7f7f7f;
border-right: solid 2px #7f7f7f;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
}

after擬似要素を利用して7px*7pxのボックスを作り上と右にボーダーを指定、そいつをtransformで回して完了ですね。
違う色にしたい場合はボーダーの色を変えるだけですのでとても汎用性がありますね。

チェックされたようなアイコンなんかも

では続いてチェックされたようなアイコンを作ってみましょう。
こんなものです。

さきほどのCSSに以下を追加すればOKです。
li:nth-child(1) a {
padding: 11px 25px;
}
li:nth-child(1) a:before {
display: block;
position: absolute;
top: 50%;
left: 10px;
width: 12px;
height: 5px;
margin-top: -6px;
border-top: solid 2px #7f7f7f;
border-right: solid 2px #7f7f7f;
-webkit-transform: rotate(115deg) skew(140deg,0deg);
transform: rotate(115deg) skew(140deg,0deg);
content: "";
}

transformで回すところまでは矢印的なものと同じ理屈で、こちらはさらにskewを追加して変形させています。

ということで

こういうのは一度作っておくと他のサイトでもガシガシ使いまわせると思いますので画像でやってたわー、という方はCSSでやってみてはいかがでしょうか？
※あ、Windows Phone 7だとtransformが未サポートだと思ったのでアレですけどね。
※と、思ったんですがWindows Phone 7でも大丈夫でした！

左から青赤黄色のボーダーがビューポート幅にあわせて同じ幅でぴっちりとおさまっています。
IE6脳でコーディングしてしまうとfloatで横並びにしてそれぞれの幅に「33%」「34%」「33%」を指定しておこうかとか考えがちですが、これだと右隅に余白ができてしまいます。
HTMLとCSSは以下となります。

HTML
<ul>
<li><a href="#">あ</a></li>
<li><a href="#">い</a></li>
<li><a href="#">う</a></li>
</ul>
CSS
* {
margin: 0;
padding: 0;
}
body { background: green; }
ul { list-style: none; }
li {
float: left;
width: 33%;
}
li:nth-child(2) { width: 34%; }
a {
display: block;
color: #000;
text-align: center;
text-decoration: none;
}
li:nth-child(1) a { border-bottom: 4px solid #00c; }
li:nth-child(2) a { border-bottom: 4px solid #c00; }
li:nth-child(3) a { border-bottom: 4px solid #fc0; }

これの見た目が以下になります。

ちょっとでもわかりやすいようにと思って背景に緑をしいといたんですが、それでも分かりにくいですね。ただ、右端に余白ができていますので興味のある方は自分で試してみてください。

「display: table;」だ！

うーん、どうしたものかと思い、最初は2番目のliに「width: 34.5%;」とか指定して強引に解決しようと思っていたんですが（これだとランドスケープになったときにまたもめます）、tableのルールを思い出し試してみたらあっさり行きました。
解決したときのCSSが以下になります。

* {
margin: 0;
padding: 0;
}
ul {
display: table;
width: 100%;
table-layout: fixed;
}
li {
display: table-cell;
}
a {
display: block;
color: #000;
text-align: center;
text-decoration: none;
}
li:nth-child(1) a { border-bottom: 4px solid #00c; }
li:nth-child(2) a { border-bottom: 4px solid #c00; }
li:nth-child(3) a { border-bottom: 4px solid #fc0; }

なんでこれで最初のスクリーンショットみたいになるの？をざっくり言ってしまいますと「table-layout: fixed;」が指定されてるとセル幅が均等になるってことなんですが、詳しくは表幅アルゴリズムのくだりなんかを読んでみてください。

解決したものはまだAndroidで確認してませんが、右隅に余白ができてしまう挙動なんかはAndroid2.2とiOS4/5で同じでしたので解決するはずです。

質疑の中でそんなレイアウトをCSSのみで出来ますか？という質問があったので、参加者の立場でしたが「出来ます」とお答えしてしまったので作ってみました。

以下、両方ともChromeでしか確認しておりませんのでご注意ください。

• 「display: inline-block;」でボックスを並べているもの
• 「position」でボックスを並べているもの

感想

まぁ、出来るっちゃ出来ますが運用に耐えられなさそうですし、面倒ですのでJS使いましょう。

Amazonアフィリエイト

CSS3 スタンダード・デザインガイドをいただきました。
早速読ませていただき、記憶にある中では初のAmazonレビューを書いておきましたので、以下、すこしだけ加工を加えた引用です。

ネット上で検索を行うだけでもCSS3に関する断片的な情報を入手することが出来ますが、体系的に学びたいときや、それほどメジャーでないプロパティについて情報を得るためにはW3Cの仕様など、英語文献を読むしかありませんでした。
英語が苦手な方にとっては苦痛の日々でしたが、この本でそのような苦痛はおさらばです。

安定時期に入ったプロパティ／セレクタに加え、Working Draft（草案）や草案前のEditor’s Draft、さらには各ベンダーが独自拡張したものまでも掲載されています。
制作者にとってはどのUAがどのプロパティをサポートしているのかも気になりますが、メジャーなPCのブラウザ、iOS／Androidでのサポート状況も完備、さらに筆者サイトでは日々刻々と変化するサポート状況をアップデートと、いたれりつくせり。

CSS3のリファレンス本としては間違いなく日本一のクオリティと言えると思います。

※
一点、マイナスな部分をあげるとすれば、帯にある「CSS3を使ってのデザインワークの実際を習得できる」という文言。
あくまでリファレンス本ですので、特定のデザインをCSS3を利用して作りこんでいくといった、いわゆるチュートリアル的な内容はありませんので、目的の内容がないと感じる方もいらっしゃるかもしれません。

to-Rの西畑さんも「これすごいよね。」とおっしゃっております（facebook）し、CSS3に関わる方であれば1家に1冊必携の書となっております！

http://maboroshi.biz/clearskysource/demo/demo1.html