マトリクス記法 - Nrem / Configs

マトリクス記法

UserCSS.icon

画像や文字のサイズを変更し、均等割付にする記法

垂直分割列数を指定する /scrasobox 系統とは仕様を逆にして、水平分割行数を指定するように変更したもの

もし決まった範囲内にブロック要素を収めたいのであれば、列数ではなく行数の方を指定する必要がある

書式：[| Content]

例：Content

code:style.css

パフォーマンス面に無視できない影響がある

code:disabled

.line.cursor-line .deco-\| { display: inline; }

display: inline-flex; box-sizing: fit-content;

& img.image { object-fit: contain; margin: 0 }

}

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

.line .level span.deco-\|:is(class="deco-|", class="deco-| deco-*") { flex-wrap: wrap }

.line .level-1 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/1) }

.line .level-2 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/2) }

.line .level-3 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/3) }

.line .level-4 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/4) }

.line .level-5 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/5) }

.line .level-6 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/6) }

.line .level-7 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/7) }

.line .level-8 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/8) }

.line .level-9 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/9) }

.line .level-10 span.deco-\|class="deco-| deco-*" > span { max-width: calc(100%/10) }

.line .level span.deco-\|:is(class="deco-|", class*="deco-| deco-*") img.image { object-fit: cover; max-width: 100%; max-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 } */