appディレクトリ - fun-kankodori/kankodori_web GitHub Wiki
全ページ共通のレイアウトを定義するファイルです。
- Google Fontsの「Geist」「Geist Mono」を読み込み、CSS変数として利用。
-
metadata
でページタイトル・説明文を設定。 - すべてのページで共通となるHTML構造(
<html>
,<body>
)を定義。 -
<body>
タグにフォントのCSS変数とantialiased
クラスを付与。
主な関数・エクスポート:
-
RootLayout
: 全ページのラッパーとなるReactコンポーネント。 -
metadata
: Next.jsのSEO用メタデータ。
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}
トップページのエントリーポイントです。
-
@/components/TouristSpotApp
をインポートし、トップページで表示。 - ここでは
TouristSpotApp
コンポーネントのみを返すシンプルな構成。
主な関数・エクスポート:
-
App
: トップページのReactコンポーネント。
export default function App() {
return <TouristSpotApp />;
}
全体のスタイルを管理するグローバルCSSファイルです。
- TailwindCSS をインポートしており、ユーティリティクラスが利用可能です。
- カスタムプロパティ(CSS変数)で背景色・文字色・フォントを定義しています。
- ダークモード対応(
prefers-color-scheme: dark
)も実装済み。 -
body
タグに背景色・文字色・フォントファミリーを適用。
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
-
globals.css
: 全体のスタイル・テーマ・ダークモード対応 -
layout.tsx
: 全ページ共通のレイアウト・フォント・SEO -
page.tsx
: トップページのエントリーポイント -
TouristSpotApp
: 観光地アプリのメインUI(詳細は別途記載)
新しいファイルやコンポーネントを追加した場合は、
- ファイルの役割
- 主な関数やエクスポート
- 主要なコード例
をこのWikiに追記