Zenn
🖋️

Chakra UIでマークアップを作る手法

2025/01/27に公開

こんにちは、SpacemarketのWebエンジニアのShotaです。
最近フロントエンドの実装をする機会が増え、今まであまり経験がなかったマークアップの手法を学んだのでユースケースごとにまとめました。

文字の大きさをレスポンシブに設定する

<chakra.h3
  fontSize={{ base: '14px', md: '16px' }}
  fontWeight="bold"
>
  見出し要素
</chakra.h3>

h3要素で見出しを作っています。
今回は base: '14px', md: '16px' としているため、画面幅が768px以上の時は文字の大きさが16pxですが、767px以下では14pxに変化します。
baseがスマホ用でmdがPC用の表示というイメージです。
そのほかsm(~480px), lg(~992px), xl(~1280px)などが設定できます。
また、それぞれのbreakpointはthemeのtsファイルで定義しているので値は変更できます。

export const breakpoints = {
  base: '0px',
  sm: '350px',
  md: '768px',
  lg: '1080px',
  xl: '1440px',
...

https://v2.chakra-ui.com/docs/styled-system/responsive-styles

図形を回転させる

<Icon
  boxSize="24px"
  ml={{ lg: '12' }}
  mt={{ base: '8', lg: '0' }}
  transform={{ base: 'rotate(90deg)', lg: 'none' }}
/>


↓↓↓

これは、PC用の表示では要素が横並びだが、スマホの時は縦並びにしたいケースで役立ちます。
transformrotate(90deg)を指定すると右回りに90°回転します。
他の回転パターンは以下です。
transform: rotate(-0.25turn): 左回りに90°回転
transform: rotate(3.142rad): 180°回転(逆さま)
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/rotate

要素を線で囲う

<chakra.li
  display={{ lg: 'flex' }}
  border="1px solid"
>

borderを指定して要素の境界を枠線で囲うことができます。
borderは要素の外側に作られます。

<chakra.li
  display={{ lg: 'flex' }}
  border="1px solid"
  borderRadius="24px"
  borderColor="E3E6EA"
>

border="1px solid"で1pxの四角形で要素の境界を囲みます。
borderRadius="24px"では指定した半径でborderの角を丸めます。
borderColor="E3E6EA"では線の色を指定しています。
borderRadius="0px 90px"のように2つ指定することで以下のような形にできます。

https://developer.mozilla.org/ja/docs/Web/CSS/border-width

画像の大きさをレスポンシブに設定する

画像の大きさをwidthheightの固定値で設定すると画像が伸縮しません。
今回はアスペクト比を保持する必要があるのでchakraのAspectRatioを使います。
CSSのaspect-ratioでも設定できますが、親要素の横幅分の大きさにおさめるためにimg要素にwidth="100%"を指定する必要があります。

<chakra.img
  width="100%"
  sx={{
    aspectRatio: '3 / 2',
  }}
  src={image}
...
/>

chakraのAspectRatioを使用することで記述量を減らせるため、今回は以下のようにアスペクト比を設定しました。

import { AspectRatio } from "@chakra-ui/react"
...
<AspectRatio ratio={3 / 2}>
<chakra.img
  src={image}
/>
</AspectRatio>

PCの時に227×151の画像がスマホの時に200×133の大きさになります。
今回は共通の比を使っていますが、md, baseを使用してそれぞれに比を設定することも可能です。
<AspectRatio ratio={{ md: 3 / 2, base: 4 / 3 }}>
https://www.chakra-ui.com/docs/components/aspect-ratio

まとめ

Chakra UIに触れてみて、タグに直接CSSを記述できるのでclass名を考えなくて良い点が大きなメリットだと感じました。
今回はChakra UIのマークアップで役立つ手法を簡単に紹介しました。
その都度調べて実装することが多いですが、「このユースケースではこのスタイルを適用する」がすぐに分かるようになりたいと思います。

スペースマーケット Engineer Blog

Discussion

ログインするとコメントできます