HTML・CSS

labelを縦並びにする【チェックボックス・ラジオボタン】

チェックボックスやラジオボタンの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です。私はSPANです。

これを縦並びにするためにはstrongにdisplay:block;を指定します。

<strong style="display:block;">私はSTRONGです。</strong><span style="color:blue;">私はSPANです。</span>
私はSTRONGです。私はSPANです。

以上のように、display:blockで縦並びになります。

ブロックレベル要素をインライン要素に

続いて、divとpの例です。

2つともブロックレベル要素であるため、何も指定しないと縦に並びます。

<div>私はDIVです。</div>
<p style="background-color:yellow;">私はPです。</p>
私はDIVです。

私はPです。

これを横並びにするには、divとpにdisplay:inline;を指定します。

<div style="display:inline;background-color:green;">私はDIVです。</div>
<p style="display:inline;background-color:yellow;">私はPです。</p>
私はDIVです。

私はPです。

以上のようにdisplay:inline;で横並びに変更することができます。


以上、チェックボックスやラジオボタンのlabelを縦並びにする方法の解説でした。

display、奥が深いですね。

この他にもdisplayにはinline-blockなどがあります。

inline-blockについてもまた後日解説したいと思います。

チェックボックス・ラジオボタンについては以下の記事でも解説しています。

フォームについては以下の記事でも解説しています。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-HTML・CSS
-, ,

© 2020 ウェブつく Powered by AFFINGER5