備忘録
2025-04-08
🎯 目的
- Next.js + Notion API のブログサイトを開発中
- 今は**見た目（UI）と構造（設計）**をしっかり整えているフェーズ
🔨 取り組んだこと
| カテゴリ | 内容 |
|---|---|
| スタイリング手法 | CSS Modules と styled-components の違いを理解し、Atomic Design の考え方に沿ってページ構成や UI を設計 |
| App Router構成 | page.tsx などのルートファイルは基本 Server Component、そのため styled-components は避けて CSS Modules を選択 |
| レイアウト管理 | layout.tsx に Header と Footer を含め、main に flex: 1 を指定して全体のレイアウトを整備 |
| コンポーネント化 | Breadcrumb, Tag を含む Molecule レベルのコンポーネントを設計・整理開始 |
| レスポンシブ対応 | @media クエリを用いたスマホ対応の書き方を習得し、実際に適用開始 |
| 命名の整理 | page.module.css を Home.module.css にリネームしてスッキリ（責務を明確化） |
📍 現在地
- Atomic Design × CSS Modules の思想を明確にできた
- ページごとにスタイルファイルを切り分ける設計に移行中
- コンテンツの下にフッターがはみ出ないような全体設計が完成
- レスポンシブ化の第一歩もスタート済み（スマホレイアウトも検証済）
🛠 次回やると良いこと（提案）
Tagコンポーネントのモジュール化（Molecule 練習）- レスポンシブの breakpoints 設計を
variables.css的に管理しても◎ - Markdown に含まれる画像表示やスタイル拡充
- 最終的には SEO や OGP 対応も