どうも！LSSです！！
最近、JavaScriptを使って色々やってみる事にハマり、記事もそればかりになってきていましたが、今回は
『JavaScriptを使わずに、はてなブログ記事内で使用可能な開閉メニュー』
の作り方を記事にしてみます！
※はてなブログ以外でももちろん使えますよ^^
サンプルとそのコード
↓の「メニュー」をクリックすると、その下に文字が現れます！
コード
<style><!--
#menu{display:none;}
#tg01:checked~#menu{display:block;}
--></style>
<div>
<label for="tg01">メニュー</label>
<input id="tg01" style="display: none;" type="checkbox" />
<div id="menu">ああああああ</div>
</div>
↑このコードを「HTML編集」画面にコピペして、「メニュー」と「ああああああ」の文字を好きに書き換える事で使用できます^^
注意点！半角チルダについて
コードの３行目、「:checked」と「#menu」の間にあるのは、「半角チルダ」という記号です。
↑一般的な日本語キーボードでいうと、このへんにいます。
「^」の記号が出るキーを、シフトキーを押しながら叩くと出ます。
とりあえず解説
コードはわずか９行ですが…解説はちょっと長々しくなります。
上記コードをコピペして書き換えるだけで使用できるので、以下、興味のある方向けの記述となります。
<style><!--
#menu{display:none;}
#tg01:checked~#menu{display:block;}
--></style>
<div>
<label for="tg01">メニュー</label>
<input id="tg01" style="display: none;" type="checkbox" />
<div id="menu">ああああああ</div>
</div>
「menu」と「tg01」は任意の名前です。
任意の名前＝好きに変えちゃってOK！な部分です。
idとして使用しているので、
「同じidは１つのページに複数存在してはいけない」というルールがある点のみご注意ください（複数 使う場合はそれぞれ変えて使う必要がある、という事です）
それぞれ３回づつ出てきていますが、実際にidとして使用しているのは
id="なんちゃら"
という書き方をしている部分で、あとの２つは「そのidに対する指定です」と明示している部分になります。
<input id="tg01" style="display: none;" type="checkbox" />
コード７行目に↑こんなタグを書いています。
これが「表示するか表示しないか」を管理する、フラグとなる部分です。
<input>タグというのはフォームの部品で、type="checkbox"とした場合は
↑こういう、「クリックするとON/OFFが切り替わる」タイプの部品になります。
このチェックボックス自身は
style="display: none;"
という指定によって、今回のサンプルでは「あえて見えないように」しています。
<label for="tg01">メニュー</label>
コード６行目に↑こんなタグを書いています。
for="tg01"
という指定により、この「メニュー」という文字をクリックした時に、
「非表示扱いにしたtg01というidを持つチェックボックスをクリックした事にする」
という事になります！
試しに、
<label for="sample01">ラベルのサンプル</label>
<input id="sample01" type="checkbox"/>
としてみると、
↑こうなります。
チェックボックスをクリックする代わりに「ラベルのサンプル」という文字をクリックする事でもチェックボックスのチェックがついたり消えたりする事が確認できます。
<div id="menu">ああああああ</div>
この部分が、メニューのクリックによって、出てきたり消えたりする部分となります。
idを指定しているだけで、それ以外には特に何もありません。
はてなブログ特有の注意点！<div>と</div>で囲んでいるのがミソ
コード５行目と９行目にて、label・input・divをさらに別のdivで囲んでいます。
…これ、はてなブログ以外の「記事を書く」以外のもの（ワードプレスとか）の方には不要かと思われますが、はてなブログの「記事を書く」画面において、
「とにかく自動的に<p>と</p>で囲んでしまおう」
という仕様があり、それを避けるために囲んでいます。
CSS部分の解説
<style><!--
#menu{display:none;}
#tg01:checked~#menu{display:block;}
--></style>
１~４行目、この部分がCSSの指定部分となります。
１行目と４行目は「ここからCSSです」「ここまでCSSです」というだけの記載で、実質的な中身は２，３行目という事になります。
#menu{display:none;}
コード２行目のこの記述、これは
「menuというidを持つ部分は表示しない！」
という宣言になります。
開閉メニューが最初、閉じられた（表示されていない）状態になるのは、この１行によるものです。
#tg01:checked~#menu{display:block;}
コード３行目のこの記述、これが「CSSによる開閉メニューの実現」において
もっとも核となる１行
です！
まず冒頭の
#tg01
はONになったりOFFになったりするチェックボックスにつけたidでした。
それに続いて、
:checked
という記述。これは「疑似クラス」と呼ばれるもののひとつで、「チェックがONの場合」という意味合いとなります。
つまり、
#tg01:checked
で「tg01というidのチェックボックスがONの場合…」という事になるわけです。
で、次に出ました、~（半角チルダ）！
これは「兄弟」を意味しています。
もう一度コード５~９行目を確認すると、
<div>
<label for="tg01">メニュー</label>
<input id="tg01" style="display: none;" type="checkbox" />
<div id="menu">ああああああ</div>
</div>
<div>と</div>の間に、
<label for="tg01">メニュー</label>
と、
<input id="tg01" style="display: none;" type="checkbox" />
と、
<div id="menu">ああああああ</div>
の３組のタグがいます。
（inputタグは最後が /> で終わっている事で閉じタグ不要となっています。）
この時、label、input、divから見ると、<div>は「親」という事になり、
<input id="tg01" style="display: none;" type="checkbox" />
から見た
<div id="menu">ああああああ</div>
は「兄弟」という事になります。
※はてなブログ特有の～で書いていた問題は、ここに絡んできます。
はてなブログ「記事を書く」はlabelとinputだけを、自動的にpタグで囲んでしまうため、tg01から見たmenuが「兄弟」ではなく「叔父さん」になってしまいます^^;
ので、
#tg01:checked~#menu
は
「tg01というidのチェックボックスがONの場合のmenuというidをもつもの」
という意味になります。
で、ようやく全文。
#tg01:checked~#menu{display:block;}
この、
{display:block;}
は「ブロック要素として表示する」という事になります。
長くなりましたが、まとめると
#menu{display:none;}
#tg01:checked~#menu{display:block;}
は、
「menuは基本的に非表示。だけど兄弟分であるtg01がONの時だけ、ブロック要素として表示しましょう。」
という指示になります^^
以上、解説終わりっ！！
応用編 メニューが複数種類ある場合
サンプル
コード
<style><!--
#menu01{display:none;}
#chk01:checked~#menu01{display:block;}
#menu02{display:none;}
#chk02:checked~#menu02{display:block;}
#menu03{display:none;}
#chk03:checked~#menu03{display:block;}
--></style>
<div>
<label for="chk01">麺類</label>
<input id="chk01" style="display: none;" type="checkbox" />
<div id="menu01">・ラーメン<br />・ワンタンメン<br />・チャーシュー麺<br />・味噌ラーメン</div>
<br />
<label for="chk02">ご飯</label>
<input id="chk02" style="display: none;" type="checkbox" />
<div id="menu02">・ライス<br />・チャーハン<br />・天津飯<br />・麻婆丼</div>
<br />
<label for="chk03">飲み物</label>
<input id="chk03" style="display: none;" type="checkbox" />
<div id="menu03">・ビール<br />・日本酒<br />・紹興酒<br />・コーラ</div>
</div>
↑複数になっても、CSS部分は<style>～</style>にまとめて書けます！
応用編 ほんとにリンクが入ったメニュー
サンプル
コード
<style><!--
#mazemenu{display:none;}
#mzchk:checked~#mazemenu{display:block;}
--></style>
<div>
<span style="color: #ff0000; font-size: 150%;"><strong><label for="mzchk">超巨大迷宮シリーズ！</label></strong></span>
<input id="mzchk" style="display: none;" type="checkbox" />
<div id="mazemenu">
・<a href="https://little-strange.hatenablog.com/entry/2020/03/01/035425" target="_new">超巨大（になりそこなった）迷宮</a><br />
・<a href="https://little-strange.hatenablog.com/entry/2020/03/04/004342" target="_new">超巨大？迷宮第二弾！！（未だ試作版）</a><br />
・<a href="https://little-strange.hatenablog.com/entry/2020/03/06/022105" target="_new">超巨大迷宮 第三弾！「position:absolute;との闘い篇」…じゃなくて「宝探し篇」！！</a><br />
・<a href="https://little-strange.hatenablog.com/entry/2020/03/07/194905" target="_new">超巨大迷宮 第四弾！「いつか来た道篇」！！</a>
</div>
</div>
↑非表示・表示切替部分が複雑になっても、要はidをつけたdivで囲んでおけばOK！
長くなってしまいました^^;
JavaScriptのinnerHTMLを使っても同じような事はできますが、CSSのみでできるなら、その方がスマートですね^^
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
