html･CSS ラジオボタンを横並びや縦並びにする方法

ラジオボタンやチェックボックスは横に並べると選択しやすいものですが、何も考えず設置するとかえって選択しにくい場合があります。

html･CSSでラベルやラジオボタン、チェックボックスを横並びや縦並びにする方法を解説します。

この記事ではラジオボタンで説明しますが、チェックボックスでも方法は同じですので置き換えてみてください。

【問題】CSSで何もしない場合

<div>
    <input type="radio" id="1" name="1"><label for="1">選択肢1</label>
    <input type="radio" id="2" name="1"><label for="2">選択肢選択肢選択肢選択肢選択肢選択肢選択肢選択肢2</label>
    <input type="radio" id="3" name="1"><label for="3">選択肢選択肢選択肢選択肢選択肢選択肢3</label>
</div>

上記はCSSの調節をしない例です。CSSで調節しなくても横並びにはなります。inputやlabelはインライン要素であるためです。

しかし、テキストが折り返されたとき、ラジオボタンとテキストが離れ認識しづらくなります。

これを解消し、選択しやすくするラジオボタンを作成しましょう。

【横並び】display:inline-block

display:inline-blockはブロック要素とインライン要素をかけもった性質を持たせることができるCSSです。

display:inline-blockを指定するとインライン要素の横並びにできます。

横に隙間がないときは要素ごと折り返されるためinputとテキストが離れることを防ぐことができます。

【ケース1】inputごとlabelで囲う

<style>
.example>label{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
}
.example>label:hover{
    color: red;
}
.example>label>input{
    margin-right: 5px;
    cursor: pointer;
}
</style>
<div class="example">
    <label><input type="radio" name="2">選択肢1</label>
    <label><input type="radio" name="2">選択肢選択肢選択肢選択肢選択肢選択肢選択肢選択肢2</label>
    <label><input type="radio" name="2">選択肢選択肢選択肢選択肢選択肢選択肢3</label>
</div>

オススメはlabelの中にinputとテキストを入れてしまう方法です。

idとforの設定が不要になりhtmlがすっきりします。

labelにpadding、cursor: pointer、hoverを設定し選択できることをわかりやすくしています。

inputにもmargin-rightを設定し見やすくしています。

【ケース2】inputとlabelが兄弟要素

<style>
.example2>div{
    display: inline-block;
}
.example2>div:hover{
    color: red;
}
.example2>div>input{
    cursor: pointer;
}
.example2>div>label{
    display: inline-block;
    cursor: pointer;
    padding: 5px;
}
</style>
<div class="example2">
    <div><input type="radio" id="11" name="3"><label for="11">選択肢1</label></div>
    <div><input type="radio" id="12" name="3"><label for="12">選択肢選択肢選択肢選択肢選択肢選択肢選択肢選択肢2</label></div>
    <div><input type="radio" id="13" name="3"><label for="13">選択肢選択肢選択肢選択肢選択肢選択肢3</label></div>
</div>

CSSやhtmlの事情でlabelの中にinputを入れられない場合の方法です。

inputとlabelをdivなどで囲いましょう。そしてこれにdisplay: inline-blockを指定します。

これによりinputとlabelを折り返させないようにします。

ただし、このdivは実際にクリックできる範囲ではありません。クリックできる範囲はinputとlabelです。

paddigやcursorはinputとlabelに設定しましょう。

【ケース3】幅を指定したいとき

widthをしたいときは一工夫必要です。上記のケース1を例に説明しますが、ケース2も方法は同じです。

<style>
.example3>label{
    /*コレ*/width: 200px;
    /*コレ*/vertical-align: top;
    box-sizing: border-box;
    display: inline-block;
    padding: 5px;
    cursor: pointer;
}
.example3>label:hover{
    color: red;
}
.example3>label>input{
    margin-right: 5px;
    cursor: pointer;
}
</style>
<div class="example3">
    <label><input type="radio" name="4">選択肢1</label>
    <label><input type="radio" name="4">選択肢選択肢選択肢選択肢選択肢選択肢選択肢選択肢2</label>
    <label><input type="radio" name="4">選択肢選択肢選択肢選択肢選択肢選択肢3</label>
</div>

幅はwidthで指定します。

ただしこれだけでは下揃えになってしまいます。

そのため「vertical-align: top」を指定します。

vertical-align: topを指定すると上寄せになります。

【縦並び】display:block

display:blockを指定するとブロック要素になり縦並びになります。

横並びのときと同様にinputごとlabelに囲み、そのlabelをブロック要素にします。

<style>
.example4>label{
    /*コレ*/display: block;
    padding: 5px;
    cursor: pointer;
}
.example4>label:hover{
    color: red;
}
.example4>label>input{
    margin-right: 5px;
    cursor: pointer;
}
</style>
<div class="example4">
    <label><input type="radio" name="5">選択肢1</label>
    <label><input type="radio" name="5">選択肢2</label>
    <label><input type="radio" name="5">選択肢3</label>
</div>

縦並びにした場合、選択肢と選択肢の隙間をきちんと空け、誤タップのないように配慮しましょう。

【まとめ】ラジオボタンを横並びや縦並びにする方法

横並びはdisplay:inline-block

• オススメはlabel内にinputを含めてしまう方法です。
• inputとlabelが兄弟要素の場合はdivなどで囲いましょう。
• widthを指定する場合はvertical-align: topをセットしましょう。

縦並びはdisplay:block

以上、html・CSSでラベルやラジオボタン、チェックボックスを横並びや縦並びにする方法でした。