3秒でわかる
画面の左右どちらかに固定して置く縦長のUI領域。ナビゲーションや一覧を常に見える位置に残し、本文と行き来しやすくするために使います。
もう少し詳しく
どういうものか
サイドバーは、画面の左端または右端に置く縦長の領域です。メニュー、カテゴリ一覧、目次、フィルター、設定項目など、本文を読みながらいつでも触りたい要素を並べます。管理画面、ドキュメントサイト、チャットアプリの会話一覧などで定番の配置です。
左に置くか右に置くかで役割が分かれます。左は移動のための領域として使われることが多く、右は本文の補足やプレビューなど、読み終わってから見る情報に向きます。
なぜ必要か
ページを移動するたびにメニューを探して戻る操作が入ると、記事を数本読むだけで往復が増えます。サイドバーに一覧を常駐させると、今どこにいるかと次にどこへ行けるかが同時に見えるので、移動の手数が減ります。全体像が見えることで、そのサイトにどれだけの情報があるかも伝わります。
具体例
<div class="layout">
<aside class="sidebar">
<nav>
<a href="/docs/start" aria-current="page">はじめに</a>
<a href="/docs/install">インストール</a>
<a href="/docs/config">設定</a>
</nav>
</aside>
<main class="content">
<h1>はじめに</h1>
<p>本文がここに入る</p>
</main>
</div>.layout {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
.sidebar {
<a href="/glossary/position" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">position</a>: sticky; /* スクロールしても残す */
top: 0;
align-self: start;
height: 100vh;
overflow-y: auto; /* 項目が多いとき中だけスクロール */
border-right: 1px solid #ddd;
}
/* 狭い画面では縦に積んで本文の幅を確保する */
@media (<a href="/glossary/max-width" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">max-width</a>: 768px) {
.layout {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
height: auto;
}
}つまずきやすいところ
position を fixed にして固定したまま、高さを指定せずに項目を増やすと、下のほうの項目が画面外に出て触れなくなります。高さを画面の高さぶんに固定し、はみ出した部分を中でスクロールさせる指定を添えるところまでが一組です。
固定したサイドバーの幅ぶん、本文に余白を空け忘れる事故も定番です。fixed は文書の流れから外れるため、本文がサイドバーの下に潜り込みます。グリッドの列指定や左余白で場所を確保します。
スマートフォンでは幅 240px を取られると本文が読めなくなります。ハンバーガーメニューで隠す形に切り替えるのが一般的ですが、隠したときに閉じる手段を用意し、開いている間は背後の本文をスクロールさせない配慮が要ります。マークアップとしては、移動用のリンクを並べるなら aside の中に nav を置き、現在地に aria-current を付けると読み上げでも位置が伝わります。
似た用語との違い
| 語 | 位置と役割 |
|---|---|
| サイドバー | 左右の縦長領域。移動や一覧を常駐させる |
| ヘッダー | 上部の横帯。ロゴ、検索、主要な導線 |
| ドロワー | ふだんは隠れていて、操作で横から出てくる領域 |
