HTMLだけで折り畳み構成（summary と details） + ちょっと装飾

Blog Admin

HTMLタグだけで、詳細説明を表示したりしなかったりなパートを構成できます。
いわゆるアコーディオンメニューというやつですね。
けっこう動きがあるのにJavaScriptは不使用。

HTMLのみでアコーディオン
details と summary

HTMLの要素の話です。
そのままではシンプル過ぎるので、クリックすることが分かりやすいようなアレンジは必要だと思っています。

折り畳みを作ろう
- 書いてあるHTML-1
- 書いてあるHTML-2
応用編（CSS使用）
- HTML
- CSS
自由度が高い

折り畳みを作ろう

いきなり見た目の例です。
一目瞭然なので。

パターン 1

クリックすると展開されます。
見出し部分を再びクリックすると閉じます。

ネストできる要素はいろいろです。

基本的にはなんでも入ります。

パターン 2

最初から展開させておくことも可能です。

HTML5から追加されたタグ
IEなど古いブラウザーは非対応
スマホでも大丈夫です！

箇条書きなど、相性がよさそうです。

上の内容はHTMLのみで構成しています。
どこをクリックしたらよいかが分かりにくいかもしれません。
まずはプレーンでｗ

書いてあるHTML-1

<details>
<summary>パターン 1</summary>
<p>クリックすると展開されます。<br>
見出し部分を再びクリックすると閉じます。</p>
<p>ネストできる要素はいろいろです。</p>
<figure class="wp-block-image aligncenter size-thumbnail is-resized"><a href="https://wnkhs.net/wp-content/uploads/2023/03/IMG_20230321_101137.jpg"><img src="https://wnkhs.net/wp-content/uploads/2023/03/IMG_20230321_101137-150x150.jpg" alt="2023年3月21日" class="wp-image-33755" width="75" height="75"/></a></figure>
<p>基本的にはなんでも入ります。</p>
</details>

素組だと閉じた状態です。
画像部分はGutenbergで生成されたコードを丸パクリです。

書いてあるHTML-2

<details open>
<summary>パターン 2</summary>
<p>最初から展開させておくことも可能です。</p>
<ul>
<li>HTML5から追加されたタグ</li>
<li>IEなど古いブラウザーは非対応</li>
<li>スマホでも大丈夫です！</li>
</ul>
<p>箇条書きなど、相性がよさそうです。</p>
</details>

detailsの属性にopenを加えると、デフォルトが展開状態になります。

応用編（CSS使用）

クリックするところだということを分かりやすくするにはどうしたらよいのか考えながら、たとえばこのようなかたちでどうかと思っております。
さすがにCSSを使用しております。

パターン 3

マウスポインターの形状が変わるだけでも、クリックしてよいのかと思えるのではないでしょうか。

全体的な装飾: CSSクラスで背景色を入れています。加えて、クリックできそうなアンダーラインを追加してみました。
マウスポインターの形状: いつもリンクをクリックするときのやつにしております。ただし、これはスマホやタブレットなどのタッチ操作では意味がないです。

見た目の変化はcssですね。

かなりシンプルに書いているので装飾にも限界があります。
ブロック要素などをうまく使って、空白などは調整してください。

HTML

<details class="d33788">
<summary class="s33788">パターン 3</summary>
<p>マウスポインターの形状が変わるだけでも、クリックしてよいのかと思えるのではないでしょうか。</p>
<dl>
<dt>全体的な装飾</dt>
<dd>CSSクラスで背景色を入れています。加えて、クリックできそうなアンダーラインを追加してみました。</dd>
<dt>マウスポインターの形状</dt>
<dd>いつもリンクをクリックするときのやつにしております。ただし、これはスマホやタブレットなどの<b>タッチ操作では意味がない</b>です。</dd>
</dl>
<p>見た目の変化はcssですね。</p>
</details>

HTML自体はほぼ変わらずです。
CSS用にクラス名を指定しているくらいです。

CSS

.d33788 {
  background-color: #f4f4f4;
}
.s33788 {
  background-color: #eeeeff;
  border-bottom: solid 2px #ccccff;
  cursor: pointer;
}

最低限で。
cursorがマウスポインターの形状変更です。

自由度が高い

構成さえ間違えなければ、使い勝手のよいタグだと思います。

CSSの疑似クラスを使えば、展開用のマーク形状の変更も可能です。
デフォルトだと三角形が左側に標示されますが、右側に特定のマークを表示させるなどといったアレンジが考えられます。

親要素の関係があるのですが。。
文字のぶら下げ設定はブロック要素化で対応してください。
空白をうまく調整すれば、きれいにハマるはずです。

HTMLとCSSですので、開発者ツールを活用して調整ですね。