CSSのみで、クリックした時に要素のレイアウト(表示・非表示等)を切り替える方法

クリックである要素の表示・非表示を制御することってあると思いますが、そういう場合はだいたいjQueryを使うことが多いと思います。自分もそういう場合はjQueryを使いますが、工夫次第でCSSのみで実装できるのでその方法を紹介(ただし、IE8以下には対応していないようです)。

主に使うCSSのテクニックは、:checked擬似クラスと隣接セレクタの+(もしくは、関節セレクタの~)
:checked擬似クラスはチェックボックスやラジオボタンがチェックしている要素を表す擬似クラスで、例えば、以下のようにするとチェックボックスのオンオフでボタンの表示・非表示が切り替わります。

CSS

#entryBtn{
	display:none;
}
#check1:checked ~ #entryBtn{
	display:inline-block;
}

HTML

<input type="checkbox" id="check1"><label for="check1">利用規約に同意する</label><br>
<input type="button" id="entryBtn" value="登録">

以下、実行結果

ちなみに、チェックボックスやラジオボックスは非表示(display:none)になっていてもチェックできるようなので、やろうと思えばlabelタグをボタンのようにして、ボタンを押したような状態のレイアウトでチェックの可否を表すこともできる。

CSS

.noneCheck{
	display:none;
}
.noneCheck + label{
	display:inline-block;
	width:80px;
	padding:10px;
	text-align:center;
	color:#555;
	font-weight:bold;
	text-shadow:0px 1px 0px #fff;
	
	background:#e5e5e5;
	box-shadow:1px 2px 0px rgba(0,0,0,0.4);
	border-radius:5px;
	border:1px solid #ddd;
}
.noneCheck:checked + label{
	box-shadow:1px 2px 0px rgba(0,0,0,0.4) inset;
}

HTML

<p>登録しているサイトをクリックしてください</p>
<input type="checkbox" class="noneCheck" id="check2"><label for="check2">Twitter</label>
<input type="checkbox" class="noneCheck" id="check3"><label for="check3">Facebook</label>
<input type="checkbox" class="noneCheck" id="check4"><label for="check4">mixi</label>
<input type="checkbox" class="noneCheck" id="check6"><label for="check6">Google+</label>
<input type="checkbox" class="noneCheck" id="check5"><label for="check5">LINE</label>

以下、実行結果