TRISITE

class一覧

basic.css

p > .left文中の要素を左寄せし、要素の右と下にvar(--padding)を空けます。
p > .right文中の要素を右寄せし、要素の左と下にvar(--padding)を空けます。
:is(ul, ol).no-stylelist-style: none;と同じ。
.aspect-4-3aspect-ratio: 4 / 3;と同じ。
.aspect-1-1aspect-ratio: 1 / 1;と同じ。
.aspect-16-9aspect-ratio: 16 / 9;と同じ。
.width-limiter要素のmax-widthをvar(--width-limit)にして、左右にvar(--padding)を空けます。要素は左右中央に配置されます。
.text-lefttext-align: left;と同じ。
.text-centertext-align: center;と同じ。
.text-righttext-align: right;と同じ。
.text-justifytext-align: justify;と同じ。(初期値)
.w10p ~ .w100p(10刻み)width: ?%;と同じ。
.w10 ~ .w200(10刻み)、
.w250、.w300
width: ?px;と同じ。
.pc画面幅920.1px以上で表示。
.tb画面幅520.1px ~ 920pxで表示。
.sp画面幅520px以下で表示。

button.css

.button要素をボタンの形状にします。
.button.slidehoverによって背景色がスライドしながら変わるボタンになります。
.button.button-disagree背景がar(--color-disagree-bg)色のボタンになります。
.button.button-cancel背景がar(--color-cancel-bg)色のボタンになります。

form.css

classはありません。

grid.css

Gridは、コンテナクエリを使用してレスポンシブします。.gridを適用した要素の親要素に.containerを適用することで、コンテナクエリを使用できます。

.grid子要素をグリッドアイテムにします。
.grid.grid-column-2 ~ .grid.grid-column-5グリッドアイテムを最大いくつ並べるかを指定できます。
.grid-topグリッドコンテナに指定すると、align-items: start;と同じ。
グリッドアイテムに指定すると、align-self: start;と同じ。
.grid-middleグリッドコンテナに指定すると、align-items: center;と同じ。
グリッドアイテムに指定すると、align-self: center;と同じ。
.grid-bottomグリッドコンテナに指定すると、align-items: end;と同じ。
グリッドアイテムに指定すると、align-self: end;と同じ。
.flex子要素をフレックスアイテムにします。
.flex.flex-leftjustify-content: flex-start;と同じ。
.flex.flex-centerjustify-content: center;と同じ。
.flex.flex-rightjustify-content: flex-end;と同じ。
.flex-topフレックスコンテナに指定すると、align-items: flex-start;と同じ。
フレックスアイテムに指定すると、align-self: start;と同じ。
.flex-middleフレックスコンテナに指定すると、align-items: center;と同じ。
フレックスアイテムに指定すると、align-self: center;と同じ。
.flex-bottomフレックスコンテナに指定すると、align-items: flex-end;と同じ。
フレックスアイテムに指定すると、align-self: end;と同じ。
.flex.flex-nowrapflex-wrap: nowrap;と同じ。
.g1 ~ .g5flex: 1; ~ flex: 5;と同じ。
.order1 ~ .order5order: 1; ~ order: 5;と同じ。
.half-gapgapがvar(--gap)の半分になります。
.no-gapgapが0になります。
.containercontainer-type: inline-size;と同じ。(子要素をコンテナクエリに対応させます。)
.leftfloat: left;と同じ。
.rightfloat: right;と同じ。
.clearclear: both;と同じ。
.clear-tbグリッドコンテナ、フレックスコンテナに使用すると、画面幅920px以下でアイテムを縦並びにします。
.clear-spグリッドコンテナ、フレックスコンテナに使用すると、画面幅520px以下でアイテムを縦並びにします。
.tb-order1 ~ .tb-order5画面幅920px以下でorder: 1; ~ order: 5;と同じ。
.sp-order1 ~ .sp-order5画面幅520px以下でorder: 1; ~ order: 5;と同じ。

nav.css

.main-menu.slide-left.main-menuが左から出入りします。
.main-menu.slide-right.main-menuが右から出入りします。

paging.css

.paging要素をページネーションにします。

table.css

table.freeセル幅が自動のテーブルになります。
table.block画面幅520px以下でテーブル内容が縦並びになります。