[React.js] - パート3-6: Reactのスタイリング
Ace Lennox
Reactでは、コンポーネントにスタイルを適用する方法がいくつかあります。このガイドでは、以下の3つの一般的な方法について説明します:
インラインスタイリング
CSSスタイルシート
CSSモジュール
1. インラインスタイリング
基本的な使い方
インラインスタイルは、style属性を使って要素に直接適用します。この属性の値はJavaScriptオブジェクトです。
例: 基本的なインラインスタイリング
const Header = () => {
return (
<>
<h1 style={{ color: "blue" }}>Reactのスタイリングへようこそ！</h1>
<p>これはインラインCSSを使用した例です。</p>
</>
);
};
注意点
二重の波括弧を使用: 外側の波括弧はJSXのため、内側はJavaScriptオブジェクトのために必要です。
camelCaseを使用: CSSの
background-colorはbackgroundColorのように書き換えます。
例: camelCase構文の使用
const Header = () => {
return (
<>
<h1 style={{ backgroundColor: "lightgreen" }}>Reactのスタイリング例</h1>
<p>背景色はcamelCaseで指定されています。</p>
</>
);
};
例: スタイルオブジェクトの使用
スタイルをJavaScriptオブジェクトとして別に定義し、読みやすく管理することができます。
const Header = () => {
const headerStyle = {
color: "white",
backgroundColor: "teal",
padding: "15px",
fontFamily: "Arial"
};
return (
<>
<h1 style={headerStyle}>スタイルオブジェクトを使用したスタイリング</h1>
<p>複雑なスタイルを管理するのに便利です。</p>
</>
);
};
2. CSSスタイルシート
使い方
CSSスタイルを.css拡張子のファイルに記述し、Reactアプリケーションにインポートします。
例: スタイルシートの作成
App.css:
body {
background-color: #282c34;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 2.5em;
}
p {
font-size: 1.2em;
}
例: スタイルシートのインポート
コンポーネントやエントリーファイルにCSSファイルをインポートします:
import './App.css';
const Header = () => {
return (
<>
<h1>CSSスタイルでのデザイン</h1>
<p>外部CSSファイルでスタイリングされています。</p>
</>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Header />);
3. CSSモジュール
CSSモジュールとは？
CSSモジュールを使用すると、スタイルをスコープ化して、インポートしたコンポーネントだけに適用されるようにできます。これにより、名前の衝突を防ぎ、モジュール設計を促進します。
例: CSSモジュールの作成
header.module.css:
.title {
color: darkblue;
font-size: 2.5em;
padding: 20px;
text-align: center;
}
例: CSSモジュールのインポート
Header.js:
import styles from './header.module.css';
const Header = () => {
return <h1 className={styles.title}>CSSモジュールでのスタイリング</h1>;
};
export default Header;
例: コンポーネントのインポートと使用
index.js:
import ReactDOM from "react-dom/client";
import Header from "./Header";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Header />);
方法ごとの比較
1. インラインスタイリング
メリット: 動的なスタイルの適用が簡単で、すぐに設定可能。
デメリット: 複雑なスタイルの場合、コードが読みにくくなり管理が困難。
2. CSSスタイルシート
メリット: スタイルをファイルで分離でき、グローバルなスタイルを一元管理可能。
デメリット: スタイルがグローバルに適用されるため、他のスタイルと競合する可能性あり。
3. CSSモジュール
メリット: スタイルがスコープ化され、他のコンポーネントとのスタイル競合を防げる。
デメリット: 各コンポーネントごとにセットアップが必要で、少し手間がかかる。
まとめ
Reactでは、コンポーネントのスタイリング方法を柔軟に選択できます。
動的で小規模なスタイルにはインラインスタイリングを使用します。
グローバルなスタイルにはCSSスタイルシートを使用します。
大規模プロジェクトではCSSモジュールを使用してスコープ化されたスタイルを管理します。
これらの方法を試して、Reactアプリケーションを美しくスタイリングしてみてください！
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。