CSS

labelタグを設定した領域が、iPhoneでタップしても反応しない件

フォームでは、ユーザーがクリック(タップ)しやすいように、labelタグを使用してinput要素を選択しやすくします。 <label><input type="radio" name="hogehoge" />これ</label> <label><input type="radio" name="hogehoge" />それ</label> <label><input type="radio" name="hogehoge" />あれ</label> - これ それ あれ とくにラジオボタンやチェックボックスでは重要。labelタグをつけてないと、ラジオボタンの丸い部分を狙…

スマートフォンでopacityをtransitionさせるとちらつく件

CSS

jQueryでアニメーションさせるより、CSS3のtransitionを使った方がスムーズなのでできるだけそうしているが、スマートフォンではopacityをtransitionでCSSアニメーションさせるとちらちく。iPhoneでは、アニメーションを始める瞬間に、一瞬opacity:0の状態に…

IE6の後方互換モードでのブロック要素のセンタリング

CSS

XHTMLでは先頭にXML宣言をすることが求められる。UTF-8の場合は次のように。 しかし、XML宣言をしてしまうとIE6では、DOCTYPE宣言が先頭にないために、そもそも宣言されていないことと見做されて後方互換モードになってしまう。こうなると、いろいろと弊害…

imgの下余白を消すIEハック

CSS

IEで発生するimg画像の下の隙間。これは以下のCSSコードを書くことで解消することが出来ます。 img{ vertical-align:middle; } 実はこれ、デフォルトではbaselineに設定されています。他のブラウザでは生じませんが、IEだけはテキストと画像の位置合わせで僅…