React CSS Styling

Volardev 編集部 April 28, 2026

ReactをCSSでスタイリングする方法は数多くありますが、本記事ではフロントエンド開発で特によく使われる3つの主要な手法について詳しく解説します。

インラインスタイリング (Inline styling)
CSSスタイルシート (CSS stylesheets)
CSS Modules (CSSモジュール)

1. Inline Styling (インラインスタイリング)

要素に style 属性を直接指定してスタイリングする場合、その値は JavaScriptオブジェクト である必要があります。

1.1 基本的な実装

スタイリング情報をオブジェクトとして挿入する例を見てみましょう。

const Header = () => {
  return (
    <>
      {/* colorをredに指定 */}
      <h1 style={{color: "red"}}>ハロー・スタイル！</h1>
      <p>少しスタイルを追加してみましょう。</p>
    </>
  );
}

注意: JSXでは、JavaScriptの式は波括弧 { } の中に記述します。JavaScriptオブジェクトも波括弧を使用するため、上記の例のように二重の波括弧 {{ }} で囲む形式になります。

1.2 プロパティ名のキャメルケース（camelCase）化

インラインCSSはJavaScriptオブジェクトとして記述するため、background-color のようにハイフンで区切られたプロパティ名は、キャメルケース（camelCase） 構文で記述する必要があります。

実装例:background-color の代わりに backgroundColor を使用します。

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>ハロー・スタイル！</h1>
      <p>背景色を指定しました。</p>
    </>
  );
}

1.3 JavaScriptオブジェクトとしての定義

スタイリング情報を保持するオブジェクトを別途作成し、それを style 属性で参照することも可能です。コードの可読性が向上するため、実務ではこちらが好まれます。

実装例:myStyle という名前のスタイルオブジェクトを作成します。

const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>ハロー・スタイル！</h1>
      <p>オブジェクトを使ってスタイリングしました。</p>
    </>
  );
}

2. CSS Stylesheet (CSSスタイルシート)

CSSのスタイリングを別ファイルに記述することも可能です。ファイルを .css 拡張子で保存し、アプリケーション内でインポートします。

2.1 CSSファイルの作成

「MyStylesheet.css」というファイルを作成し、CSSコードを記述します。

MyStylesheet.css

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

注意: ファイル名は何でも構いませんが、拡張子が .css であることを確認してください。

2.2 スタイルシートのインポート

アプリケーション内で import 文を使用してスタイルシートを読み込みます。

index.js

import { createRoot } from 'react-dom/client';
// スタイルシートをインポート
import './MyStylesheet.css';

const Header = () => {
  return (
    <>
      <h1>ハロー・スタイル！</h1>
      <p>外部ファイルからスタイルを適用しています。</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Reactは、.css 拡張子でインポートされたファイルをCSSスタイルシートとして処理します。

注意: この方法でインポートされたスタイルは、そのコンポーネントがインポートしたとしても、最終的にはグローバルに適用される点に留意してください。

3. CSS Modules

アプリケーションにスタイルを追加するもう一つの非常に便利な方法が CSS Modules です。

CSS Modulesは、コンポーネントを別々のファイルに分けて管理する場合に最適です。モジュール内のCSSはそのコンポーネントに対してのみ有効（スコープ化）されるため、クラス名の衝突を心配する必要がありません。

作成する際は、ファイル拡張子を .module.css にします（例：my-style.module.css）。

3.1 CSSモジュールの作成

「my-style.module.css」という名前でファイルを作成し、スタイルを記述します。

my-style.module.css

.bigred {
  color: Tomato;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

3.2 コンポーネントでの使用

コンポーネント側で、スタイルをオブジェクトとしてインポートします。

index.jsx

import { createRoot } from 'react-dom/client';
// stylesという名前でインポート
import styles from './my-style.module.css'; 

const Car = () => {
  // オブジェクトのプロパティとしてクラスを指定
  return <h1 className={styles.bigred}>ハロー・カー！</h1>;
}

createRoot(document.getElementById('root')).render(
  <Car />
);

CSS Modulesを使用すると、Reactが自動的に一意のクラス名を生成してくれるため、大規模開発におけるスタイルの管理が格段に楽になります。