<input>と<label>。
おそらくハンバーガーメニューではじめて目にするこの2つ。
知っていても、違いや使い方が分かりにくい人もいるかもしれません。
そんなわけで、この記事では<input>と<label>について紹介します。
ご覧ください。
input
まず<input>と書いてみましょう。
タイプはcheckboxとします。
<input type="checkbox">□が出てきたので、クリックしてみてください。
☑️が付き、もう１回やると外れます。
これは、いわゆるON-OFF機能。
切り替えみたいな感じです。
チェックボックスはON-OFF機能
以下の□をクリックしてください。
<input type="checkbox" id="nav01">
<label for="nav01">テキスト</label>input:checked + label {
color: red;
}1回ごと、文字が赤色 ⇆ 黒色と切り替ります。
これもON-OFF機能ですね。
もう1つ例をどうぞ。
□をクリックしてください。
<input type="checkbox" id="nav02">
<label for="nav02">テキスト</label>label {
display: none;
}
input:checked + label {
display: inline;
}消えていた文字が出現。
もう1度クリックすると消えます。
これもON-OFFですね。
checkboxはこんな特徴となります。
ハンバーガーメニューのカラクリ
じつは、ハンバーガーメニューの仕組みも、このON-OFF機能が使われています。
使われているのは、メニューが出てきたり引っ込んだりするところです。
下のハンバーガーアイコンをクリックしてください。
1回クリックするとメニューが出現、もう1回押すと消える。
ON-OFFですね。
次は、すでに出てきてた<label>について紹介します。
※input:checked + labelの指定については、こちらをご覧ください。
【参考記事】『子孫要素に限定して指定する』
label
今度は<label>を見てみましょう。
まず<input>を書き、その横に「チェックボックス」と続けます。
クリックしてください。
<input type="checkbox">チェックボックスチェックボックス
☑️がつくのは、□をクリックした時だけですね。
「チェックボックス」の文字をクリックしても、☑️はつきません。
今度は<label>を使い、<input>と文字を囲みます。
<label><input type="checkbox">ラベル</label>「ラベル」の文字をクリックしてください。
☑️がついたはずです。
<label>を使うと、文字をクリックしても☑️が入るようになります。
inputとlabelの紐づけ
今度は、<input>は<label>に囲われてません。
しかし、「ラベル」の文字をクリックしても☑️が入ります。
<input type="checkbox" id="check">
<label for="check">ラベル</label>上記では、
- <input>のid
- <label>のfor
の中身がcheckです。
このcheckにより、<input>と<label>は紐づけられます。
また、1つの<input>に対し、2つ以上の<label>の紐付けも可能です。
以下で「ラベル2」をクリックしてみてください。
☑️が入るはずです。
<input type="checkbox" id="check">
<label for="check">ラベル</label>
<label for="check">ラベル2</label>ハンバーガーメニューの裏側の動き
<label>があると、□が非表示になっても問題ありません。
実際、ハンバーガーメニューを作る時、<input>はdisplay: noneになっています。
以下をご覧ください。
<input>は非表示です。
そして、<label>でハンバーガーアイコンを作っています。
<input type="checkbox" id="hamburger">
<label for="hamburger"><span></span></label>input {
display: none;
}
/* ハンバーガーアイコンの指定は省略 */非表示のinput↓
ハンバーガーアイコンをクリック。
↓
ナビメニューが出たり引っ込んだりする。
上記が、ハンバーガーメニューの表の動き。
逆に、その裏では非表示の□に☑️がついたり外れたりしているわけです。
この裏側を知って、ハンバーガーメニューの仕組みが腑に落ちた。
そんな人がいたら幸です。
クリックとチェック
さいごに、上記で出てきたクリックとチェックの違いついて紹介します。
微妙な違いですが、気になる人はご覧ください。
クリックはマウス操作
クリックはマウス操作によるものです。
スマホだとタップになりますね。
クリックは以下の時にやっているはずです。
- サイトの中でリンク先ページを開く
- ググる時に検索窓を入力できる状態にする
- 検索結果に出てきたサイトの中から選択し、ページを開く
チェックはボックス内での操作
今度はチェックについて。
チェックは<input>のcheckboxで使われることばです。
ボックスに☑️を入れてみてください。
チェックしましたよね。
と同時に、クリックもしたはずです。
チェックはマウス操作の1つ
今度は□につけたチェックマークを、マウス操作で消してください。
クリックしましたね。
しかし、チェックしたとは言わないはずです。
というわけで、□にチェックマークをつけるのがチェック。
この時以外で、チェックは使いません。
そして、このチェックを入れるためにする操作がクリックです。
クリックはパソコンやスマホ操作全般に用いられます。
ですから、□にチェックするのもその操作の1つになるわけです。
【おまけ】checkedについて
ここはおまけというか補足です。
上で見た 。
このはじめからチェックマークをつけるためには、以下のようにします。
<input type="checkbox" checked>checkedを<input>の中に書き込みましょう。
そうすれば、はじめからボックスに☑️がついた状態になります。
そして、クリックしたらチェックは消えます。
※checkedは属性の1つです。
【参考記事】『imgのhtml属性での幅と高さの指定』の記事の「html属性」
クリックすると該当箇所にジャンプします。
参考サイト
この記事は、HTML Living Standardをもとに解説しました。
HTML Living Standardとはhtmlのルールブックみたいなもので、その最新版です。
1つ前はHTML5となります。
- 4.10.5.1.15 チェックボックスの状態「4.10.5 inputの状態」HTML Living Standard
- 4.10.4 label要素「4.10 フォーム」HTML Living Standard
- <input>：入力欄(フォーム入力要素) MDN Web Docs
- <label>：入力欄ラベル要素 MDN Web Docs
すべて翻訳ありです。
むずかしめに書かれてあるので、ホント参考程度にどうぞ。
まとめ
今回は、<input>と<label>などについて紹介しました。
2つが分かれば、ハンバーガーメニューも理解しながらコードを書けるはずです。
参考にしてみてください。
ハンバーガーメニューの記事はこちらから見れます。
