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


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


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

iPhoneのWebを作るには、エミュレーターとしてiPhoneystyle 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 について参考になるそうです。



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


追記


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



関連記事

この記事のハッシュタグ から関連する記事を表示しています。

SwapSkills勉強会:CSSで作るiPod touchのWEB

a-blog cms で会員制コンテンツを作り、ログイン前はモザイク画像でチラ見せする実装を解説

アップルップル15周年記念パーティーを開催しました

iPod touch用のネックストラップは何故無いのか?

P1090436

TikTok & LunaTikが届きました

国内正規購入している初代iPod touchには技適マークが無いんだけど?

最新記事

カテゴリー

アーカイブ

ハッシュタグ