@blocklet/ui-react/docs/components-layout.ja.md

Some useful front-end web components that can be used in Blocklets.

# レイアウト

レイアウトコンポーネントは、blocklet アプリケーションのユーザーインターフェースを構築するための基礎となるビルディングブロックです。これらは、メインヘッダー、フッター、コンテンツエリアを含む、一貫性のある予測可能なフレームワークを提供します。これらのコンポーネントを活用することで、blocklet のメタデータに基づいて自動的に適応するため、アプリケーション全体でプロフェッショナルで統一感のあるユーザーエクスペリエンスを確保できます。

これらのコンポーネントは、以下に示すように、アプリケーションの主要な視覚構造を形成します。

<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
![Layout](assets/diagram/layout-diagram-0.ja.jpg)
<!-- DIAGRAM_IMAGE_END -->

このセクションでは、利用可能な主要なレイアウトコンポーネントの概要を説明します。詳細な実装ガイドと API リファレンスについては、各コンポーネントの特定のドキュメントを参照してください。

<x-cards data-columns="3">
  <x-card data-title="Header" data-icon="lucide:navigation" data-href="/components/layout/header">
    レスポンシブでカスタマイズ可能なヘッダーを提供し、blocklet のメタデータからナビゲーションリンクとユーザーセッションコントロールを自動的に入力します。
  </x-card>
  <x-card data-title="Footer" data-icon="lucide:book-down" data-href="/components/layout/footer">
    ブランディング、著作権情報、ソーシャルメディアリンク、追加のナビゲーションを含む、アプリケーションの一貫したフッターをレンダリングします。
  </x-card>
  <x-card data-title="Dashboard" data-icon="lucide:layout-dashboard" data-href="/components/layout/dashboard">
    サイドバー、ヘッダー、コンテンツエリアを備えたビルド済みのダッシュボードレイアウトで、管理者インターフェースやユーザー中心のビュー向けに設計されています。
  </x-card>
</x-cards>

## 概要

レイアウトコンポーネントは、blocklet のメタデータ（`blocklet.yml`）から直接設定を取得し、シームレスに連携するように設計されており、定型コードを最小限に抑え、開発を加速させます。

続けるには、各コンポーネントの詳細なドキュメントを参照して、それぞれのプロパティ、使用パターン、カスタマイズオプションを理解してください。

- **次へ**: [Header コンポーネント](./components-layout-header.md)について学びます。