先生と生徒の会話形式で理解しよう

生徒

「Reactで文字の色とかサイズを変えたりってできますか？」

先生

「はい、Reactではstyle属性やclassName属性を使えば、見た目を自由に変えられますよ。」

生徒

「styleとclassNameってどう違うんですか？一緒に使えるんですか？」

先生

「とても良い質問です。それでは、JSXでのstyleとclassNameの使い方をわかりやすく解説していきましょう！」

1. React（JSX）でstyleを使って見た目を変える

ReactではHTMLのように見えるコードを書くことができますが、実は裏側ではJavaScriptで動いています。このHTMLのような記述をJSX（ジェイエスエックス）と呼びます。

通常のHTMLでは、見た目を変えるためにstyle="color:red;"のように書きますが、ReactのJSXでは少し書き方が違います。

JSXでstyleを指定する場合は、JavaScriptのオブジェクト形式で書きます。オブジェクトとは、{ }の中にキーと値のセットを書いたものです。

また、CSSではfont-sizeと書きますが、JSXではfontSizeのようにキャメルケース（単語の区切りを大文字にする）で書きます。

2. ReactでclassNameを使ってCSSクラスを指定する

Reactでは、classではなくclassNameという属性を使います。これは、classという単語がJavaScriptの予約語（特別な意味を持つ言葉）だからです。

HTMLやCSSを勉強したことがある人なら、class="box"のように書いた経験があるかもしれませんが、Reactでは次のように書きます。


<div className="box">こんにちは</div>

このように書くと、外部のCSSファイルで.boxというクラスに定義したスタイルが適用されます。

3. JSXでstyleとclassNameを組み合わせて使う

では、Reactでstyle属性とclassName属性を同時に使うことはできるのでしょうか？答えはできます！

例えば、クラスで基本のデザインを整えておいて、一部だけインラインで色などを変更したい場合には以下のように書きます。


<div className="box" style={{ color: "blue", fontSize: "20px" }}>
  カスタムスタイルとクラスの組み合わせ
</div>

このコードでは、boxというCSSクラスが適用されながら、さらに文字色とサイズがJSX内で直接指定されています。

（画面に「カスタムスタイルとクラスの組み合わせ」と青い大きな文字で表示されます）

4. 実際にReactで書いてみよう！styleとclassNameの実践コード

ここでは、ReactのuseStateを使って、ボタンを押すと文字の色を変える例を紹介します。


import React, { useState } from "react";
import "./App.css"; // CSSファイルを読み込む

function App() {
  const [isRed, setIsRed] = useState(false);

  const textStyle = {
    color: isRed ? "red" : "black",
    fontWeight: "bold"
  };

  return (
    <div className="container" style={{ padding: "20px" }}>
      <p className="text-box" style={textStyle}>
        色が変わるテキスト
      </p>
      <button onClick={() => setIsRed(!isRed)}>色を切り替える</button>
    </div>
  );
}

export default App;

（画面に「色が変わるテキスト」と表示され、ボタンを押すたびに文字の色が黒と赤で切り替わります）

5. クラス名とstyle属性をうまく使い分けよう

Reactでは、classNameで共通のスタイルを作っておき、styleで動的に変化する部分を記述すると、コードが見やすくなります。

たとえば、ボタンの背景色や文字サイズなどはCSSクラスで管理して、状況によって変える色だけをJSXで管理するのがオススメです。

これは、チーム開発や後からスタイルを修正するときにも便利ですし、CSSファイルにまとめておくことで再利用もできます。

6. styleの書き方の注意点（単位やハイフン）

Reactのstyleでは、数値に単位が必要な場合は文字列で書きます。例えばfontSize: "20px"のようにpxをつけます。

また、CSSで使うbackground-colorのようなハイフン区切りは使えません。ReactではbackgroundColorのようにキャメルケースで書く必要があります。

これはReactがJavaScriptの中でスタイルを扱うためのルールです。最初は慣れないかもしれませんが、使っているうちに自然と覚えられます。

