Pages
Stay In Touch
More
© 2011 Kaleidoscope
この記事のURLをスマートフォンに送る
画像を使わずにCSS3だけで尖ったボタン
CSS3 Wizardry -Back and Next Buttons Revisited-
CSS3 Wizardry -Subpixel Rendering-
Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。
この記事のURLをスマートフォンに送る
最近いろんなスマホ最適化されたサイトを見るようになりました。
それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。
今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。
この記事のURLをスマートフォンに送る
ホーム画面アイコン・ショートカットアイコンの話し
今回のエントリはちょっとした小ネタです。
とくにiPhoneは、指定した画像に自動的に磨き処理のエフェクトをかけてくれるので、いい感じになるな〜と関心していました。
今やiPhone・Androidの普及を考えると、スマホ最適化してないサイトでも「ホーム画面アイコン」「ショートカットアイコン」の設定は必須になってきたと思います。
以下のようなタグで、ページに簡単にアイコンを設定できます。
<link rel="apple-touch-icon" href="画像ファイルのパス（png）" >
元画像
ただ、Androidについては磨き処理をやってくれないので、ちょっとした悩みでした。
iPhoneの方がいい感じになるだけに、Androidのアイコンがかなり寂しい感じに見えてしまいます。
iPhoneではエフェクト処理されていい感じ
Androidでは元画像のままでちょっと寂しい…
この記事のURLをスマートフォンに送る
フリック式スライド デモ
スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。
【デモを見る（iPhone・Androidで見てください）】
【ダウンロード】