チェックボックスやラジオボタンのlabelを縦並びにする方法を紹介します。
まずは実際のソースコードで解説します。
この記事の目次
labelを縦並びにする【実際のソースコード】
labelが横並びになってしまう場合は「インライン要素」から「ブロックレベル要素」にしましょう。
CSSに1文加えるだけで縦並びに変えることができます。
横並びのままのソースコード
<label class="check_lb">
<input type="checkbox">チェックボックス1
</label>
<label class="check_lb">
<input type="checkbox"> チェックボックス2
</label>追加するCSS
.check_lb {
display:block;
}これだけです。簡単ですね。
labelが横並びになってしまう理由
labelが横並びになってしまう理由はlabelが「インライン要素だから」です。
labelをブロックレベル要素に変えてあげれば解決できます。
簡単に説明すると下記です。
- インライン要素： 横に続く
- ブロックレベル要素： 縦に続く
インライン要素の一例は下記です。
<a>、<strong>、<br>、<code>、<em>、<i>、<img>、<input>、<label>、<select>、<span>、<textarea>ブロックレベル要素の一例は下記です。
<div>、<blockquote>、<dl>、<form>、<h1>-<h6>、<hr>、<ol>、<ul>、<p>、<pre>、<table>チェックボックスやラジオボタンはlabelタグに内包されているため、デフォルトのままだと横に並びます。
displayで縦並び・横並びを変更する
インライン要素とブロック要素はdisplayによって変更することができます。
以下に例を挙げます。
インライン要素をブロックレベル要素に
まずはstrongとspanの例です。
2つともインライン要素であるため、何も指定しないと横に並びます。
<strong>私はSTRONGです。</strong><span style="color:blue;">私はSPANです。</span>これを縦並びにするためにはstrongにdisplay:block;を指定します。
<strong style="display:block;">私はSTRONGです。</strong><span style="color:blue;">私はSPANです。</span>以上のように、display:blockで縦並びになります。
ブロックレベル要素をインライン要素に
続いて、divとpの例です。
2つともブロックレベル要素であるため、何も指定しないと縦に並びます。
<div>私はDIVです。</div>
<p style="background-color:yellow;">私はPです。</p>私はPです。
これを横並びにするには、divとpにdisplay:inline;を指定します。
<div style="display:inline;background-color:green;">私はDIVです。</div>
<p style="display:inline;background-color:yellow;">私はPです。</p>私はPです。
以上のようにdisplay:inline;で横並びに変更することができます。
以上、チェックボックスやラジオボタンのlabelを縦並びにする方法の解説でした。
display、奥が深いですね。
この他にもdisplayにはinline-blockなどがあります。
inline-blockについてもまた後日解説したいと思います。
チェックボックス・ラジオボタンについては以下の記事でも解説しています。
フォームについては以下の記事でも解説しています。
