Reactでワンランク上のコードを目指す！create-react-appのindex.cssとApp.cssを使いこなすヒント集

2024-06-13

create-react-app における index.css と App.css の違い

index.css は、アプリケーション全体のグローバルなスタイルを定義するために使用されます。つまり、このファイルで定義されたスタイルは、アプリケーション内のすべてのコンポーネントに適用されます。例えば、フォント、色、余白などの基本的なスタイルを定義するのに適しています。

App.css は、App コンポーネントにのみ適用されるスタイルを定義するために使用されます。App コンポーネントは、アプリケーションのルートコンポーネントであり、通常、他のすべてのコンポーネントをラップします。App.css で定義されたスタイルは、App コンポーネントとその子コンポーネントにのみ適用されます。

index.css: アプリケーション全体のグローバルなスタイル
App.css: App コンポーネントとその子コンポーネントにのみ適用されるスタイル

例

index.css で、アプリケーション全体のフォントを Arial に設定する例:

body {
  font-family: Arial, sans-serif;
}

App.css で、App コンポーネントの背景色を青色に設定する例:

.App {
  background-color: blue;
}

推奨事項

一般的に、以下のガイドラインに従って index.css と App.css を使い分けることを推奨します。

アプリケーション全体のグローバルなスタイルは index.css で定義する。
各コンポーネントに固有のスタイルは、そのコンポーネント専用の CSS ファイルで定義する。

このガイドラインに従うことで、コードをより整理し、保守しやすくなります。

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

App.css

.App {
  background-color: blue;
  padding: 20px;
}

import React from 'react';

const App = () => {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
};

export default App;

このコードで何が起こっているか

index.css は、アプリケーション全体のフォントを Arial に設定し、h1 見出しの色を #333 に設定します。
App.css は、App コンポーネントの背景色を青色に設定し、パディングを 20 ピクセルに設定します。
App.js は、App コンポーネントをレンダリングします。このコンポーネントは、h1 見出し "Hello, React!" を含む div 要素をレンダリングします。

結果

このコードを実行すると、青い背景を持つアプリケーションが表示されます。h1 見出しは Arial フォントで表示され、色は #333 になります。

補足

このコードはほんの一例です。実際のアプリケーションでは、より多くの CSS コードが必要になる可能性があります。

create-react-app で CSS を扱うその他の方法

CSS モジュールは、コンポーネントごとに CSS をカプセル化する方法です。これにより、スタイルの競合を回避し、コードをより整理しやすくなります。

CSS モジュールを使用するには、各コンポーネント用の CSS ファイルを作成し、そのファイル名に .module.css という拡張子を付けます。次に、コンポーネント内で import ステートメントを使用して CSS ファイルをインポートし、コンポーネントの要素にクラス名として CSS クラスを使用します。

Button.module.css という名前の CSS ファイルを作成し、ボタンのスタイルを定義します。

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

次に、Button コンポーネントを作成し、Button.module.css から CSS をインポートします。

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    <button className={styles.button}>Click me</button>
  );
};

export default Button;

CSS in JS ライブラリは、JavaScript コード内で CSS を記述する方法を提供します。これにより、スタイルをコンポーネントのロジックとより密接に統合することができます。

人気のある CSS in JS ライブラリには、Styled Components、Emotion、JSS などがあります。

Styled Components を使用して、ボタンのスタイルを定義します。

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

const App = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
};

export default App;