Zenn
Open5

[Scrap] レスポンシブレイアウトのネタ帳

CSS
HTML
Next.js
React
Chakra UI
へぶんへぶん

レスポンシブレイアウトのやり方を書き溜めていく。以下が前提。

  • React / Next.js 使用
  • Chakra UI 使用
Hidden comment
へぶんへぶん

Flex コンテナ内で画像の形に合わせるとき

  • 画像は AspectRatioで囲む
  • その他の要素に alignSelf={'stretch'} を指定する
    • 画像の縦に合わせてエリアが広がる
<Flex w={'100%'}>
  <Box flex={1} alignSelf={'stretch'} bg={'purple.600'}>
    <Center h={'100%'} w={'100%'}>
      Sign Up area
    </Center>
  </Box>
  <AspectRatio flex={2} ratio={3 / 2}>
    <Box h="100%" bg={'yellow.500'} color={'white'}>
      <Center h={'100%'}>eye catch - 01</Center>
    </Box>
  </AspectRatio>
</Flex>
へぶんへぶん

next build で HTML を生成する時は useBreakpointValue は undefined を返すので、
デフォルトの挙動によってはアクセス直後に一瞬画面のレイアウトが崩れる。
( 実際にページを表示すると思った以上に気になった)

https://gist.github.com/HeavenOSK/18bdda3e657f27bd038a23b3659b1daf
Responsive にコンポーネントを差し替えるためのコンポーネントを考えた。

CSS で display 指定してるから初回読み込みの遅延もないし、どのコンポーネントと切り替わるかパッと見わかるから割といい気がする。

以下のように使う。items で指定した Component を breakpoint で display を切り替える div で囲んでる。

import { Center, Heading } from '@chakra-ui/react'
import ResponsiveComponent from '../../components/ResponsiveComponent'

const Home = () => {
  return (
    <Center height={'100vh'} width={'100vw'}>
      <ResponsiveComponent
        items={{
          base: <Heading color={'blue'}> This is base</Heading>,
          sm: <Heading color={'yellow'}>This is sm</Heading>,
          md: <Heading color={'red'}>This is md</Heading>,
          lg: <Heading color={'green'}>This is lg</Heading>,
          xl: <Heading color={'pink'}>This is xl</Heading>,
          '2xl': <Heading color={'black'}>This is 2xl</Heading>,
        }}
      />
    </Center>
  )
}
export default Home

懸念点

  • div 一個増えるけど大丈夫か?
    • 今の所可読性を優先したい気持ち
  • div を刺したくない場合どうするのか? (React.Fragment を使いたいようなケース)
    • 構造を考え直す方向で考えている。これ以上作り込むのは大変そうに思うので諦める。

SSR 対策で公式でこういうの用意してくれたらまあまあ嬉しいかも。