cdsf

お疲れさまでした！とても実りの多い1日だったと思います 🙌

以下、今日の振り返りと現在地をまとめました👇

✅ 現在地と進捗

🎯 目的

  • 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 対応も

ゆっくり休んでくださいね😴

また明日も一緒に開発進めましょうー！おやすみなさい🌙

ブログ一覧に戻る