iPhone OS 3.0のSafariでコピーふきだしを無効にするには

2009/6/22 月曜日 Posted in iPhone, TIPS | No Comments »

先日リリースされたばかりのiPhone OS 3.0絡みのTIPSをご紹介します。 iPhone OS 3.0から待ちに待ったコピペ機能が付きましたが、スクロールすることが多いサイトなどでは、ふきだしが表示されてしまって不便なことがあります。 このふきだしをCSSを使って無効にする方法があるそうです。   → masuidrive on rails - iPhone 3.0のMobileSafariでコピペを無効にする方法 [masuidrive.jp]   コピー用のふきだしとは次のようなものです。 画面を少しの間長押ししていると表示されます。   次のようなCSSを指定するだけで、コピーのCSSがでなくなるようです。 body { -webkit-user-select: none; }   非常に簡単ですね。 iPhone向けサイトを作成されている方は覚えておいて損はないと思います。 他にも何かiPhone 3.0向けのTIPSをご存知の方がいましたら、ぜひタレコミをお願いします。   関連: iPhone OS 3.0がリリースされたので早速試してみました 6月26日にソフトバンクから「iPhone3G S」が発売されます iPhone OS 3.0からブラウザ上でGPS位置情報が取れるようになるとのことです Read more..

他のケータイサイトのHTMLを参考にする際に便利な裏技

2008/6/9 月曜日 Posted in TIPS, デザイン | No Comments »

本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。 ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。 たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。 ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。 ご存じ「モバゲーTOWN」を例にご説明します。 例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか? 画面上から見ただけでは、正直よくわかりません。   そんな時に役立つのが、「画像を保存」機能です。 これを使えば、CSSで書かれているのか、画像なのかがわかります。 点線は画像でした またスペーサー画像の位置もバッチリわかります。 中央にある緑のカーソルがあたった部分がスペーサー画像 モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。 (おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます) 他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。   関連: フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う!携帯サイトのフォーム設計ポイントとは」 モバゲーのフレームワークがオープンソースとして公開されました ブックレビュー: 勝手サイト - 先駆者が明かすケータイビジネスの新機軸 Read more..