レイアウト

Footer

ページ下部の領域(contentinfo ランドマーク)。Navbar と対になる footer 要素で、横並びの行を自由に組み立てられます。中身は中央にそろい、リンクや著作権表示、複数の列などを置けます。

ReactVueWeb Components
Storybook で見る

プレイグラウンド

使用例

<Footer>
  <p>© 2026 Lily</p>
  <a href="/terms">Terms</a>
</Footer>

設定できる項目

名前 既定値 説明
children 必須 ReactNode Footer content (links, legal text, columns — composed freely).
bordered boolean true Draw a top border separating the footer from the page. @default true

アクセシビリティ

  • 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA(明るさの差が 7:1 以上)を満たします。
  • マウスがなくても、キーボードだけですべての操作ができます。
  • いまどこを操作しているかを示す枠(フォーカスの囲み)が、常にはっきり見えます。
  • 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。

どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA(WCAG 2.1 AAA)を満たすよう作っています。