クリックで展開・表示されるコンテンツをHTMLとCSSだけで作成したい

"HTML CSS クリック 展開"

普通免許のコンテンツの中にいやらしい問題という、自分がいやらしいなこれは、と思った問題を主観で集めたページがあります。

改善前はこんな感じのページだったんですが、始めは答えを隠しておき、問題をクリックすれば答えが見られるように改善したい。

どんなワードで検索すればいいのか分からなかったので、見つけるのに苦労するかな、と思いきや、"HTML CSS クリック 展開"で検索すると、答えらしきものが1ページ目にいきなり登場。

参考にしたサイト・ページ

主にこの2ページを参考に挑戦します。

"label" "input" "checked" "visibility"

読んでいるだけでは分からんので、1回試してみるのが早いっすね。

サンプル1

HTMLのソース

<label for="mondai_sanple1">これは問題です。</label>
<input type="checkbox" id="mondai_sanple1">

CSSはなし。

"for"と"id"で紐づければ、チェックボックスだけではなく、"これは問題です。"をクリックしてもチェックされる。

紐づけなければ"これは問題です。"をクリックしてもチェックされない。

サンプル2

HTMLのソース

<label for="mondai_sanple2" class="sotomi">これは問題です。</label>
<input type="checkbox" id="mondai_sanple2" class="mondai_check">
<div class="nakami">
    <p>これは答えです。</p>
</div>

CSSのソース

.nakami  {
    visibility: hidden;
}

.mondai_check:checked + .nakami  {
    visibility: visible;
}

というクラス名を指定。

普段のnakamiはhiddenだけど、mondai_check(input)がchecked(チェックされた状態)になると、mondai_checkに隣接("+"は隣接セレクタ)しているnakamiがvisibleになるよ。

ということらしい。なんとなくだけど手の内に入ったような…。

サンプル3

HTMLのソース

<label for="mondai_sanple3" class="sotomi">A.これは問題です。</label>
<input type="checkbox" id="mondai_sanple3" class="mondai_check">
<div class="nakami">
    <p>Q.これは答えです。</p>
</div>

CSSのソース

.sotomi  {
    margin-left: 16px;
}

.mondai_check  {
    display: none;
}
            
.nakami  {
    visibility: hidden;
    height: 0;
}

.mondai_check:checked + .nakami  {
    visibility: visible;
    height: auto;
}

あとは細かいデザインを指定して完成のはず。

サンプル4(とりあえず完成)

HTMLのソース

<label for="mondai_sanple4" class="sotomi">A.これは問題です。</label>
<input type="checkbox" id="mondai_sanple4" class="mondai_check">
<div class="nakami">
    <p>Q.これは答えです。</p>
</div>

CSSのソース

.sotomi  {
    margin-left: 6px;
    padding: 10px;
    background-color: #ededed;
    display: block;
    font-weight: bold;
    border: solid 1px black;
}

.sotomi:hover  {
    background: #ffffff;
}
    
.mondai_check  {
    display: none;
}

.nakami  {
    visibility: hidden;
    height: 0;
}
    
.mondai_check:checked + .nakami  {
    visibility: visible;
    height: auto;
}

ここまで理解するだけでも結構時間がかかっています。疲れたー。

opacityの有無

参考にした2つのページにはopacityが使用されているんだけど必要なんだろうか?

別になくても困らない感じなんだけど…。まぁ、細かいことは気にしないでおこう。もう疲れたし完成で。

後日談：detailsとsummary

しばらくしてから、簡単に開閉式のコンテンツが作成できるdetailsとsummaryというタグを知りました。

サンプル

HTMLのソース

<details>
    <summary>A.これは問題です。</summary>
    <p>Q.これは答えです。</p>
</details>

CSSのソース

details  {
    margin-left: 15px;
}

summary  {
    padding: 10px;
    background-color: #ededed;
    font-weight: bold;
    border: solid 1px black;
}

details p  {
    margin-left: 26px;
}

他にも矢印が消せたり、オープン時のCSSが指定できたりするみたいなんで、詳細は上記のリンクへどうぞ。

まぁ、どう考えても、こっちのほうがシンプルで早いっすよねぇ。

せっかくうまくいったのに、なんなんだろうこの徒労感は…。