Summary  
CSS Modules automatically generate unique class names to scope CSS to specific components and prevent style collisions, enabling modular and maintainable styling.

General domain of usage  
Styling UI components in front-end web development

CSS Modulesは自動的にユニークなクラス名を生成し、特定のコンポーネントにCSSのスコープを限定することで、スタイルの衝突を防止。シンプルなCSSルールをCSS Modules内に記述可能。

## プロジェクトに戻る
`home.module.css`フォルダー内に`app/ui`というCSSモジュールを作成し、次のCSSルールを貼り付ける：

```css
.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: rgb(255 255 255);
  border-radius: 9999px;
}
```

`home.module.css` ファイルを `app/page.tsx` ファイルにインポートし、先ほど作成した `styles.circle` 要素に `div` クラスを適用します。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

CSSモジュールの利用

プロジェクトに戻る

実践例