目次

目次は、メインコントロールバーにあるボタンです。 アクティブにすると、ページインデックスとラベルのリストが含まれたドロップダウンパネルが表示されます。

設定に基づいて、リストには、カタログ内に存在するすべてのページを含めることも、明示的なラベルが定義されているページのみを含めることもできます。 デスクトップシステムでは、リストが使用可能な画面のスペースより長い場合、右側にスクロールバーが表示されます。

ビューアユーザインターフェイス内の目次ボタンの位置とサイズは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents

目次のCSSプロパティ

margin-top

コントロールバーの上端からのオフセット。

margin-left

左側の次のボタンまでの距離、または行の最初のボタンの場合はコントロールバーの左側までの距離です。

width

目次ボタンの幅。

height

目次ボタンの高さ。

background-image

ボタンの特定の状態に対して表示する画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトも参照してください。

メモ

このボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

ボタンのツールチップをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例 — メインコントロールバーの下から4ピクセル、左から43ピクセルの位置に配置する目次ボタンを設定します。サイズは28 x 28ピクセルで、ボタンの4つの状態ごとに異なる画像が表示されます。

.s7ecatalogviewer .s7tableofcontents { 
margin-top: 4px; 
margin-left: 10px; width: 28px; 
 height: 28px; 
} 
.s7ecatalogviewer .s7tableofcontents[state='up'] { 
background-image:url(images/v2/TableOfContents_dark_up.png); 
} 
.s7ecatalogviewer .s7tableofcontents[state='over'] { 
background-image:url(images/v2/TableOfContents_dark_over.png); 
} 
.s7ecatalogviewer .s7tableofcontents[state='down'] { 
background-image:url(images/v2/TableOfContents_dark_down.png); 
} 
.s7ecatalogviewer .s7tableofcontents[state='disabled'] { 
background-image:url(images/v2/TableOfContents_dark_disabled.png); 
}

ドロップダウンパネルの外観は、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogviewer .s7tableofcontents .s7panel

ドロップダウンパネルのCSSプロパティ

background-color

ドロップダウンパネルの背景色。

margin

パネルの境界とコンテンツの間の内部オフセット。

box-shadow

パネル周囲のドロップシャドウ。

メモ

CSSからドロップダウンパネルのサイズや位置を制御することはできません。コンポーネントは、そのレイアウトをプログラムで管理します。

例 — 背景色が半透明の黒で、コンテンツの周囲のマージンが5ピクセルで、ドロップシャドウのあるドロップダウンパネルを設定します。

.s7ecatalogviewer .s7tableofcontents .s7panel { 
 background-color: rgba(0, 0, 0, 0.5); 
 margin: 5px; 
 box-shadow: 2px 2px 3px #c0c0c0; 
}

個々の項目のルック&フィールは、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

項目のCSSプロパティ

font-family

フォント名

font-size

フォントサイズ

height

項目の高さ。

パディング

内部のパディング。

メモ

ドロップダウンリスト項目では、state属性セレクターがサポートされます。このセレクターは、項目にカーソルを合わせた状態や選択した状態ごとに異なるスキンを適用するのに使用できます。

例 — フォントがHelvetica 14ピクセル、高さが19ピクセルのドロップダウン項目を設定します。 項目の背景色は、カーソルを合わせたときに濃いグレーになり、選択したときに薄いグレーになります。

.s7ecatalogviewer .s7tableofcontents .s7panel .s7item { 
font-family: Helvetica,sans-serif; 
font-size: 14px; 
height: 19px; 
} 
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="over"] { 
background-color: rgb(102, 102, 102); 
} 
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="selected"] { 
background-color: rgb(178, 178, 178); 
}

ページインデックスを表示する要素は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

ページインデックスのCSSプロパティ

min-width

要素の幅の最小値。

max-width

要素の幅の最大値。

padding-right

ページインデックスとページラベルの間隔。

メモ

s7index CSSクラスにdisplay:noneを設定すると、ページインデックスを完全に非表示にできます。

例1 — 幅の最小値が40ピクセル、最大値が70ピクセルで、右側に5ピクセルのマージンがあるページインデックスを設定します。

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index { 
max-width: 70px; 
min-width: 40px; 
padding-right: 5px; 
}

例2 — ページインデックスを非表示にする:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index { 
display: none; 
}

ページラベルは、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

ページラベルのCSSプロパティ

min-width

要素の幅の最小値。

max-width

要素の幅の最大値。

例 — 幅の最小値が40ピクセル、最大値が240ピクセルのページインデックスを設定します。

.s7ecatalogviewer .s7tableofcontents .s7panel .s7label { 
min-width: 40px; 
max-width: 240px; 
}

ドロップダウンパネル内の垂直方向に収まらないアイテムが多く、システムがデスクトップの場合は、パネルの右側に垂直方向のスクロールバーが表示されます。 スクロールバー領域の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

スクロールバーのCSSプロパティ

width

スクロールバーの幅。

トップ

パネル領域の上端からのスクロールバーの垂直方向のオフセット。

パネル領域の下端からのスクロールバーの垂直方向のオフセット。

パネル領域の右端からのスクロールバーの水平方向のオフセット。

例 — 幅が28ピクセルで、パネルの上、右または下の領域にマージンがないスクロールバーを設定します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar { 
 top:0px; 
 bottom:0px; 
 right:0px; 
 width:28px; 
}

スクロールバートラックは、上下のスクロールボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。 このトラックは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

スクロールトラックのCSSプロパティ

width

トラックの幅。

background-color

トラックの背景色。

例 — 幅が28ピクセルで、背景色が半透明のグレーのスクロールバートラックを設定します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack { 
 width:28px; 
 background-color:rgba(102, 102, 102, 0.5); 
}

スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。 その垂直方向の位置は、コンポーネントのロジックによって制御されます。 一方、サムの高さは、コンテンツの量に応じて動的に変化するわけではありません。 サムの高さや、その他の外観は、以下のCSSクラスセレクターを使用して設定できます。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

スクロールバーサムのCSSプロパティ

width

サムの幅。

height

サムの高さ。

padding-top

トラックの上端との間の垂直方向のパディング。

padding-bottom

トラックの下端との間の垂直方向のパディング。

background-image

サムの特定の状態に対して表示する画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトも参照してください。

メモ

サムでは、state属性セレクターがサポートされます。このセレクターは、updownoverおよびdisabledのサムの状態ごとに異なるスキンを適用するのに使用できます。

例 — 28 x 45ピクセルで、上下に10ピクセルのマージンがあり、状態ごとに異なるアートワークを持つスクロールバーサムを設定します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb { 
 width:28px; 
 background-repeat:no-repeat; 
 background-position:center; 
 height:45px; 
 padding-top:10px; 
 padding-bottom:10px; 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
}

上下のスクロールボタンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

CSS topleftbottomrightの各プロパティを使用してスクロールボタンを配置することはできません。ビューアのロジックによって自動的に配置が決まります。

上スクロールボタンと下スクロールボタンのCSSプロパティ

width

ボタンの幅。

height

ボタンの高さ。

background-image

ボタンの特定の状態に対して表示する画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトも参照してください。

メモ

ボタンでは、state属性セレクターがサポートされます。このセレクターは、updownoverおよびdisabledの各ボタンの状態ごとに異なるスキンを適用するのに使用できます。

ボタンのツールチップをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例 — 28 x 32ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定します。

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png); 
} 
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
}

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now