タグ

ブックマーク / blog.kaleido-jp.net (2)

  • スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

    ※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。(ムービーはiOSシミュレータによるデモです)iPhoneAndroidでご覧の方はデモに直接アクセスしてください(ムービーは再生されません)。 【デモを見る(iPhoneAndroidで見てください)】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置(position:absolute)を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。

  • Android対応スマートフォンサイトのレイアウト(viewport・コンテナ編)

    最近いろんなスマホ最適化されたサイトを見るようになりました。 それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhoneAndroidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。 今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに 端末の横幅を最大限に活かした方がよい 特に理由が無ければ、大抵の場合は、 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする 自然な考え方で考えると、PCに比べるとただでさえ狭

  • 1