フロント初心者がNext.jsの勉強がてらにCSSの手法をまとめてみた

Global CSS

グローバルCSSは、アプリケーション全体に適用されるスタイルです。

例（globals.css）:

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

.button {
  background-color: blue;
  color: white;
}

使用例：

tsxCopyimport '../styles/globals.css';

const Button = () => <button className="button">Click me</button>;

特徴：

• 簡単に使用できる
• クラス名の衝突リスクがある

CSS Modules

CSSモジュールは、スコープされたローカルなCSSクラスを提供します。

例（Button.module.css）:

cssCopy.button {
  background-color: blue;
  color: white;
}

使用例：

tsxCopyimport styles from './Button.module.css';

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

特徴：

• クラス名の衝突を防ぐ
• コンポーネントごとにスタイルを分離できる

Tailwind CSS

Tailwindは、ユーティリティファーストのCSSフレームワークです。

例：

tsxCopyconst Button = () => (
  <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
    Click me
  </button>
);

特徴：

• 素早くスタイリングができる
• カスタマイズが容易
• クラス名が長くなる可能性がある

Sass

Sassは、CSSの拡張言語です。

例（Button.scss）:

scssCopy$primary-color: blue;

.button {
  background-color: $primary-color;
  color: white;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

使用例：

tsxCopyimport './Button.scss';

const Button = () => <button className="button">Click me</button>;

特徴：

• 変数、ネスト、ミックスインなどの高度な機能がある
• コードの再利用性が高い

CSS-in-JS

CSS-in-JSは、JavaScriptでスタイルを定義する方法です。

例（styled-componentsを使用）:

tsxCopyimport styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

const Button = () => <StyledButton>Click me</StyledButton>;

特徴：

• JavaScriptの全機能を使ってスタイルを定義できる
• 動的なスタイリングが容易
• コンポーネントとスタイルを一緒に管理できる