どうも！LSSです！！
今回は、「HTMLやCSSを使った仕掛け作りに挑戦してみたい」方向けの記事となります。
HTMLでWebページ上に配置できるもののひとつに「チェックボックス」があります。
（←こういうものですね）
クリックするたびに オン／オフ が切り替わり、さらにチェックされている時とされていない時に、それぞれCSSによる装飾指定を変更できるので、アイデア次第で面白い使い方ができたりします。
【CSS】カードをめくる その３ idを使わない版 - Little Strange Software
このブログでもいくつかサンプルを作成・公開していますが、
「勉強したいが、コードを見てもなんのことやら…」
という方向けに、仕組みの基本的な部分を解説してみます。
HTMLでの記述と、CSSでの記述の合わせ技となりますが、まずはHTML部分について。
CSSについては後日別記事として公開する予定です^^
まずチェックボックス
コード
<input type="checkbox" />
inputタグは、typeオプションの中に書いた内容によって、様々な入力フォーム部品になります。
そこに checkbox を指定する事で、クリックするとチェックが入り、もう一度クリックするとチェックが外れる、トグルスイッチになるんですね。
ちなみに、
<input checked="checked" type="checkbox" />
と付け足すと、
↑最初からチェックが入った状態で表示されます。（クリックで切り替えられるのは同じ）
チェックボックスとラベルの連動
チェックボックスは小さいながら、オンかオフかが一目でわかる優れた部品です。
が、難点を上げると、「小さい」というメリットが「押しにくい」というデメリットをも はらんでいる点。
このデメリットには救済策があって、「ラベル」というものを別に用意しておき、チェックボックスと紐づけておく事で、「ラベル」をクリックするとチェックボックスをクリックしたのと同じように、チェックボックスの オン／オフ を切り替える事ができるようになります。
コード
<input id="chkbx" type="checkbox" />
<label for="chkbx">ここをクリック</label>
この場合、「紐づけ」のために「id」を設定する必要があります。
まずinputタグ内に id="chkbx" と、idをつけてあげます。
※chkbxの部分は任意の名前で、半角アルファベットで始まり、半角アルファベットか数字を続けた名前を好きに名付ける事ができます。
そして、そのinputタグよりも後ろに、
<label for="chkbx">ここをクリック</label>
というラベルタグを置き、 for= で「そのラベル部分をクリックした時に、どのチェックボックスが反応するか」を指定してあげる事で、ラベルとチェックボックスが紐づきます。
注意点が２つあります。
・同一Webページ上で同じidが２つあってはいけない。
・この場合、labelタグはinputタグよりも後に書かないといけない。
もうひとつのラベルとチェックボックスの連動方法
前述の方法では、同じようなものをたくさん並べる時に、それぞれidを変えてつけなければならない、という面倒が生じます^^;
それぞれidをつけてやれば良いのですが、CSSでの装飾をかける時や、「コピペで使えるサンプル」配布時なんかに説明が大変だったりします。
※参考（説明が大変な例ｗ）
→【CSS】本をめくる、という動作をCSSで表現してみました。 - Little Strange Software
この「ラベルとチェックボックスを連動させる方法」はもうひとつあり、こちらの方法であれば「idを指定する事なく、ラベルとチェックボックスを連動」させる事ができます^^
コード
<label>
<input type="checkbox" />
ここをクリック
</label>
このように、「inputタグ」と「ラベルに使用する文章」を、<label>と</label>で挟んでしまいます。
こうしておく事で、
「<label>から</label>までの間のどこをクリックしても、その中に挟まれているinputタグのチェックボックスに連動する」
という事になり、idを指定する必要性から解放されます^^
例えば、
<label>
<input type="checkbox" /><br/>
<span class="dummy">ここをクリック</span><br/>
<span class="dummy">こっちでもＯＫ</span>
</label>
というコードで、
のように、途中に<br/>による改行が入っていても、複数の<span>タグを使用していても、<label>の中身であればどこをクリックしてもチェックボックスがオン／オフする事になります。
上記コード中、<span>タグ内に class="dummy" を入れていますが、こちらはHTML的には本来なくても良い指定です。
この記事を書いている はてなブログの仕様に
「何も指定のないspanタグは自動的に削除する」
という機能があるために、無意味な指定を入れています。
また、同じく はてなブログの仕様で
「<label>と</label>の間に<p>タグや<div>タグなどが入っていると、勝手に<label>構造が作り直される」
というのもあります^^;
まとめ
単純にチェックボックスをページ上に配置するだけなら、
<input type="checkbox" />
と書くだけでチェックボックスが出てきます。
クリックしやすいようにラベルも用意するなら、
<input id="chkbx" type="checkbox" />
<label for="chkbx">ここをクリック</label>
のように、inputタグとlabelタグを紐づけ。
idを使わずにラベルを使うなら、
<label>
<input type="checkbox" />
ここをクリック
</label>
のように<label>と</label>でinputタグもラベルに使う部分も挟みこんでしまう事でもラベルが使用できます^^
…で、こうやって配置したチェックボックスを使って「仕掛けを作る」ためにCSSを書く方法については、後日続編記事として公開します。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
