動画を並べて表示する記法
inspired by
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| :where(.iframe-video-player iframe, video.video) { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| :where(.iframe-video-player iframe, video.video) { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| :where(.iframe-video-player iframe, video.video) { margin: .2em }
/* 文字サイズは元のまま */
.line .deco-\|.deco-\* > span{ font-size: 15px; line-height: 15px; font-weight: normal;}
https://www.youtube.com/shorts/9JEK50XwkS4https://www.youtube.com/watch?v=lmr7fOmm8A8
https://www.youtube.com/shorts/9JEK50XwkS4https://www.youtube.com/watch?v=lmr7fOmm8A8https://www.youtube.com/watch?v=lmr7fOmm8A8
https://www.youtube.com/shorts/9JEK50XwkS4https://www.youtube.com/watch?v=lmr7fOmm8A8https://www.youtube.com/watch?v=lmr7fOmm8A8https://www.youtube.com/watch?v=lmr7fOmm8A8
https://scrapbox.io/files/646b24e27861c6001b8d50f8.mp4https://scrapbox.io/files/646b24e27861c6001b8d50f8.mp4
https://scrapbox.io/files/646b24e27861c6001b8d50f8.mp4https://scrapbox.io/files/646b24e27861c6001b8d50f8.mp4https://scrapbox.io/files/646b24e27861c6001b8d50f8.mp4
https://www.youtube.com/shorts/9JEK50XwkS4https://www.youtube.com/watch?v=lmr7fOmm8A8https://www.youtube.com/watch?v=lmr7fOmm8A8