入力領域拡大

labelはinput命令とともに使います。

実行結果

クリックして入力します。

"チェック"してください。
ここもクリックできる場所です

「ここもクリックできる場所です」の文字の部分もクリックできます。

ずいぶん広くなりました。

プログラム

label

HTML

"チェックボックス"の入力です。<br>
<input type="checkbox" id="input">
<label for="input">ここも入力できる場所です。</label>
<div class="box"></div>

/*CSS*/
    .box{
    width: 250px;
    height: 200px;
    background-color: #f88;
    transition: all 2s ease-in-out;
}

#input:checked ~ .box{
    width: 0;
    height: 0;
}

inputのidに対してlabel for="input",「inputのためのlabelです」と宣言しています。

</labelにはfor="input"を忘れずに付けます。

---

図形も含めましょう。

オレンジ色のボックスをlabelで挟みます。
<label>から
｜
</label>までが,入力範囲です。

実行結果

"チェックボックス"の入力です。
ここもクリックできる場所です。

ここもクリックできます

図形もOKです。

チェックする場所が増えましたが,気を付けないと,図形は消えてしまいます。
box2はlabelの中にありますので~label .box2{...}のように指定します。(結合子)

文字は消えないで,下のほうに流れています。文字も図形の一部なので,下の方の文字をクリックしても,図形は元に戻ります。

プログラム

オレンジ色の長方形をlabelで挟みます。

 HTML
  <input type="checkbox" id="input2">
  <label for="input2">ここもクリックできる場所です。
    <div class="box2">ここもクリックできます</div>
    図形もOKです。
  </label>
/*CSS*/
.box2{
  width: 250px;
  height: 200px;
  background-color: #f88;
  transition: all 2s ease-in-out;
}

#input2:checked ~ label .box2{
  width: 0;
  height: 0;
}

<div>に何かする場合は.box2ではなく
~label .box2{...}とします。

.box2はlabelに挟まれているので，プログラムから直接は見えません。
近くにある~(隣にある+)labelの中にありますよ,という意味の~labelを付けて
~label .box2{...}とします。このような指定の方法の表現を結合子と言います。

<label>と</label>で挟まれたものは全て入力チェック場所になります。