開発CSSiPhoneiPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。先日公開されたiOS5では今まで「なんで使えないの?」といったところが少し修正されて、結構やりたいことが出来るようになってきたと思います。iOS5から利用出来るようになったものはCSSからHTML5エレメント・APIなど様々ですが、今回は新しく追加されたCSSプロパティ辺りを試しに使ってみたテクニックを紹介しようと思います。Javascriptはほぼ使ってないです(ページのタイトルを変更するというどうでもいいところで使ってます)。Demoページを見てみてください。Webkit系のブラウザならほぼ再現できると思いますが、せっかくなのでiPhoneでホーム画面に登録して確認していただけると良いと思います。(Webkit系以外のブラウザには特に何もしてないです。Safari今回試してみたプロパティやテクニックiOS5と関係ないものもあったりしますが、試してみたいのをいろいろと詰め込んみました。filesなどなども試してみたかったのですがまた今度に。いうことで以下のようなことを試しました。長くなってしまうので今回は最初の半分を紹介します。iconsposition:fixedを使ったタブUIiOS5からposition:fixedを使えるようになったのは嬉しいですね!というかなんで今まで使えなかったのだろうといった感じでしょうか。ネイティブアプリのようなUIをつくろうと思ったときに、よくある一般的なアプリなら固定されたヘッダーとフッターをまず考えると思います。ナビゲーションボタンなどを配置してグローバルに切り替えるにはきっと役に立つと思います。DemoでもヘッダーバーとフッタータブUIで使っています。DemoではクリックイベントにJavascriptを使わず、Input要素と間接セレクタを利用しています。Input要素をbody直下において、label要素でinputのchecked属性を操作します。input:checkedの擬似セレクタと間接セレクタ「~」でそれぞれのページdivやLabelをコントロールします。Input要素と間接セレクタの組み合わせを使ったUIはコレ以外にも多用しています。このUIの注意点としてlabel要素がタップできないという問題があります。この解決方法はlabel要素に空のonclick属性をつけることで解決できます。これは通常のフォームを作る場合にも発生する問題だと思うので覚えておくと良いと思います。color:#fff;}実際にシンプルに実装したサンプルはこちらです。Demooverflow:scrollを1本指ですいすいスクロールさせるこれもposition:fixedにつづき今までなんでできなかったのだろうというプロパティです。Safariでも利用できていましたが、スクロールする際に2本指でスクロールさせる必要がありました。分かりづらい操作である上に、動作も滑らかに表示されないのであまり使いものにならない感じでした。TouchはJavascriptでscrollを独自実装してその辺をクリアしていましたが、それぐらいのこと標準的な技術でクリアしたいものでした。iOS5では1本指でスクロールできるようになりました。そのままのスクロール(overflow:autoやscrollのみ)で描画されるものは慣性がついていなくて動かしづらいスクロールになってしまいます。そこで-webkit-overflow-scrolling:touchを加えると慣性スクロールが利用出来るようになります。-webkit-overflow-scrollingプロパティには「auto」と「touch」が指定できます。text...&lt;/div&gt;実際にシンプルに実装したサンプルはこちらです。Demoではタブなどで切り替える各ページすべてにこのプロパティパティを用いていますが、少し注意する点があります。通常のスクロールの場合、ある程度スクロールしたときにディスプレイのステータスバーをタップすると一番上まで自動的に戻る機能があります。overflow-scrollingなどのscrollはそういったアクションが起こりません。Demoのようにwindow全体に敷き詰めて通常のスクロールのように見せている場合は、そういった操作ができないことがあります。Typefaceは今回のiOS5と少し関係ないのですが、最近見つけたアイコンの表示方法でちょっと試してみたいなと思ったので使ってみました。STUDIOというサイトで公開されています。Typeface最大の利点は、文字なのでどんなに拡大してもSVGのようにキレイに表示できること、カラーやシャドウなどをコントロールしやすい点ではないかと思います。STUDIOのサイトでは「よく使うシンボルをアイコンセットとして使い、デザイナーの作業コストを少なくする」と言っています。DemoではフッターのタブUIのシンボルやコンテンツ内のちょっとしたアイコンに使用しています。HTMLソースに意味のない記号が入ってしまうのはセマンティックっな考えからはずれてしまいますが、CSSの:after擬似クラスやcontentプロパティを上手く使って表示する分には良い方法だと思っています。こちらもiPhoneデバイスで見るサンプルを用意してみました。DemoEditorタブでは実際に入力して試せるようにしています(半角英数で入力してください)。テキストなので色やサイズをCSSで簡単に切り替えられるというデモになっています。Typefaceのページからダウンロードしてきて、CSSには次のような記述を追加します。Demoには他にも紹介したいことがあるのですが、長くなってしまうので残りは後編で書こうと思います。サンプルはできるだけシンプルに分かりやすくしようと思うのですが、作っているうちにアレもやりたい・コレも試してみたいと欲が出てきてなんだかんだシンプルじゃなくなってしまって良くないですね。いうのはどうだろうというアイディアがあったりするので時間があればつくってみようと思います。API系も試してみたいし、時間がもっと欲しい!追記(2011/10/31)後編も書きました。前編では全く触れていない「縦書き」についても紹介していますので、よかったら読んでみてください。Safariから使えるようになっ...PrePANというサイトのお手伝いをしました。Blog|ブログを報告する。