7. 外部CSSファイルと組み合わせるともっと便利に

style属性は便利ですが、全てをJSXで書くと見づらくなることがあります。特にスタイルが複雑になると、コードがゴチャゴチャしてしまいます。

そんなときは、外部のCSSファイル（たとえばApp.css）を使って、共通のスタイルはclassNameで適用し、動的に変えたい部分だけをstyleで指定すると良いでしょう。

ReactではCSSとJSXをうまく使い分けることで、よりスッキリとしたコードが書けるようになります。

まとめ

ReactのstyleとclassNameの使い方を振り返ると、まずJSXでスタイルを記述する方法として「オブジェクト形式のstyle」と「CSSクラスを指定するclassName」という二つのアプローチがあることが理解できます。どちらも見た目を整えるために重要な役割を果たしますが、それぞれに得意な場面があり、適切に使い分けることが大切です。とくにReact初心者がつまずきやすいポイントとして、JSXでは通常のHTMLと異なり、style属性がJavaScriptのオブジェクトであるという点があります。色やサイズを指定するときにも、キャメルケースや文字列の形式で値を書く必要があり、慣れるまでは戸惑うかもしれませんが、実際に手を動かしながら覚えることで自然に書けるようになります。また、classNameを使うことでCSSファイルに記述したスタイルを再利用でき、コードの可読性も向上します。特に規模が大きくなるほどclassNameを中心にデザインを構築し、JSX内では動的に変化する部分だけをstyleで調整するという方法が効果的です。静的なスタイルはCSS、動的な部分はJSXのstyleという分担により、見た目の管理が明確になり、後からの修正もしやすくなります。アプリケーションの状態に応じて色や大きさを変えたい場合にはuseStateとstyleを組み合わせた記述が役立ち、実際の操作に反応してデザインが変わる仕組みを作ることで、よりインタラクティブで魅力的な画面を実現できます。さらに、styleとclassNameを併用することで、既存デザインを保持しつつ部分的な変更も柔軟に加えられるため、細かい見た目の調整において非常に便利です。Web制作では日常的に必要になる考え方でもあり、Reactの基礎として身につけておくと、その後のコンポーネント開発やUI設計にも大きく役立ちます。今回の内容では、基本的な書き方から、動的スタイル、CSSファイルとの組み合わせまで幅広く触れることで、Reactでスタイルを扱う具体的なイメージがつかみやすくなりました。スタイル操作ができるようになることで、ユーザーにとって見やすく、分かりやすい画面構成を作れるため、フロントエンド開発の基礎として理解しておきたい重要な知識です。ここまで学んだ内容を踏まえて、Reactでのデザイン表現をさらに広げる土台として活用していきましょう。

実際のJSXスタイル記述サンプル

まとめとして、styleとclassNameを併用したサンプルコードを再掲します。


function Sample() {
  const styleBox = { color: "green", fontSize: "24px" };
  return (
    <div className="sample-box" style={styleBox}>
      サンプルのスタイル適用
    </div>
  );
}

このサンプルでは、classNameで共通スタイルを適用しながら、色やサイズといった動的に変更したい部分をstyle属性で指定しています。Reactの画面構成では、このように複数の方法を組み合わせることで柔軟な UI 表現が可能になります。classNameによる外部CSSの利用と、styleによるインライン調整を使い分けることで、アプリ全体の見た目を整えつつ変更にも強い構造を作ることができます。

先生と生徒の振り返り会話

生徒

「styleはオブジェクトで書くっていうのが最初は難しく感じました。でも実際に書いてみると分かりやすくなってきました！」

先生

「慣れるまでは少し戸惑うけれど、Reactではとてもよく使う書き方なので自然と書けるようになりますよ。」

生徒

「classNameとstyleを一緒に使えるって知らなかったです。場面によって使い分けられるのは便利ですね。」

先生

「そうなんです。共通部分はCSS、変更される部分はstyleというように分けると、開発がとてもスムーズになります。」

生徒

「これでReactで見た目を自由に調整できそうです！」