ホーム(記事一覧)へ

CSSでラベルやラジオボタン、チェックボックスの横並びをする方法

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

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を指定すると上寄せになります。

【レスポンシブ】スマホでは縦並びがおすすめ

上記の方法でスマホでももちろん横並びにできます。

しかし、スマホは縦に縦にと読み進めていくもので、横にある要素は見逃してしまう場合があります。

スマホでは縦並びにすることをオススメします。

下記例ではブラウザの幅を狭めると縦並びになります。

<style>
.example4>label{
    box-sizing: border-box;
    display: inline-block;
    padding: 5px;
    cursor: pointer;
}
.example4>label:hover{
    color: red;
}
.example4>label>input{
    margin-right: 5px;
    cursor: pointer;
}
@media(max-width:750px){
    .example4>label{
        /*コレ*/display: block;
    }
}
</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>

まずレスポンシブ対応として「@media(max-width:750px)」で750px以下になったら別のCSSをあてるようにします。

肝心の縦並びですが「display: block」を指定します。

横並びのために指定した「display:inline-block」を打ち消すためです。

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

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

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

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

関連記事