画像を並べて表示 - Scrapboxとあそぶ

画像を並べて表示

↑この要望、「UserCSSでできそう」ってことなので挑戦してみたよ！

写真はぱくたそからお借りしました→ https://www.pakutaso.com/

基本の記法は|（パイプ、縦線）で、[| ここに画像URLを並べる] こんな感じに書けます。

太字記法のアスタリスクの数で列数を変えられるようにしてみた。

一行に敷き詰め [| [画像URL][画像URL][画像URL]…]

https://gyazo.com/33c30d9cb76b2cef618d1242d4b894b7https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6https://gyazo.com/5c767870e917de6533258b5222d90a3dhttps://gyazo.com/5b016b77e239ffcbc2b283421c56504d

https://gyazo.com/33c30d9cb76b2cef618d1242d4b894b7https://gyazo.com/cbaae6f24a3a87b8fe02ae0bbdd08ae6

横幅いっぱい1列並べ [*| [画像URL][画像URL][画像URL]…]

3列並べ [***| [画像URL][画像URL][画像URL]…]

5列並べ [*****| [画像URL][画像URL][画像URL]…]

ちなみに文字を囲むとこうなる😏

※この行、プレゼンモードで見ると文字化けしちゃう模様💀 2017-11-25

もう直ってた……だと……？ 2017-11-26

CSSはこんな感じ。flex系のスタイルあんまし使ったことないから勉強になった！

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line class^="level" .deco-\| { flex-wrap: wrap }

.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-\| img.image { object-fit: cover; width: 100%; height: 100% }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }

.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }

#記法とあそぶ #拡張装飾記法

初出 2017-11-25

2018-08-04 表示が不正になってたの修正しました！いつからだったのか不明！ごめんね！