vanilla-extractでレスポンシブデザインを実装する

はじめに

最近、vanilla-extractを用いて開発を始めたので、その際に学んだレスポンシブな実装方法を残します。
本記事は、メディアクエリを設定し、画面サイズに応じてスタイルを変更する方法について取り扱っています。

環境

Next.js: v14.2.3
@vanilla-extract/css: v1.16.0

実装

実装例として、画面の横幅によってフォントサイズとカラーが変化するコンポーネントを作成します。

コンポーネント作成

まず、「サンプル」という文字列を表示するだけの最低限のコンポーネントを用意します。
このコンポーネントは、画面幅に応じてテキストの色とフォントサイズが変化します。

// Responsive.tsx
import React from 'react';
import { styles } from './Responsive.css';

export function Responsive() {
  return <p className={styles.text}>サンプル</p>;
}

Responsive.css.tsファイルの作成

続いて、Responsive.css.tsファイルの作成です（ファイル名は任意）。
下記実装のように、@mediaキーをスタイル定義内に記述することによって、メディアクエリを用いたレスポンシブデザインが可能になります。

// Responsive.css.ts
import { style } from '@vanilla-extract/css';

export const styles = {
  text: style({
    color: '#333',
    fontSize: 12,
    padding: 8,
    '@media': {
      // 画面幅が375px以上の場合
      'screen and (min-width: 374.98px)': {
        color: 'red',
        fontSize: 16,
      },
      // 画面幅が750px以上の場合
      'screen and (min-width: 749.98px)': {
        color: 'blue',
        fontSize: 20,
      },
    },
  }),
};

動作確認

上記内容を実装した後、実際に画面サイズを変更して、以下の動作を確認してみてください：

• 画面幅が375px以上になると、テキストの色が赤に、フォントサイズが16pxに変化する
• さらに画面幅が750px以上になると、テキストの色が青に、フォントサイズが20pxに変化する

参考文献