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

Blog Admin
Blog Admin

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

ソースコード

HTMLのみでアコーディオン
detailssummary

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

折り畳みを作ろう

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

パターン 1

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

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

2023年3月21日

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

パターン 2

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

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

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

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

書いてあるHTML-1

<details>
<summary>パターン 1</summary>
<p>クリックすると展開されます。<br>
見出し部分を再びクリックすると閉じます。</p>
<p>ネストできる要素はいろいろです。</p>
<figure class="wp-block-image aligncenter size-thumbnail is-resized"><a href="https://pxa.xsrv.jp/test103/wp-content/uploads/2023/03/IMG_20230321_101137.jpg"><img src="https://pxa.xsrv.jp/test103/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ですので、開発者ツールを活用して調整ですね。

この投稿を書いたのは・・・
Blog Admin

ガジェットが大好きで、ほぼ毎月何かしら調達しております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Admin」をフォローしてみる
ブログ関連
「Blog Admin」をフォローしてみる

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました