非天マザー by B-CHAN

iPhoneの使い方、IT、ビジネス、金融、経済、不動産、保険、音楽、映画、ニュース、自己啓発その他。

iPhoneぽい動きをするWebページを作ってみました

HTML5を活用


Webプログラミングの勉強で、iPhoneぽい動きをするページを作成しました。
こちらです。


iPhoneぽい動きをするWebページ


ボタンが6種類あって、それぞれ押してみると、いろんな方法でページが切り替わります。
まさにiPhoneぽい動きのページですので当然iPhoneで見ることができますし、Androidなどのスマートフォンやパソコンでも見ることができます。
HTML5という最新の言語を使っていますので、パソコンだと古いWebブラウザ(例えばInternet Explorer6とか)ではきちんと動かないかもしれません。
古いWebブラウザはセキュリティ的にも問題がありますので、なるべく新しいモノにアップデートしておきましょうね。
主なモノはたいてい無料ですからね。
この記事を書いている時点では、それぞれ以下のものが最新バージョンです。
Internet Explorer 9
Firefox 6
Chrome 13
Safari 5
Opera 11.5


と書いたものの、あとでMacやWindowsでいくつかのWebブラウザで試してみたところ、表示はどれも正常ですが、動きはChromeとSafariだけが正常ですね。Internet Explorerなどではダイナミックに動かずに単に普通に画面が切り替わるだけですね。
というわけでiPhoneかAndroidで見てもらうのが良いみたいです。


例えば、「回転します」ボタンを押したら、こんなふうに画面がくるりと回って切り替われば正常です。

メニュー画面 回転する画面