ReactでCSSを使用したスタイリングの基本

クラスベースのスタイリング: Reactでは、CSSをクラスベースで適用することが一般的です。まず、スタイルを定義するためのCSSファイルを作成します。その後、Reactコンポーネントのクラス名にスタイルを適用するために、className属性を使用します。例えば、以下のようなコードを考えてみましょう:

// スタイルを定義するCSSファイル (styles.css)
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}
// Reactコンポーネント内でスタイルを適用する
import React from 'react';
import './styles.css';
function Button() {
  return <button className="button">Click me</button>;
}

インラインスタイリング: Reactでは、インラインスタイリングを使用して要素にスタイルを適用することもできます。これは、特定のコンポーネントにのみスタイルを適用する必要がある場合に便利です。以下は例です:

import React from 'react';
function Heading() {
  const headingStyle = {
    fontSize: '24px',
    fontWeight: 'bold',
    color: 'red'
  };
  return <h1 style={headingStyle}>Hello, World!</h1>;
}

CSSモジュール: Reactアプリケーションでは、CSSモジュールを使用することもできます。これにより、コンポーネントごとに固有のスタイルが適用され、スタイルの衝突を回避することができます。以下は使用例です:

// スタイルを定義するCSSモジュール (Button.module.css)
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}
// Reactコンポーネント内でCSSモジュールを使用する
import React from 'react';
import styles from './Button.module.css';
function Button() {
  return <button className={styles.button}>Click me</button>;
}

これらはReactでCSSを使用してスタイリングを行うための基本的な手法です。必要に応じて、CSSフレームワークやライブラリ（例: styled-components）を使用することもできます。Reactの公式ドキュメントやオンラインのチュートリアルも参考にしてみてください。