どもです。
この頃、なんとなく癒しが足りない餅。です。

今回は久しぶりにCSSの話。

HTMLにはフローティングウィンドウというものがあります。
ボタンをクリックすると画面にウィンドウが出てくる奴。条件としては、ポップアップブロックなどに適用されず、動かすことが可能なものだそうで。

で、それを作るということになったものの、設置箇所がデータベースのリスト中。
その数が動的というのが困ったもので、しかもデータベース化するのは僕ではなく。
これは、普通にJavasriptで設置・管理するのは厳しいかも？。

ただ、動かせないウィンドウならCSSだけで実現可能そうだったので、そっちでやってみました。

参考にしたサイト様はこちら。

HTML側の記述はこちら。

<label class="floatwindow_la" for="floatwindow01"></label>
  <input class="floatwindow" id="floatwindow01" type="checkbox" />
<div class="floatwindow"><label for="floatwindow01">×</label> ウィンドウの中身を記入します。</div>

で、CSS側の記述はこちらです。

div.floatwindow, input.floatwindow{
	display:none;
	}
input[type="checkbox"]:checked + div.floatwindow {
	display:block;
	position:fixed;
	top:20%;
	right:20%;
	width:50%;
	height:50%;
	background:#fff;
	border:1px solid #ccc;
}

仕組みとしましては、チェックボックスにチェックが入っているときのみ、チェックボックスと隣接するdivがdispray:blockになるという単純なもの。

チェックボックスは不可視にし、ラベルをボタン風に作ります。
ウィンドウは移動不可なので、滅多に使わないposition:fixedで大きさ共々ウィンドウ中に固定します。

ウィンドウもどきでチェックボックスが隠れることがあるので、ウィンドウの方にもラベルをつけるのを忘れずに。

今まで隣接セレクタは使いどころがわかっていなかったのですが、ラジオボタンやチェックボックスなどと併用するとフォームに選択ボタンが設置できることがわかりました。

まだまだ、CSSに関しても学びが足りないなぁ、これは。