カルーセル（使い方）

カルーセルのタイプ

カルーセルには「打ち出しタイプ」と「コンテナタイプ」があります。

ウェブサイト自体を象徴するグラフィックやウェブサイトの主題そのものを、ページ冒頭で打ち出すためのカルーセル形式です。<title>要素自体が、カルーセルの見出しとして機能する場合に限り使用できます。

スライドを複数持てる「マルチ」と、ひとつだけ持てる「シングル」があります。

「新着情報」や「開催中のイベント」など、特定の主題に属するトピックのコンテナとして使用します。必ずカルーセルの前に見出し（<hn>要素）を配置してください。

スライドを複数持てる「マルチ」のみがあります。

打ち出しタイプとコンテナタイプの両方とも以下の仕様です。

カルーセルの幅は、原則としてページの「コンテンツエリアのデフォルト幅」を埋めるようにします。
- 「コンテンツエリアのデフォルト幅」とは、サイドナビゲーションなどを除いた、コンテンツ自体が表示される領域の幅のことです。
- 例えば、「コンテンツエリアのデフォルト幅」が1024pxのときは、カルーセルの幅も1024pxとなります。
ただし、カルーセルの幅を「コンテンツエリアのデフォルト幅」よりも狭くすることも許容されます。
- 例えば、「コンテンツエリアのデフォルト幅」が1200pxであるときに、カルーセルの幅を1024pxにすることも可能です。

画像内にスライドのタイトルや概要テキストを入れます。
- 320pxまで縮小されることを想定し、大きく読みやすい文字として記載します。
- 代替テキストには、画像内に書かれた文字をそのまま使用します。
画像の内側2pxには枠線が重なるため、情報として読み取るべき要素はその部分を避けて配置します。
- 周囲とのコントラストを確保するため、コンポーネント自体が枠線を付与します。
画像内での、文字色の背景色とのコントラスト比を少なくとも4.5:1以上にします。
- 写真の上に文字を載せる場合など、背景色が一定でない場合は、もっともコントラスト比が低くなる箇所で測定します。
- 写真や図版の上に文字を乗せる場合は、テキストに帯の背景を敷くことでコントラストを確保します。ほかにも、文字に縁取りする方法もあります。
画像内での、図形やアイコン等の色と背景色とのコントラスト比を少なくとも3:1以上にします。
- 図形やアイコン等の色を調整しにくい場合は、帯の背景を敷いたり、図形に枠線をつけたりすることでコントラストを確保します。

打ち出しタイプとコンテナタイプの両方で使用できます。

ボタンを押すと以下の形に変化します。もう一度押すと元に戻ります。
- 後続のスライドが下部に一覧されます。ネクストエリアとステップナビゲーションは非表示になります。
- 水平タイプのステップナビゲーションが、スライド左側に垂直タイプとして表示されます。

カルーセルには左右に48pxずつの余白があります。
- これは「すべてのスライド」でスライド番号を表示するための領域を確保するためです。
メインエリアとネクストエリアは3:1で分割されます。
- メインエリアの幅を満たす形で画像を作成します。
- メインエリアの背景、ネクストエリアの背景、ネクストボタンの縮小画像は、実装によって自動適用されます。別途画像を作成する必要はありません。
標準サイズのカルーセルの幅は、1024px〜1600pxまでをサポートします。
- カルーセルの幅に対してメインエリアの画像幅が足りなくなる場合があります。その場合は、画像をブラーしたもので余白が埋まります。