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 について参考になるそうです。



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


追記


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



コメント

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

エントリーリスト

カテゴリーリスト

タグクラウド

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。