掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
|
|
<Number>: [00000034]
<Date>: 2023/09/09 02:30:04
<Title>:
<Name>: amanojaku@管理人
|
|
|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<!--
参考
意外と知らない!?CSSセレクタ20個のおさらい
http://weboook.blog22.fc2.com/blog-entry-268.html
!importantはもう使わない！CSSの優先順位をおさらいしよう
http://creator.aainc.co.jp/archives/4947
※↑ページ後半にCSS優先順位の表が記載されています、なおCSS優先順位が同じ場合は後のコードが優先されます。
-->
<style>
.Accordion_Container {
width: 97%;
margin: 0 auto;
}
.Accordion_Exterior {
width: 90%;
margin: 0 auto;
}
.Accordion_LOpener {
display: block;
font-weight: bold;
color: #fef;
background: #0bb;
margin: 0.1rem 0;
padding: 0.2em 1em;
}
.Accordion_Content {
display: none;
border: solid thin #000;
}
.Accordion_ISwitch:checked+.Accordion_LOpener {
/*CSS優先順位：21点*/
font-weight: bold;
color: #767;
background: #0f7;
}
.AccordionEntirety_ISwitch:checked+.Accordion_LOpener {
/*CSS優先順位：21点*/
font-weight: bold;
color: #767;
background: #0f7;
}
.Accordion_ISwitch:checked+.Accordion_LOpener+.Accordion_Content {
/*CSS優先順位：31点*/
display: block;
}
.AccordionEntirety_ISwitch:checked+label+.Accordion_Container>.Accordion_Content {
/*CSS優先順位：32点*/
display: block;
}
.Accordion_Container>.Accordion_LOpener:hover {
/*CSS優先順位：21点*/
font-weight: bold;
color: #767;
/*#0ee #5ef #aef #bef #ede*/
background: #0ee;
}
.Accordion_Container>input[type="checkbox"] {
/*CSS優先順位：21点*/
display: none;
}
.Accordion_Exterior>input[type="checkbox"] {
/*CSS優先順位：21点*/
display: none;
}
</style>
<body>
<div class="Accordion_Exterior">
<input id="TUnit-001" type="checkbox" name="TUnit-001" class="AccordionEntirety_ISwitch">
<label class="Accordion_LOpener" for="TUnit-001">001-Entirety</label>
<div class="Accordion_Container">
<input id="TUnit-001-001" type="checkbox" name="TUnit-001" class="Accordion_ISwitch">
<label class="Accordion_LOpener" for="TUnit-001-001">001-001</label>
<div class="Accordion_Content">
いろはにほへと<br>
ちりぬるをわかよたれそ<br>
つねならむうゐのおくやま<br>
けふこえてあさきゆめみし<br>
ゑひもせす<br>
</div>
<input id="TUnit-001-002" type="checkbox" name="TUnit-001" class="Accordion_ISwitch">
<label class="Accordion_LOpener" for="TUnit-001-002">001-002</label>
<div class="Accordion_Content">
ちりぬるをわかよたれそ<br>
つねならむうゐのおくやま<br>
けふこえてあさきゆめみし<br>
ゑひもせす<br>
</div>
<input id="TUnit-001-003" type="checkbox" name="TUnit-001" class="Accordion_ISwitch">
<label class="Accordion_LOpener" for="TUnit-001-003">001-003</label>
<div class="Accordion_Content">
つねならむうゐのおくやま<br>
けふこえてあさきゆめみし<br>
ゑひもせす<br>
</div>
</div>
</div>
</body>
</html>
|
|
|
|
|
|
SMT Version 8.022(+A) Release M6.
Author : amanojaku.
