SwapSkills勉強会：CSSで作るiPod touchのWEB に参加してきました。

アクトリンク株式会社の菊池さんという方が iPod Touch 向けの Web制作についてアップルストアでお話されるという事で聞いてきました。

1. iPod Touchが与えたモノ
2. iPod Touchの便利な機能を最大限に生かすXHTMLマークアップ
3. Safariの先進的なCSS3を利用した使いやすく実用的なWEB

iPhoneのWebを作るには、エミュレーターとしてiPhoney や style master(5.0でiPhoneをサポートするそうですが、現状は4.6というバージョンがリリースされています)、もしくは、Safariのウィンドウを狭くしてって話がありました。 まぁ、 iPod Touch を買うのが一番でしょうね。

私も使っている iPhone の UI を再現する JavaScript の iui は firebug を作った人が作っていて、今は facebook の開発とかをしているそうな。

iPhone は = 481px と設定しましょう！って話でした。 Safari , Opera , Firefox は問題なく認識し、書き方としては、

<media="only screen and (max-device-width:480px)"  href="iphone.css" type="text/css" rel="stylesheet" />
<media="screen and (min-device-width:481px)"  href="pc.css" type="text/css" rel="stylesheet" />

残念な事に、IEはダメ！（いつもそうだ！）

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

で、IEの時だけ別のCSSを読み込むようにします。

また、縦でも横でも文字の大きさを同じ感じにする際には、以下のような記述をするそうです。

<meta name="viewport" id="iphone-viewport" width=480, user-scalable=no, maximum-scale=0.6667" />

だんだんメモが適当になってきますが、

• 横幅は100%に
• 拡大機能は使わせない -> webkit-auto-text-size-adjust: none;
• 行間は広めに -> line-height : 1.8;
• padding & margin は広く
• :hover は使えない -> -webkit-tap-highlight-color : rgba(00,33,99,0.6);

そんな話でした。メモってた事だけなので、いい加減な感じではありますが... style master を作ってる人のサイトで以下のコンテンツが iPhone の CSS について参考になるそうです。

• testing iPhone CSS

ちょっと、 https://kazumich.com/touch/ の制作を再開せねば！って気になって帰ってきました。 さぁ、仕事！

追記

スライドが公開されていましたので、貼っておきます。