className による CSS 適用

React では、HTML 要素に className 属性を指定して CSS を適用します。class ではなく className を使う点がポイントです（JSX構文上の仕様）。

1. 基本の使い方

const MyComponent = () => {
  return <div className="box">ボックスです</div>;
};

/* style.css などに定義 */
.box {
  padding: 16px;
  background-color: lightblue;
  border: 1px solid #999;
}

2. CSS ファイルを読み込む

通常は CSS をインポートして使います：

import './style.css'; // 同じ階層にあるCSSファイル

3. 条件付きで className を切り替える

const isActive = true;

return (
  <div className={isActive ? 'active' : 'inactive'}>
    状態に応じてクラスが切り替わります
  </div>
);

複数クラスの動的制御には clsx や classnames ライブラリの使用も便利です。

4. Tailwind CSS や CSS Modules の場合

• Tailwind: className="text-xl text-blue-500" のようにユーティリティクラスを直接記述
• CSS Modules: import styles from './style.module.css' → <div className={styles.box}>

注意点

• JSX では className と記述する（HTML の class ではない）
• クラス名の衝突がある場合は BEM や CSS Modules を活用する