CSS Nite LP, Disk 13 repriseフォローアップ（4）小山田 晃浩さん | CSS Nite公式サイト

2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、小山田 晃浩さん（ピクセルグリッド）の『iPhone/iPadサイト制作でのCSS設計とデザイン最適化事例』のスライドと音声をシェアします。

• スライド
• 音声（MP3、48:48、46.9MB）
• メディアクエリーを利用する上での参考サイト

CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。

続編のLP16：Android編を6月18日に開催します。

ご参加頂いた皆様、長時間のセッションお疲れさまでした。

私のセッションでは、これからモバイル端末への対応を行おうと考えている方に向けてメディアクエリーについてをお伝えいたしました。

メディアクエリーは多くの人にとって馴染みがあるCSSの記法でそのまま利用することができます。また、特別な開発環境が必要というわけでもありません。

特に、スライド31ページ目以降でご紹介した3つの@media規則の使い方を復習し、ぜひ実験や利用をしてみてください！

なお、Media Queriesは数あるCSS3の機能の中でもかなり安定状態にある草案で、近いうちに行われるであろうCSS2.1勧告の後、CSS3 Media Queriesについても正式に勧告になると予測されます。

また、メディアクエリーについてセッション内では、特にiPhoneやiPadなどの小さい画面への応用を紹介いたしましたが、今後登場するであろう、テレビ画面やその他のデバイスへの応用へも期待できます。特に今すぐ使うという予定はなくても、知識として実際に試しておくといいでしょう。

セッション中にタイムラインで「なぜtransform:scale()ではなく、zoomを使うのか」といったような内容が流れていました。transformはzoomと同じく拡大縮小表示は可能なのですが、transformを利用したとしても、変形前の領域は維持され、隙間があいてしまったり、重なってしまったりしまったりしてしまいます。

簡単なdemoを用意してみましたのでその違いをお試しください（※Google Chrome、Safariでのみ動作します）。