<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
<title></title>
<style>
.Display_Container {}
.Display_LSwitcher {
user-select: none;
display: inline-block;
font-weight: bold;
color: #fef;
background: #0bb;
border-radius: 0.5rem;
padding: 0.1rem 0.5rem;
}
.Display_Content {
display: none;
border: solid thin #000;
}
.Display_Switch {
display: none;
}
.Display_Switch:checked+.Display_LSwitcher {
font-weight: bold;
color: #767;
background: #0f7;
}
.Display_LSwitcher:hover {
font-weight: bold;
color: #767;
background: #5ef;
}
.Display_Switch:checked+.Display_LSwitcher:hover {
font-weight: bold;
color: #767;
background: #5ef;
}
.Display_Main {
margin: 0.25rem 0;
}
.Display_Unit-001 {
display: flex;
justify-content: center;
background: #0ff;
}
.Display_Unit-001-Box {
visibility: hidden;
background: #000;
border-radius: 10vw;
width: 20vw;
height: 20vw;
}
.Display_Unit-002 {
border: solid thin #000;
border-radius: 0.5rem;
padding: 0.25rem;
margin: 0.25rem;
}
.Display_Unit-002-Box {
visibility: hidden;
}
.Display_Switch:checked+.Display_LSwitcher+.Display_Main .Display_Unit-001-Box {
visibility: visible;
}
.Display_Switch:checked+.Display_LSwitcher+.Display_Main .Display_Unit-002-Box {
visibility: visible;
}
</style>
</head>
<body>
<input id="Tab-001" type="checkbox" name="Tab-001" class="Display_Switch">
<label class="Display_LSwitcher" for="Tab-001">Click!</label>
<div class="Display_Main">
<div class="Display_Unit-001">
<div class="Display_Unit-001-Box">
</div>
</div>
<div class="Display_Unit-002">
<div class="Display_Unit-002-Box">
いろはにほへと ちりぬるを<br>
わかよたれそ つねならむ<br>
うゐのおくやま けふこえて<br>
あさきゆめみし ゑひもせす<br>
</div>
</div>
</div>
</body>
</html>
PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgPCEtLQptZXRh44K/44Kw44GnY2hhcnNldOOCklVURi0444Gr6Kit5a6a44GX44Gm44GE44G+44GZ44CCCijjg6Ljg4Hjg63jg7Pku5bjga7jgq3jg6Pjg6njgq/jgr/jg7zjgrvjg4Pjg4jjgavlpInmm7TjgZfjgabjgoLoia/jgYTjgafjgZnjgYwp5b+F44GaY2hhcnNldOOBq+ioreWumuOBleOCjOOBpuOBhOOCi+OCreODo+ODqeOCr+OCv+ODvOOCu+ODg+ODiOOBp+OCu+ODvOODluOBl+OBpuS4i+OBleOBhOOAggotLT4KICA8dGl0bGU+PC90aXRsZT4KICA8c3R5bGU+CiAgICAuRGlzcGxheV9Db250YWluZXIge30KCiAgICAuRGlzcGxheV9MU3dpdGNoZXIgewogICAgICB1c2VyLXNlbGVjdDogbm9uZTsKICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgY29sb3I6ICNmZWY7CiAgICAgIGJhY2tncm91bmQ6ICMwYmI7CiAgICAgIGJvcmRlci1yYWRpdXM6IDAuNXJlbTsKICAgICAgcGFkZGluZzogMC4xcmVtIDAuNXJlbTsKICAgIH0KCiAgICAuRGlzcGxheV9Db250ZW50IHsKICAgICAgZGlzcGxheTogbm9uZTsKICAgICAgYm9yZGVyOiBzb2xpZCB0aGluICMwMDA7CiAgICB9CgogICAgLkRpc3BsYXlfU3dpdGNoIHsKICAgICAgZGlzcGxheTogbm9uZTsKICAgIH0KCiAgICAuRGlzcGxheV9Td2l0Y2g6Y2hlY2tlZCsuRGlzcGxheV9MU3dpdGNoZXIgewogICAgICBmb250LXdlaWdodDogYm9sZDsKICAgICAgY29sb3I6ICM3Njc7CiAgICAgIGJhY2tncm91bmQ6ICMwZjc7CiAgICB9CgogICAgLkRpc3BsYXlfTFN3aXRjaGVyOmhvdmVyIHsKICAgICAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICAgIGNvbG9yOiAjNzY3OwogICAgICBiYWNrZ3JvdW5kOiAjNWVmOwogICAgfQoKICAgIC5EaXNwbGF5X1N3aXRjaDpjaGVja2VkKy5EaXNwbGF5X0xTd2l0Y2hlcjpob3ZlciB7CiAgICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogICAgICBjb2xvcjogIzc2NzsKICAgICAgYmFja2dyb3VuZDogIzVlZjsKICAgIH0KCiAgICAuRGlzcGxheV9NYWluIHsKICAgICAgbWFyZ2luOiAwLjI1cmVtIDA7CiAgICB9CgogICAgLkRpc3BsYXlfVW5pdC0wMDEgewogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgYmFja2dyb3VuZDogIzBmZjsKICAgIH0KCiAgICAuRGlzcGxheV9Vbml0LTAwMS1Cb3ggewogICAgICB2aXNpYmlsaXR5OiBoaWRkZW47CiAgICAgIGJhY2tncm91bmQ6ICMwMDA7CiAgICAgIGJvcmRlci1yYWRpdXM6IDEwdnc7CiAgICAgIHdpZHRoOiAyMHZ3OwogICAgICBoZWlnaHQ6IDIwdnc7CiAgICB9CgogICAgLkRpc3BsYXlfVW5pdC0wMDIgewogICAgICBib3JkZXI6IHNvbGlkIHRoaW4gIzAwMDsKICAgICAgYm9yZGVyLXJhZGl1czogMC41cmVtOwogICAgICBwYWRkaW5nOiAwLjI1cmVtOwogICAgICBtYXJnaW46IDAuMjVyZW07CiAgICB9CgogICAgLkRpc3BsYXlfVW5pdC0wMDItQm94IHsKICAgICAgdmlzaWJpbGl0eTogaGlkZGVuOwogICAgfQoKICAgIC5EaXNwbGF5X1N3aXRjaDpjaGVja2VkKy5EaXNwbGF5X0xTd2l0Y2hlcisuRGlzcGxheV9NYWluIC5EaXNwbGF5X1VuaXQtMDAxLUJveCB7CiAgICAgIHZpc2liaWxpdHk6IHZpc2libGU7CiAgICB9CgogICAgLkRpc3BsYXlfU3dpdGNoOmNoZWNrZWQrLkRpc3BsYXlfTFN3aXRjaGVyKy5EaXNwbGF5X01haW4gLkRpc3BsYXlfVW5pdC0wMDItQm94IHsKICAgICAgdmlzaWJpbGl0eTogdmlzaWJsZTsKICAgIH0KCiAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICA8aW5wdXQgaWQ9IlRhYi0wMDEiIHR5cGU9ImNoZWNrYm94IiBuYW1lPSJUYWItMDAxIiBjbGFzcz0iRGlzcGxheV9Td2l0Y2giPgogIDxsYWJlbCBjbGFzcz0iRGlzcGxheV9MU3dpdGNoZXIiIGZvcj0iVGFiLTAwMSI+Q2xpY2shPC9sYWJlbD4KICA8ZGl2IGNsYXNzPSJEaXNwbGF5X01haW4iPgogICAgPGRpdiBjbGFzcz0iRGlzcGxheV9Vbml0LTAwMSI+CiAgICAgIDxkaXYgY2xhc3M9IkRpc3BsYXlfVW5pdC0wMDEtQm94Ij4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICAgIDxkaXYgY2xhc3M9IkRpc3BsYXlfVW5pdC0wMDIiPgogICAgICA8ZGl2IGNsYXNzPSJEaXNwbGF5X1VuaXQtMDAyLUJveCI+CiAgICAgICAg44GE44KN44Gv44Gr44G744G444Go44CA44Gh44KK44Gs44KL44KSPGJyPgogICAgICAgIOOCj+OBi+OCiOOBn+OCjOOBneOAgOOBpOOBreOBquOCieOCgDxicj4KICAgICAgICDjgYbjgpDjga7jgYrjgY/jgoTjgb7jgIDjgZHjgbXjgZPjgYjjgaY8YnI+CiAgICAgICAg44GC44GV44GN44KG44KB44G/44GX44CA44KR44Gy44KC44Gb44GZPGJyPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvZGl2PgoKPC9ib2R5Pgo8L2h0bWw+Cg==