Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

アットルール

CSSのアットルールは、CSSの動作を既定するものです。

Yamada UIでは、特によく使われる@media, @containerと@keyframesの3つをサポートしています。

@media

@media`は、メディアクエリを使用して、特定のメディアタイプ（スクリーン、プリントなど）や条件（画面幅、解像度など）に基づいてスタイルを適用するために使用されます。これにより、異なるデバイスやビューポートサイズに対応したレスポンシブなデザインを実現することができます。

例えば、@mediaのメディア種別のprintを使い、印刷プレビューモードで表示されるスタイルを変更する場合は、typeに"print"を設定します。

編集可能な例

<Center
  p="md"
  rounded="md"
  borderWidth="1px"
  boxSize="3xs"
  _media={[{ type: "print", css: { color: "primary" } }]}
>
  Print me
</Center>
Copied!

上記のコードは、次のようなCSSが生成されます。

.Center {
  /* ... */


  @media print {
    color: var(--ui-colors-primary);
  }
}
Copied!

複数のクエリを使う

複数のクエリを使う場合は、配列内に複数の値を設定します。

編集可能な例

<Box
  w="full"
  p="md"
  bg="primary"
  _media={[
    { maxW: "1440px", css: { bg: "secondary" } },
    { minW: "481px", maxW: "1280px", css: { bg: "warning" } },
    { maxW: "480px", css: { bg: "danger" } },
  ]}
  color="white"
>
  This is Box
</Box>
Copied!

上記のコードは、次のようなCSSが生成されます。

.Box {
  /* ... */


  background: var(--ui-colors-primary);


  @media (max-width: 1440px) {
    background: var(--ui-colors-secondary);
  }


  @media (min-width: 481px) and (max-width: 1280px) {
    background: var(--ui-colors-warning);
  }


  @media (max-width: 480px) {
    background: var(--ui-colors-danger);
  }
}
Copied!

任意のクエリを使う

任意のクエリを使う場合は、queryに文字列を設定します。

編集可能な例

<Box
  w="full"
  p="md"
  bg="primary"
  _media={[
    {
      query: "(min-width: 977px) and (max-width: 1440px)",
      css: { bg: "secondary" },
    },
  ]}
  color="white"
>
  This is Box
</Box>
Copied!

@container

@containerは、コンテナクエリを使用して、特定のコンテナのサイズや条件に基づいてスタイルを適用するために使用されます。これにより、コンテンツが配置されているコンテナのサイズに応じてスタイルを調整することができます。

編集可能な例

<Center
  containerType="inline-size"
  p="md"
  rounded="md"
  borderWidth="1px"
  resize="horizontal"
  overflow="auto"
  boxSize="3xs"
>
  <Text
    _container={[{ minW: "320px", maxW: "560px", css: { color: "primary" } }]}
  >
    Resize me
  </Text>
</Center>
Copied!

上記のコードは、次のようなCSSが生成されます。

.Center {
  container-type: inline-size;
  /* ... */


  @container (min-width: 320px) and (max-width: 560px) {
    color: var(--ui-colors-primary);
  }
}
Copied!

コンテナ名を指定する

編集可能な例

<Center
  containerName="parent"
  containerType="size"
  p="md"
  rounded="md"
  borderWidth="1px"
  resize="both"
  overflow="auto"
  boxSize="xs"
>
  <Center
    containerName="child"
    containerType="size"
    p="md"
    rounded="md"
    borderWidth="1px"
    resize="both"
    overflow="auto"
    boxSize="3xs"
  >
    <Text
      _container={[
        { name: "parent", orientation: "portrait", css: { color: "primary" } },
        { name: "child", orientation: "landscape", css: { color: "danger" } },
      ]}
    >
      Resize me
    </Text>
  </Center>
</Center>
Copied!

上記のコードは、次のようなCSSが生成されます。

.Center1 {
  container-name: parent;
  container-type: size;
  /* ... */
}


.Center2 {
  container-name: child;
  container-type: size;
  /* ... */


  @container parent (orientation: portrait) {
    color: var(--ui-colors-primary);
  }


  @container child (orientation: landscape) {
    color: var(--ui-colors-danger);
  }
}
Copied!

@keyframes

@keyframesは、アニメーションの中間状態を定義するために使用されます。アニメーションは、指定された時間内に一連のスタイルの変更を実行します。

アニメーションは、別セクションにドキュメントがあります。詳しくは、アニメーションをご覧ください。

他のアットルール

他のアットルールを使う場合は、Style propsのsxまたはcssで定義します。

編集可能な例

<Box
  w="full"
  p="md"
  bg="primary"
  sx={{
    "@<identifier> (RULE)": {
      // Define the style you want to customize.
    },
  }}
>
  This is Box
</Center>
Copied!

GitHubでこのページを編集する

前CSS値関数次アニメーション