--- title: "アプリシェル" description: "ページやアプリの枠組みです。ヘッダー、ナビゲーション、メインコンテンツ、アサイド、フッターを配置し、ウィンドウの幅からそれぞれの見せ方を決め、キーボードでは 1 回の操作でコンテンツに届くようにします。" url: "https://tanrei.chnotchy.com/ja/components/app-shell/" last_updated: 2026-10-23T11:50:10.000Z --- # アプリシェル > ページやアプリの枠組みです。ヘッダー、ナビゲーション、メインコンテンツ、アサイド、フッターを配置し、ウィンドウの幅からそれぞれの見せ方を決め、キーボードでは 1 回の操作でコンテンツに届くようにします。 ## 概要 アプリシェルは、ウィンドウの枠組みです。領域を配置するだけで、その中身は描きません。ヘッダーに置くのは利用者側のアプリバー、ナビゲーションに置くのは利用者側のナビゲーションドロワー、フッターに置くのは利用者側のレイアウトです。シェルが加えるのは、自作の枠組みでは忘れられがちなものです。ランドマーク、ひとそろいのウィンドウ幅の区切り、固定されたヘッダーがリンク先を隠さないための余白、そしてキーボードで枠組みを飛び越える手段です。 枠組みはウィンドウ全体を占めるものなので、このページには動く例がありません。ページの中にシェルを描いても、そのシェルは、ページが置かれたウィンドウのウィンドウクラスになってしまいます。[仕様](https://tanrei.chnotchy.com/ja/components/app-shell/#%E4%BB%95%E6%A7%98)には、フィクスチャをプロパティとともに一覧で示します。テストでは、それぞれを専用のウィンドウに単独で描いています。 Web では、利用者側の領域を `` で囲みます。この要素はシャドウルートを持たないので、`
` はページのバナーに、ただ 1 つの `
` はメインのランドマークになり、スクリプトがなくても、クローラーにも読めます。ほかのプラットフォームはまだ実装していません。 ### 使い方 **Web** ```html メインコンテンツへスキップ
menu
…
…
…
 ``` **React** ```tsx import { AppBar, AppShell, Button, NavigationDrawer } from '@tanrei/react'; import '@tanrei/web/app-shell.css'; setWindowClass(event.detail.windowClass)}> メインコンテンツへスキップ
…
{children}
…
 ``` `@tanrei/web/app-shell.css` は、スクリプトが動く前に枠組み全体をレイアウトします。そのため、サーバーでレンダリングしたページは、スクリプトが届いてもレイアウトが動かず、スキップリンクは、スクリプトが無効でも働きます。要素自身も、同じスタイルシートをページに加えます。 ### 書くもの 領域は、`slot` 属性を持つ子です。メインの領域は、`slot` を持たない、ただ 1 つの `
` です。 | 領域 | Web での書き方 | シェルが与えるもの | | --- | --- | --- | | スキップリンク | `` | キーボードで最初にフォーカスが止まる位置。キーボードフォーカスがある間だけ描かれます。 | | お知らせ | コールアウトを囲む `
` | ヘッダーの上、枠組みの幅いっぱい。 | | ヘッダー | アプリバーを囲む `
` | 幅いっぱい。ページをスクロールしても上端に残ります。 | | ナビゲーション | `` | 先頭側の端。3 つの見せ方のいずれかになります。 | | メイン | `
` | ガター、幅の上限、スキップリンクの行き先。 | | アサイド | `