フッター

Footerコンポーネントは、クイックナビゲーションと著作権情報を提供する包括的なフッターセクションです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• レスポンシブデザイン: モバイルファーストアプローチで異なる画面サイズに対応
• クイックナビゲーション: 設定可能なナビゲーションリンク
• テーマサポート: ライトテーマとダークテーマの両方に対応
• カスタマイズ可能なコンテンツ: 柔軟な著作権テキストと説明文
• アクセシビリティ: 適切なARIAラベルとセマンティックHTML

使用方法

---
import { Footer } from '@karan-monorepo/ui-core';
---

<kds-footer
  copyright="© 2025 会社名. All rights reserved."
  description="モダンなテクノロジーで素晴らしい製品を構築しています。"
  quick-links='[{"label": "ホーム", "href": "/"}, {"label": "について", "href": ""}, {"label": "お問い合わせ", "href": "#"}]'
  theme="light"
></kds-footer>

プロパティ

プロパティ	型	デフォルト	説明
copyright	string	"© 2025 Karan. All rights reserved."	下部に表示される著作権テキスト
description	string	""	Aboutセクション用のカスタム説明文
quickLinks	Array<{label: string, href: string}>	[]	クイックナビゲーションリンクの配列
theme	'light' | 'dark'	'light'	カラーテーマバリエーション

使用例

Footer Component

Comprehensive footer component with social links, quick navigation, and copyright information.

Basic Usage

Simple Footer

With Quick Links

Footer with Links

Themes

Light Theme

Dark Theme

Usage Examples

Corporate Footer

Minimal Footer

バリエーション

Footerコンポーネントは2つのテーマをサポートします：

• light: ライトテーマ
• dark: ダークテーマ

<!-- ライトテーマ -->
<kds-footer
  copyright="© 2025 My Company. All rights reserved."
  description="素晴らしい製品を提供しています。"
  theme="light"
/>

<!-- ダークテーマ -->
<kds-footer
  copyright="© 2025 My Company. All rights reserved."
  description="素晴らしい製品を提供しています。"
  theme="dark"
/>

使用ケース

基本的なフッター

<kds-footer
  copyright="© 2025 My Company. All rights reserved."
  description="私たちの会社について"
  theme="light"
/>

ナビゲーション付きフッター

<kds-footer
  copyright="© 2025 Tech Blog. All rights reserved."
  description="最新のテクノロジー情報をお届けします。"
  quick-links='[
    {"label": "ホーム", "href": "/"},
    {"label": "記事", "href": "/articles"},
    {"label": "カテゴリ", "href": "/categories"},
    {"label": "お問い合わせ", "href": "/contact"},
    {"label": "プライバシーポリシー", "href": "/privacy"},
    {"label": "利用規約", "href": "/terms"}
  ]'
  theme="light"
/>

シンプルなフッター

<kds-footer
  copyright="© 2025 Portfolio. All rights reserved."
  theme="dark"
/>

スタイリング

Footerコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

• タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
• カラー: ライト/ダークテーマに対応したカラートークン
• スペーシング: デザインシステムのスペーシングトークン
• レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

Footerコンポーネントには適切なアクセシビリティ機能が含まれています：

• セマンティックHTMLの<footer>要素を使用
• キーボードナビゲーションサポート
• 高コントラスト比による視認性の確保
• スクリーンリーダー対応の構造

ベストプラクティス

1. 著作権情報は正確で最新に保つ
2. 説明文は簡潔で会社の価値を伝える
3. ナビゲーションリンクは重要度順に配置する
4. テーマはサイト全体のデザインと一致させる
5. 両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

Footerコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

• CSS Grid
• CSS Custom Properties
• Web Components (Lit)