mania-ku

何か作りたいプログラマ未満。

【Advent calendar】iPhone/iPadでlabelを使う方法

アドベントカレンダーの時期に、毎日ブログ書こうかなーと思っていたら、旦那さんが掃除中にMac Book Proを割ってしまいました。
しょうがないので?旦那さんにAir与えてみて(クリスマスプレゼント)、修理中はそれを借りることにします。(英字キーボード使いにくい…)
なるべく20日間毎日更新できるように頑張ります!そのため、題材は自由です。

1日目の今日は「iPhone/iPadでlabelを使う方法」です。

私はフォームにはなるべくlabelをつけて、押しやすくしたい方です。ユーザビリティってやつです。
ただiPhone/iPadではそのままでは動きません。
ぐぐったところ、2つ解決策があるようです。

イベントを追加

labelにonclick=””を追加します。

<label for="checkbox" onclick=""></label>

CSSを追加

labelのCSSにcursor: pointer;を追加します。こちらは今回の記事を書こうとして、もう一度調べたら見つけたもの。
こちらのほうだと一箇所で解決するので、簡単で良さそうです。
普段使うreset.cssやnormalize.cssに追加しておいてもいいかもしれませんね。

label {
	cursor: pointer;
}

なお、この記事はlabelタグを設定した領域が、iPhoneでタップしても反応しない件を参考に書きました。
明日はdisplay: box内で改行する方法について書く予定です。
see you next 😉

Pocket
LINEで送る