パーツインデックス

u-inline-block

付与されるCSS

.u-inline-block {
  display: inline-block;
}

使用例

u-position-relative

付与されるCSS

.u-position-relative {
  position: relative;
}

使用例

u-absolute-center

付与されるCSS

.u-position-relative {
  position: relative;
}

使用例

u-parent-container

付与されるCSS

.u-absolute-center {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
}

使用例

u-parent-sticky

付与されるCSS

.u-parent-sticky {
  > * {
    position: sticky;
    top: 0;
  }
}

使用例

このクラスを設定した要素が基準となり、子要素をスクロールした際に上部に貼り付く動きを設定します。

u-reverse-box

付与されるCSS

@media screen and (max-width: 781px) {
  .u-reverse-box {
    flex-direction: column-reverse;
  }
}

使用例

カラムの親要素に設定します。通常、PCのときに左側にある要素が、SP(780px以下の幅)のとき上から順番に並びますが、.u-reverse-boxを指定すると、PCのときに右側にある要素が、SPのとき上から順番に並ぶようになります。

u-contents-section

付与されるCSS

.u-contents-section {
  max-width: calc(100% - min(4vw, 24px));
  padding: clamp(24px, 120 / 1920 * 100vw, 120px) 0;
  margin: 0 auto;
  background-color: var(--wp--preset--color--white);
  border-radius: clamp(16px, 24 / 1400 * 100vw, 24px) !important;
}

使用例

要素の背景が角丸・白塗りとなります。