勉強しないとな~blog

ちゃんと勉強せねば…な電気設計エンジニアです。

<備忘録>HTMLで折り畳みコンテンツ

折り畳みコンテンツの作り方、何回か使って、以前のブログ記事にも載せたが、記事の中に埋もれてしまって、少し探してしまったので、今後すぐ参照できるように。

書き方

<details>
<summary>
クリックで開く/閉じる
</summary>

コンテンツ

</details>

detailsとsummaryどっちが外側だったか、内側だったか、すぐ忘れてしまう。

HTML5から登場したもののよう。
IEでは対応していないらしい。

detailsとsummaryタグでアコーディオンを作る - HTMLリファレンス

とりあえずはてなブログMarkdownモードで書いてる限りは、これで動いてる。

使用例

以前のYOLO物体認識結果のログ(結構長い)で。

クリックで開く/閉じる

(yolov5) PS C:\work\yolo_test\yolov5> python detect.py --source rtsp://USER:PASSWORD@192.168.1.29 --view-img                    
detect: weights=yolov5s.pt, source=rtsp://USER:PASSWORD@192.168.1.29, data=data\coco128.yaml, imgsz=[640, 640], conf_thres=0.25, iou_thres=0.45, max_det=1000, device=, view_img=True, save_txt=False, save_conf=False, save_crop=False, nosave=False, classes=None, agnostic_nms=False, augment=False, visualize=False, update=False, project=runs\detect, name=exp, exist_ok=False, line_thickness=3, hide_labels=False, hide_conf=False, half=False, dnn=False, vid_stride=1
YOLOv5  v7.0-210-gdd10481 Python-3.11.4 torch-2.0.1+cpu CPU

Fusing layers... 
YOLOv5s summary: 213 layers, 7225885 parameters, 0 gradients
1/1: rtsp://USER:PASSWORD@192.168.1.29...  Success (inf frames 2304x1296 at 25.00 FPS)

