Chakra UIでマークアップを作る手法
こんにちは、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',
...
図形を回転させる
<Icon
boxSize="24px"
ml={{ lg: '12' }}
mt={{ base: '8', lg: '0' }}
transform={{ base: 'rotate(90deg)', lg: 'none' }}
/>
↓↓↓
これは、PC用の表示では要素が横並びだが、スマホの時は縦並びにしたいケースで役立ちます。
transform
にrotate(90deg)
を指定すると右回りに90°回転します。
他の回転パターンは以下です。
transform: rotate(-0.25turn)
: 左回りに90°回転
transform: rotate(3.142rad)
: 180°回転(逆さま)
要素を線で囲う
<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つ指定することで以下のような形にできます。
画像の大きさをレスポンシブに設定する
画像の大きさをwidth
やheight
の固定値で設定すると画像が伸縮しません。
今回はアスペクト比を保持する必要があるので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 }}>
まとめ
Chakra UIに触れてみて、タグに直接CSSを記述できるのでclass名を考えなくて良い点が大きなメリットだと感じました。
今回はChakra UIのマークアップで役立つ手法を簡単に紹介しました。
その都度調べて実装することが多いですが、「このユースケースではこのスタイルを適用する」がすぐに分かるようになりたいと思います。
スペースを簡単に貸し借りできるサービス「スペースマーケット」のエンジニアによる公式ブログです。 弊社採用技術スタックはこちら -> whatweuse.dev/company/spacemarket
Discussion