-webkit-appearanceでフォーム要素のスタイルをリセット

<img src="http://webdev.jp.net/wp-content/uploads/2013/08/webkit-appearance-defaurt-reset wikipedia reference.png” alt=”-webkit-appearanceを設定してみた” width=”400″ height=”400″ class=”aligncenter size-full wp-image-1412″ />

スマートフォンのデフォルトブラウザ、Safariのフォーム要素に、スタイルシートで独自のデザインを設定しようとしたとき
角丸やグラデーション、ドロップシャドウなどの初期スタイルを打ち消すのに、意外と手こずったことはありませんか?

-webkit-appearanceをつかうと、これらの装飾を一部外せるので、フォーム要素をすべてオリジナルの装飾にするスマホサイトを構築するときは
CSSの先頭によく書く、ブラウザ初期スタイルをリセットしているところへ一緒に追記しておくとやりやすいです。

* {
	-webkit-appearance: none;
}

selectのデザインをCSSとJavascriptでカスタマイズ

jQuery mobile などの大規模なプラグインを導入せずに
オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。

動作サンプルはこちら。

フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが
このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。
ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。

“selectのデザインをCSSとJavascriptでカスタマイズ”の続きを読む

Adobe Edge Inspectでスマートフォンブラウザのデバッグ

ChromeのAndroid USBデバッグをつかうと、パソコン版Chromeのデベロッパーツールの要領でUSBケーブルでつないだAndroid端末のChromeのデバッグが行えますが
AdobeのEdge Inspect(エッジインスペクト)を使うと、これと同様にAndroidやiPhoneのデフォルトブラウザのデバッグを行えます。

Edge Inspectでデバッグするために必要な構成はこちら

  • パソコンとスマートフォンがともに接続できる無線LANのネットワーク
  • パソコンのGoogle Chrome
  • Edge Inspectのパソコン用アプリケーション(無償)
  • Edge Inspectのスマートフォン用アプリケーション(無償)
  • Bonjour(パソコンがMac OS X以上の場合はもともと有効)

“Adobe Edge Inspectでスマートフォンブラウザのデバッグ”の続きを読む

Xperia SX(SO-05D)をAndroid 4.1にバージョンアップしてみた

Xperia SX(SO-05D)が、2013年7月2日にAndroid 4.1 OSバージョンアップできるようになったのでさっそく試してみました。

Xperia™ GX SO-04D / Xperia™ SX SO-05D[Android 4.1 OSバージョンアップ]| ソニーモバイルコミュニケーションズ

テーマが増えたり、メニューのUIが変わったりと大きなアップデートなので
以前、PHOTO SWIPEとXperia SX(SO-05D)の機種依存問題でとりあげたデフォルトブラウザも挙動が変わったか確かめてみました。

…変わってた!
画面端のスワイプでタブを切り替える機能がなくなってます。
したがって、画面端に置いたボタンをタップできなくなる問題も解消しています。
よかった。これでひとつ心配のタネがへりました。

absoluteで絶対位置配置した要素のサイズを相対指定

position:absoluteで前面に配置した要素のサイズをposition:relativeとなっている親要素にあわせて相対指定するテクニックをご紹介します。

実例でいうと、たとえばこんな感じ。
リキッドレイアウトの要素へグラデーションの縁をつけてみました。

“absoluteで絶対位置配置した要素のサイズを相対指定”の続きを読む

iPhoneでフォームにforcusしたときズームしないようにする

フォーカスするとページ全体が拡大される

iPhoneでフォーム要素にフォーカスすると画面が拡大されるあの効果。
入力時に画面が拡大表示され、入力が終わっても拡大状態がキープされているあの効果。

スマートフォンでパソコン用のウェブサイトを見ているときは、次のフォーム要素を押しやすくていいのですが
「大きい文字」「大きいボタン」のちょうどいいデザインで拡大されると、これが煩わしい!
スマートフォン最適化するときは、解除したいところです。

“iPhoneでフォームにforcusしたときズームしないようにする”の続きを読む

PHOTO SWIPEとXperia SX(SO-05D)の機種依存問題

スマートフォンの機種依存でひっかかったのでメモ。

スマートフォンのスワイプ操作にも柔軟に対応できるフォトギャラリーjavascriptのPHOTO SWIPE
Xperia SX(型番:SO-05D)の相性があまりよくない。

スワイプしまくったり、ページ送りしまくったり
乱暴に操作したらブラウザが強制終了してしまう。

“PHOTO SWIPEとXperia SX(SO-05D)の機種依存問題”の続きを読む

Androidでスクロールできなくなるバグ

Android2.3端末で、画面をスクロールできなくなる症状に遭遇。

調べてみると、iframeとdhisplay:noneの合わせ技で発生するらしい。

javascriptでつくった1ページ内に「タブ」や「アコーディオン」で複数のコンテンツを切り替えられるページへ
「Youtubeのプレイヤー」や「ソーシャルボタン」などのiframeが内包されている構造は要注意!

対策

iframeをなるべく使用しないコト。

iframeの使用がさけられない場合は、
display:none での表示・非表示の制御ではなく
remove(削除)と再配置で表示・非表示を制御する仕組みへ変更すると
バグ発生条件を満たせなくなるため、スクロールできなくなる症状は回避できます。

参考サイト:
Androidで全くスクロールできないバグ

iOS5のSafariでlabelとcheckboxが連動しない対策

iOS5のSafariでは、forで紐付けたlabelとcheckboxを連動できない。

<input id="test_check" type="checkbox">
<label for="test_check">チェックする</label>

この対策でよく見かける方法が、空のjavascriptのclickイベントを記述するやり方。

<input id="test_check" type="checkbox">
<label for="test_check" onClick="">チェックする</label>

一括指定もできる。labelとcheckboxのセットが大量にある場合はこっちのほうが便利。
ただし、labelをクリックしたときに動作させるjavascriptを組み込みたい場合は競合の心配があるので注意。

<input id="test_check" type="checkbox">
<label for="test_check">チェックする</label>
$("label").click(function(){});