0: 384x640 1 person, 126.9ms
0: 384x640 1 person, 145.1ms
0: 384x640 1 person, 136.3ms
0: 384x640 1 person, 126.6ms
0: 384x640 1 person, 131.3ms
0: 384x640 1 person, 121.4ms
0: 384x640 1 person, 102.3ms
0: 384x640 1 person, 104.9ms
0: 384x640 1 person, 100.0ms
0: 384x640 1 person, 107.8ms
0: 384x640 1 person, 103.2ms
0: 384x640 1 person, 101.0ms
0: 384x640 1 person, 101.4ms
0: 384x640 1 person, 107.9ms
0: 384x640 1 person, 103.0ms
0: 384x640 1 person, 104.0ms
0: 384x640 1 person, 99.9ms
0: 384x640 1 person, 102.0ms
0: 384x640 1 person, 101.4ms
0: 384x640 1 person, 100.0ms
0: 384x640 1 person, 95.4ms
0: 384x640 1 person, 116.2ms
0: 384x640 2 persons, 102.4ms
0: 384x640 1 person, 102.6ms
0: 384x640 1 person, 102.0ms
0: 384x640 1 person, 98.7ms
0: 384x640 1 person, 91.6ms
0: 384x640 1 person, 105.3ms
0: 384x640 1 person, 115.2ms
0: 384x640 1 person, 1 remote, 102.4ms
0: 384x640 1 person, 101.7ms
0: 384x640 1 person, 98.9ms
0: 384x640 1 person, 1 bench, 1 toothbrush, 101.4ms
0: 384x640 1 person, 100.8ms
0: 384x640 1 person, 1 bench, 1 toothbrush, 100.7ms
0: 384x640 1 person, 116.4ms
0: 384x640 1 person, 108.4ms
0: 384x640 1 person, 1 book, 114.5ms
0: 384x640 1 person, 2 books, 106.1ms
0: 384x640 1 person, 1 bottle, 105.4ms
0: 384x640 1 person, 115.0ms
0: 384x640 1 person, 104.8ms
0: 384x640 1 person, 105.3ms
0: 384x640 1 person, 100.5ms
0: 384x640 1 person, 104.2ms
0: 384x640 1 person, 101.4ms
0: 384x640 2 persons, 107.2ms
0: 384x640 1 person, 98.9ms
0: 384x640 2 persons, 119.1ms
0: 384x640 2 persons, 106.0ms
0: 384x640 1 person, 97.7ms
0: 384x640 1 person, 103.6ms
0: 384x640 1 person, 107.9ms
0: 384x640 2 persons, 98.3ms
0: 384x640 1 person, 108.5ms
0: 384x640 2 persons, 112.8ms
0: 384x640 2 persons, 120.2ms
0: 384x640 2 persons, 103.5ms
0: 384x640 2 persons, 102.5ms
0: 384x640 3 persons, 101.0ms
0: 384x640 3 persons, 102.6ms
0: 384x640 2 persons, 102.7ms
0: 384x640 3 persons, 1 bed, 115.9ms
0: 384x640 2 persons, 97.8ms
0: 384x640 2 persons, 1 bed, 102.7ms
0: 384x640 2 persons, 1 bed, 103.1ms
0: 384x640 3 persons, 1 bed, 102.3ms
0: 384x640 2 persons, 1 bed, 101.0ms
0: 384x640 2 persons, 1 bed, 102.9ms
0: 384x640 3 persons, 1 bed, 118.3ms
0: 384x640 1 person, 1 bed, 106.1ms
0: 384x640 3 persons, 103.9ms
0: 384x640 2 persons, 1 bed, 106.1ms
0: 384x640 3 persons, 112.8ms
0: 384x640 3 persons, 1 bed, 121.9ms
0: 384x640 2 persons, 115.7ms
0: 384x640 2 persons, 101.9ms
0: 384x640 2 persons, 108.7ms
0: 384x640 2 persons, 101.0ms
0: 384x640 2 persons, 1 bed, 104.7ms
0: 384x640 2 persons, 1 bed, 95.3ms
0: 384x640 1 person, 1 bed, 100.7ms
0: 384x640 1 person, 118.1ms
0: 384x640 1 person, 100.8ms
0: 384x640 1 person, 112.8ms
0: 384x640 1 person, 102.5ms
0: 384x640 1 person, 101.9ms
0: 384x640 1 person, 95.2ms
0: 384x640 2 persons, 105.7ms
0: 384x640 1 person, 122.1ms
0: 384x640 1 person, 101.0ms
0: 384x640 1 person, 100.7ms
0: 384x640 1 person, 112.0ms
0: 384x640 3 persons, 111.3ms
0: 384x640 2 persons, 104.9ms
0: 384x640 1 person, 106.8ms
0: 384x640 1 person, 102.2ms
0: 384x640 1 person, 108.7ms
0: 384x640 1 person, 104.7ms
0: 384x640 1 person, 90.2ms
0: 384x640 1 person, 98.1ms
0: 384x640 1 person, 103.5ms
0: 384x640 1 person, 104.1ms
0: 384x640 1 person, 108.6ms
0: 384x640 1 person, 113.7ms
0: 384x640 1 person, 105.1ms
0: 384x640 1 person, 103.0ms
0: 384x640 2 persons, 105.8ms
0: 384x640 2 persons, 101.6ms
0: 384x640 2 persons, 102.7ms
0: 384x640 2 persons, 119.5ms
0: 384x640 1 person, 102.8ms
0: 384x640 2 persons, 1 toothbrush, 101.2ms
0: 384x640 1 person, 107.1ms
0: 384x640 1 person, 113.5ms
0: 384x640 1 person, 105.8ms
0: 384x640 1 person, 1 cup, 104.2ms
0: 384x640 2 persons, 1 chair, 108.7ms
0: 384x640 2 persons, 104.5ms
0: 384x640 2 persons, 101.2ms
0: 384x640 1 bed, 105.6ms
0: 384x640 1 person, 1 bed, 102.9ms
0: 384x640 (no detections), 105.3ms
0: 384x640 (no detections), 115.1ms
0: 384x640 (no detections), 103.6ms
0: 384x640 (no detections), 107.4ms
0: 384x640 (no detections), 103.4ms
0: 384x640 (no detections), 101.3ms
0: 384x640 (no detections), 101.9ms
0: 384x640 (no detections), 101.8ms
0: 384x640 (no detections), 117.4ms
0: 384x640 (no detections), 106.6ms
0: 384x640 (no detections), 102.9ms
0: 384x640 (no detections), 102.0ms
0: 384x640 (no detections), 103.6ms
0: 384x640 (no detections), 102.8ms
0: 384x640 (no detections), 101.9ms
0: 384x640 (no detections), 115.6ms
0: 384x640 (no detections), 99.5ms
0: 384x640 (no detections), 98.7ms
0: 384x640 (no detections), 101.1ms
0: 384x640 (no detections), 103.8ms
0: 384x640 (no detections), 111.2ms
0: 384x640 (no detections), 109.7ms
0: 384x640 (no detections), 113.8ms
0: 384x640 (no detections), 104.3ms
0: 384x640 (no detections), 96.0ms
0: 384x640 (no detections), 109.0ms
0: 384x640 (no detections), 104.3ms
0: 384x640 (no detections), 102.8ms
0: 384x640 (no detections), 101.9ms
0: 384x640 (no detections), 114.4ms
0: 384x640 (no detections), 91.6ms
0: 384x640 (no detections), 104.1ms
0: 384x640 1 person, 102.2ms
0: 384x640 2 persons, 99.6ms
0: 384x640 2 persons, 1 teddy bear, 105.9ms
0: 384x640 2 persons, 1 teddy bear, 103.6ms
0: 384x640 2 persons, 1 teddy bear, 113.6ms
0: 384x640 2 persons, 102.0ms
0: 384x640 3 persons, 102.0ms
0: 384x640 2 persons, 103.1ms
0: 384x640 2 persons, 101.5ms
0: 384x640 2 persons, 1 bed, 102.6ms
0: 384x640 2 persons, 1 bed, 99.7ms
0: 384x640 2 persons, 1 bed, 89.5ms
0: 384x640 2 persons, 1 bed, 102.3ms
0: 384x640 2 persons, 1 bed, 106.4ms
0: 384x640 2 persons, 1 bed, 106.6ms
0: 384x640 2 persons, 1 bed, 102.5ms
0: 384x640 2 persons, 1 bed, 141.0ms
0: 384x640 2 persons, 1 bed, 128.0ms
0: 384x640 2 persons, 1 bed, 117.4ms
0: 384x640 2 persons, 1 bed, 125.5ms
0: 384x640 2 persons, 109.8ms
0: 384x640 2 persons, 109.2ms
0: 384x640 2 persons, 109.7ms
0: 384x640 2 persons, 1 bed, 109.7ms
0: 384x640 2 persons, 126.8ms
0: 384x640 2 persons, 1 bed, 93.9ms
0: 384x640 2 persons, 1 bed, 112.3ms
0: 384x640 2 persons, 93.9ms
0: 384x640 2 persons, 113.8ms
0: 384x640 1 person, 110.0ms
0: 384x640 1 person, 109.8ms
0: 384x640 2 persons, 94.0ms
0: 384x640 2 persons, 109.2ms
0: 384x640 1 person, 125.4ms
0: 384x640 1 person, 125.5ms
0: 384x640 2 persons, 1 hot dog, 111.1ms
0: 384x640 2 persons, 109.8ms
0: 384x640 2 persons, 115.0ms
0: 384x640 2 persons, 109.8ms
0: 384x640 2 persons, 108.2ms
0: 384x640 1 bed, 109.8ms
0: 384x640 2 persons, 110.4ms
0: 384x640 1 person, 125.5ms
0: 384x640 2 persons, 110.9ms
0: 384x640 2 persons, 111.1ms
0: 384x640 1 person, 109.8ms
0: 384x640 2 persons, 114.4ms
0: 384x640 2 persons, 1 remote, 110.6ms
0: 384x640 2 persons, 125.6ms
0: 384x640 2 persons, 108.1ms
0: 384x640 2 persons, 140.1ms
0: 384x640 2 persons, 1 donut, 149.0ms
0: 384x640 2 persons, 1 donut, 142.2ms
0: 384x640 3 persons, 1 donut, 125.4ms
0: 384x640 1 person, 120.4ms
0: 384x640 3 persons, 140.5ms
0: 384x640 3 persons, 125.8ms
0: 384x640 3 persons, 1 donut, 125.2ms

...

その他参考にしたサイト

はてなブログを使ってて気づいた事 - Aikの技術日記

details: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN