CSSでラジオボタンとラベルの間にスペースを加えると、関連付けがうまくいかないときの対応方法

ラジオボタンとラベルの間にクリックしても反応しない謎スペースができてしまったことはありませんか？

通常であれば、フォームコントロールとラベルの関連付けが機能し、クリックするとラジオボタンが選択されますが、謎スペースは無反応です。なぜ謎スペースができてしまったのか、そしてこの問題を解決する方法を紹介します。

Sanding UI
by Jim Nielsen

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• ラジオボタンとラベルの間にある謎スペース

はじめに

UIを実装する時に私が好む方法の一つは、何かを構築し、何度もあちこちをクリックし、微調整を加え、さらにクリックして、微調整を加え、さらにクリックしてといったことを繰り返し、最終的に完成したと判断するまで続けることです。

このクリックするというのが重要な部分です。ページ遷移であれば、何度も行き来することになります。クリックして、戻るボタンをクリック。クリックして、右クリックのコンテキストメニューから戻る。クリックして、アプリ内ナビゲーションをクリックして戻る。キーボードショートカットで戻る。何度も何度も繰り返します。

これはある意味QA（Quality Assurance）品質保証のためのもので、クリックしまくって壊れないか試すものです。しかし、私はこのことが木工に似ていると考えています。木の板があり、研磨して粗い部分を滑らかにし、手で触って確認し、さらに研磨し、それらを納得がいくまで何度も繰り返します。

ソフトウェアの場合は変数が多すぎて、それらを把握し、テストし、滑らかにすることができないことがあります。そのため、私はUIを何度もクリックして使用し、最終的に問題が起こらなくなるまで繰り返します。

ラジオボタンとラベルの間にある謎スペース

この記事では、ラジオボタンの実装で起こったできごとについて紹介します。一見、標準的な実装に見えると思います。

• <label>を作成し、それに対応する<input type="radio">を記述。
• これらを同じ行に配置し、コントロールとラベルの間はスペースを空けて中央揃えに。

CSSのfloatを使用していた古いデベロッパーとしては、flexboxでこういうことができると今でも驚きます。本当に簡単に実装できます！

私はいつものように何度もクリックを繰り返して検証をしていたら、UIにデッドスポットがあることに気がつきました。ラジオボタンとラベルの間をクリックすると、期待通りにコントロールが切り替わりませんでした。

「なんで？」と思いました。「<label>と<input>があり、関連付けも正しくできているのに、なぜこれが機能しないんだ？」と。

このスペースはちょうどflexboxのgapのため、これが原因であると考えました。

デベロッパーツールで調べてみたら、やはりこれが原因でした。flexboxのおかげでコントールとラベルの間に視覚的なスペースを追加するのはとても簡単になりましたが、そのスペースはインタラクションのデッドゾーンになっていました。

CSSは素晴らしいので、この問題を解決する方法はたくさんあると思います。私はgapを削除し、labelにpaddingを追加する方法にしました。

ラジオボタンとラベル間のスペースをgapではなくpaddingにすることで、デッドゾーンを作らずに全体がクリック可能になりました。

もちろん、いつも通りいろいろクリックして検証し、期待通りに動作することが分かりました。

小さなことですが、小さな破片がたくさんあると、それは苦痛なエクスペリンスになります。私のやり方は研磨し、木目を感じ、破片を取り出し、また研磨して滑らかになるまで繰り返すことです。