WWW Watch

記事に戻る

CSS で作るスマートフォン向け片手操作メニュー サンプル

ドコモのスマートフォン 「P-07C」 の 「タッチスピードセレクター」 からヒントを得た、片手で操作しやすいショートカットメニューを HTML、CSS と 簡単な JavaScript の組み合わせで作ってみたサンプルです。左下のメニューアイコンをクリック (タップ) してみてください。実際の動作を確認できます。

詳しくは記事 「CSS で作るスマートフォン向け片手操作メニュー」 をご覧ください。

動作環境

現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 5 (iPhone 4S) Safari では動作確認しました。他のスマートフォンとか知らない (CSS の position:fixed に対応してないヤツだと動かない)。IE?何それ美味しいの?

その他

メニューはサンプルなのでクリックしてもこのページにリンクされてるだけだったり、メンドクサイから Retina Display 対応とかしてないから環境によっては画像がぼやけてると思うけど気にしないで。