ヘッダー

Headerコンポーネントは、カスタマイズ可能なタイトル、サブタイトル、ナビゲーションを提供するレスポンシブなヘッダーです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

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

使用方法

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

<kds-header
  title="アプリケーション名"
  subtitle="アプリケーションの説明"
  navigation-links='[{"label": "ホーム", "href": "/"}, {"label": "について", "href": "#"}, {"label": "お問い合わせ", "href": "#"}]'
  theme="light"
></kds-header>

プロパティ

プロパティ	型	デフォルト	説明
title	string	"Tech Blog"	ヘッダーのメインタイトル
subtitle	string	""	オプションのサブタイトルテキスト
navigationLinks	Array<{label: string, href: string}>	[]	表示するナビゲーションリンクの配列
theme	'light' | 'dark'	'light'	カラーテーマバリエーション

使用例

Header Component

Responsive header component with navigation and customizable title/subtitle.

Basic Usage

Simple Header

With Navigation

Header with Navigation

Themes

Light Theme

Dark Theme

Usage Examples

Blog Header

Portfolio Header

バリエーション

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

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

<!-- ライトテーマ -->
<kds-header
  title="アプリケーション名"
  subtitle="アプリケーションの説明"
  theme="light"
/>

<!-- ダークテーマ -->
<kds-header
  title="アプリケーション名"
  subtitle="アプリケーションの説明"
  theme="dark"
/>

使用ケース

基本的なヘッダー

<kds-header
  title="My App"
  subtitle="素晴らしいアプリケーション"
  theme="light"
/>

ナビゲーション付きヘッダー

<kds-header
  title="Tech Blog"
  subtitle="最新のテクノロジー情報"
  navigation-links='[
    {"label": "ホーム", "href": "/"},
    {"label": "記事", "href": "/articles"},
    {"label": "カテゴリ", "href": "/categories"},
    {"label": "お問い合わせ", "href": "/contact"}
  ]'
  theme="light"
/>

シンプルなヘッダー

<kds-header
  title="ポートフォリオ"
  theme="dark"
/>

スタイリング

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

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

アクセシビリティ

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

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

ベストプラクティス

1. タイトルは簡潔で覚えやすくする
2. サブタイトルは補足情報として使用する
3. ナビゲーションリンクは論理的な順序で配置する
4. テーマはサイト全体のデザインと一致させる
5. 両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

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

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