日曜、午後、6時半。のロゴ

ラジオボタン・チェックボックスの位置がテキストとずれる時の解決方法【CSS】

ラジオボタン・チェックボックスの位置をテキストと合わせる

フォームを修正する度、毎回気になってたこと。

ラジオボタン・チェックボックス(※)の位置がテキストと合っていない!!

MEMO
※以下「選択ボックス」と略します。

若干ずれるんですよねー。これが気持ち悪くて仕方がない。(でも、Macで見るとズレてなかったり…どないやねん…)

<input>を<span>で囲んで、<margin>で位置を調整しようとしたり…いくつか方法を試すも全然うまくいかない。

「主要サービスだったら、こういう細かいところもきちんとしてるんやろなー」と思って確認すると、案の上、きちんと調整されていました。さすが稼ぎ頭。

調整方法はめちゃくちゃ簡単です。

 

position:relativeを使って解決!

はい。これで解決です。

位置調整は、「top」プロパティで行います。

 

また、選択ボックスとテキストの間が詰まっている時は、「margin-right」を指定すると、調整ができます。

↓こんな感じ

ラジオボタン・チェックボックスの位置を調整

ぼく
これで縦横の位置が綺麗に揃った選択ボックスの完成です。

 

ただ、この方法には一つだけデメリットがあります。

それは…

文字サイズを変更したら位置がずれること。

文字サイズ変更後、位置がずれる

なので、文字サイズを変更する度、「top」の数値を変更する必要があります。

…ぶっちゃけめんどくさい。

そう感じた方は「vertical-align」を使用しましょう。

 

vertical-alignでの調整方法

これも超簡単。

「vertical-align:middle」を指定することにより、選択ボックスの位置が、テキストの中央に揃います。

ぼく
選択ボックスの位置が、テキストに付随している為、文字サイズをいくら変更しようが、自動的に位置が調整されます。

 

なので、デバイスごと(PC・スマホ・タブレット)で文字サイズを変更する場合は、「vertical-align:middle」で指定した方が楽ですね。

ただ、こちらの方法にもデメリットがあります。

それは…

細かい位置調整ができないこと。

vertical-align:middleだと細かい位置調整ができない

「vertical-align」は、半角文字を基準値としている為、日本語(大文字)だと微妙にずれが生じる可能性があります。

上の画像でいうと、選択ボックスが微妙に上にずれている為、文字の中心に配置される様、調整を加えたいところですが、できません。(top・middleなど大まかな位置指定しかできない。)

ぼく
正確に言うと、vertical-alignでも、数値を入力することで、細かい位置調整はできますが、position:relativeと内容が被る為、割愛します。

なので、ピタッと位置を揃えたいねん!!って方は、「position relative」を使って指定した方が良いですね。

 

まとめ

ラジオボタン・チェックボックスの位置をテキストと合わせる

  • 「position:relative」 or 「vertical-align:middle」のどちらかを使用して選択ボックスの位置を調整する。
  • 「position:relative」の場合、細かい位置調整ができるものの、文字サイズを変える度に「top」の数値も変える必要がある。
  • 「vertical-align:middle」の場合、文字サイズの大小に関係無く、選択ボックスの位置が調整されるが、日本語の場合だと微妙にずれが生じる可能性がある。その際、細かい位置調整はできない。

どちらを選んでも一長一短。ちなみにぼくなら「position:relative」を選びます。(ピタッと位置を揃えたいねん!!)

ぼく
ちょっとしたことですが、どういう風に解決すれば良いのかしばらく悩みました。こういった無駄な時間を早よ無くしていきたい…

 

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください