UI Component Lab English

← コンポーネント一覧

データ表示

Divider ディバイダー（区切り線）

セクションや項目のまとまりの間を区切る細い線。

アカウント

名前、メールアドレス、パスワード。

通知

受け取るメールを選びます。

ヘルプ 利用規約 プライバシー

別名

見分けるポイント

内容を横切る細い灰色の横線。横に並んだ項目の間に入る短い縦線のこともある。

バリエーション

全幅
端から端まで引き、大きなセクションやリストを区切る。
インセット
字下げした位置から引き、同じセクションの中の項目を、つながりを保ったまま区切る。

挙動

  • 操作する部品ではない。
  • このデモでは、セクションの間の線は <hr> で、スクリーンリーダーは区切りとして読み上げる。リンクの間の縦線は飾りなので、読み上げないようにしている。

キーボード操作

キー動作
—なし。

使い分け・注意点

  • ディバイダーは余白を補うものにすぎない。線がなくても意味が通じる配置にする。
  • 別々の項目が1つに見えないよう、周りに十分な余白をとる（リストでは 8px 以上、セクションの間では 16px 以上）。
  • 話題の切り替わりには <hr> を使う。見た目だけの線なら CSS の border を使う。

出典