LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Jochun

[CSS][React] スタイル一覧

Last updated at Posted at 2025-02-17

一覧

スタイル手法の分類

分類 スタイル手法 説明
直接適用型 インラインスタイル style={{ color: "red" }} のように直接要素に適用
内部適用型 内部スタイル <style> タグや <style jsx> を使用
ファイルインポート型 外部CSS .css ファイルを import して適用
モジュール型 CSS Modules .module.css を import し、クラス名を動的に割り当て
CSS-in-JS型 Styled JSX next.js に特化した styled jsx
styled-components styled.div などでコンポーネントごとに定義
Emotion styled-components の代替で、柔軟なスタイル定義が可能
Vanilla Extract TypeScript ベースの型安全な CSS-in-JS
ユーティリティクラス型 Tailwind CSS クラスを直接組み合わせてスタイル適用
プリプロセッサ型 SASS/SCSS 変数やミックスインを使用可能な CSS 拡張

補足

  • ライブラリ不要なもの: インラインスタイル、内部スタイル、外部CSS、CSS Modules は ブラウザ標準の機能 で動作。
  • ライブラリが必要なもの:
    • CSS-in-JS 系 → styled-components, Emotion, Vanilla Extract
    • ユーティリティクラス型 → Tailwind CSS
    • プリプロセッサ型 → SASS/SCSS

詳細

インラインスタイル

  • メリット:
    • 簡単にスタイルを適用でき、動的なスタイル変更が可能。
  • デメリット:
    • 冗長になりがちで、CSSの機能制限がある。
App.js
import InlineStyleComponent from "./InlineStyleComponent";

function App() {
  return <InlineStyleComponent />;
}

export default App;
InlineStyleComponent.js
function InlineStyleComponent() {
  return (
    <div style={{ backgroundColor: "lightblue", padding: "20px", borderRadius: "10px" }}>
      <h2 style={{ color: "darkblue" }}>インラインスタイル</h2>
    </div>
  );
}

export default InlineStyleComponent;

内部スタイル

  • メリット:
    • HTMLとスタイルが一体化し、修正が簡単。
  • デメリット:
    • 再利用性が低く、スタイル競合の可能性がある。
App.js
import InternalStyleComponent from "./InternalStyleComponent";

function App() {
  return <InternalStyleComponent />;
}

export default App;
InternalStyleComponent.js
function InternalStyleComponent() {
  return (
    <>
      <style>
        {`
          .internal-style {
            background-color: lightcoral;
            padding: 20px;
            border-radius: 10px;
          }
          .internal-style h2 {
            color: white;
          }
        `}
      </style>
      <div className="internal-style">
        <h2>内部スタイル</h2>
      </div>
    </>
  );
}

export default InternalStyleComponent;

外部CSS

  • メリット:
    • スタイルの再利用が容易で、他のツールとの統合が簡単。
  • デメリット:
    • グローバルな影響があり、パフォーマンスに影響を与えることがある。
App.js
import ExternalCssComponent from "./ExternalCssComponent";
import "./styles.css";

function App() {
  return <ExternalCssComponent />;
}

export default App;
ExternalCssComponent.js
function ExternalCssComponent() {
  return (
    <div className="external-style">
      <h2>外部CSS</h2>
    </div>
  );
}

export default ExternalCssComponent;
styles.css
.external-style {
  background-color: lightgreen;
  padding: 20px;
  border-radius: 10px;
}

.external-style h2 {
  color: darkgreen;
}

CSS Modules

  • メリット:
    • 名前の衝突を防ぎ、スタイルの再利用が可能。
  • デメリット:
    • スタイルの動的適用に手間がかかる。
App.js
import CssModuleComponent from "./CssModuleComponent";

function App() {
  return <CssModuleComponent />;
}

export default App;
CssModuleComponent.js
import styles from "./CssModuleComponent.module.css";

function CssModuleComponent() {
  return (
    <div className={styles.moduleStyle}>
      <h2>CSS Modules</h2>
    </div>
  );
}

export default CssModuleComponent;
CssModuleComponent.module.css
.moduleStyle {
  background-color: lightyellow;
  padding: 20px;
  border-radius: 10px;
}

.moduleStyle h2 {
  color: goldenrod;
}

Styled JSX (Next.js向け)

  • メリット:
    • コンポーネントごとのスタイルが適用でき、Next.jsとの親和性が高い。
  • デメリット:
    • Next.jsに依存し、他のReactプロジェクトでは使いにくい。
App.js
import StyledJsxComponent from "./StyledJsxComponent";

function App() {
  return <StyledJsxComponent />;
}

export default App;
StyledJsxComponent.js
function StyledJsxComponent() {
  return (
    <div className="jsx-style">
      <h2>Styled JSX</h2>
      <style jsx>{`
        .jsx-style {
          background-color: lightpink;
          padding: 20px;
          border-radius: 10px;
        }
        .jsx-style h2 {
          color: darkred;
        }
      `}</style>
    </div>
  );
}

export default StyledJsxComponent;

styled-components

  • メリット:
    • コンポーネントごとのスタイル管理が簡単で、動的スタイルやテーマ管理が可能。
  • デメリット:
    • パフォーマンスへのオーバーヘッドがあり、JavaScriptに依存する。
App.js
import StyledComponent from "./StyledComponent";

function App() {
  return <StyledComponent />;
}

export default App;
StyledComponent.js
import styled from "styled-components";

const Container = styled.div`
  background-color: lavender;
  padding: 20px;
  border-radius: 10px;
`;

const Title = styled.h2`
  color: darkviolet;
`;

function StyledComponent() {
  return (
    <Container>
      <Title>styled-components</Title>
    </Container>
  );
}

export default StyledComponent;

Emotion

  • メリット:
    • 柔軟なスタイル定義が可能で、軽量。
  • デメリット:
    • JavaScriptコード内でスタイルを記述するため、CSSとJSの分離が難しい。
App.js
import EmotionComponent from "./EmotionComponent";

function App() {
  return <EmotionComponent />;
}

export default App;
EmotionComponent.js
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const containerStyle = css`
  background-color: lightgray;
  padding: 20px;
  border-radius: 10px;
`;

const titleStyle = css`
  color: black;
`;

function EmotionComponent() {
  return (
    <div css={containerStyle}>
      <h2 css={titleStyle}>Emotion</h2>
    </div>
  );
}

export default EmotionComponent;

Tailwind CSS

  • メリット:
    • ユーティリティクラスを使って迅速にスタイルを適用でき、レスポンシブデザインが簡単。
  • デメリット:
    • HTMLが冗長になりやすく、一貫性の保持が難しい。
App.js
import TailwindComponent from "./TailwindComponent";
import "./index.css"; // 必要なら import

function App() {
  return <TailwindComponent />;
}

export default App;
TailwindComponent.js
function TailwindComponent() {
  return (
    <div className="bg-blue-200 p-5 rounded-lg">
      <h2 className="text-blue-800">Tailwind CSS</h2>
    </div>
  );
}

export default TailwindComponent;
tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?