HTML+css でラジオボタン and or チェックボックスでテキストを回り込ませない方法

Flexbox を使ってラジオボタン and or チェックボックスとテキストとを横並びに配置することで、テキストの回り込みを回避します。

サンプル

デフォルト状態の例

• テキストが長くて改行した時に、デフォルト設定の状態だとラジオボタン and or チェックボックスの真下にもテキストが配置されます
• cssによってこの回り込みを回避して１行目と同じ位置にインデントさせることができます

回り込みを回避した例

• テキストが長くて改行した時に、デフォルト設定の状態だとラジオボタン and or チェックボックスの真下にもテキストが配置されます
• cssによってこの回り込みを回避して１行目と同じ位置にインデントさせることができます

ソースコード例

HTML

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

<form>
  <ul>
    <li>
      <label>
        <input type="checkbox">
        <span>長いテキスト</span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        <span>長いテキスト</span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        <span>長いテキスト</span>
      </label>
    </li>
  </ul>
</form>

css

1.
2.
3.
4.
5.
6.
7.
8.

form ul {
  list-style: none;
}
form label {
  display: flex;
  align-items: baseline;
  gap: .4em;
}

解説

検索して見つけた方法ではこの例のように Flexbox を使った方法や float を使った方法がありました。

Flexbox の方法がスマートに思ったのでこれを採用しつつ、ラジオボタン and or チェックボックスとテキストとの間の余白のとり方やテキストとの縦方向のそろえで少し手を加えています。

ul タグの意味

ul タグは項目ごとに改行させるために使っています。

項目ごとのテキストが短ければ、複数の項目を同じ行に表示させる場合もあると思いますが、テキストが長い場合は項目ごとに改行を挟んだ方が見やすいと思うので、今回の例では ul タグを使っています。

Flexbox

この例では Flexbox を使ってテキストの回り込みを回避しています。

そのため、テキスト部分を何かのタグで囲む必要があり、ここでは input タグがインラインなのに合わせて span タグを使っています。

ラジオボタン and or チェックボックスの高さ方向の位置をテキスト１行目に合わせたかったので、align-items で baseline を指定しています。

参考

ラジオボタンで改行が発生するとまわりこんでしまう現象への対処

おまけ　チェックの有無によってテキストの装飾などを変える

チェックするとテキスト部分の背景色が変わります

• テキストが長くて改行した時に、デフォルト設定の状態だとラジオボタン and or チェックボックスの真下にもテキストが配置されます
• cssによってこの回り込みを回避して１行目と同じ位置にインデントさせることができます

css

1.
2.
3.

form label input[type=checkbox]:checked + span {
  background-color: #eee;
}

最初に示した css にこの部分を追加します。

おまけ部分の参考

CSSの擬似クラス:checkedの使い方と効かない時の解決方法