印刷

プリントツールは、コントロールバーに追加されるボタンと、ツールがアクティブになったときに表示されるモーダルダイアログボックスで構成されます。

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

.s7ecatalogsearchviewer .s7print

プリントボタンのCSSプロパティ

margin-top

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

margin-left

左側の次のボタンまたは(このボタンが行の最初のボタンである場合は)コントロールバーの左側までの距離です。

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

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

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

メモ

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

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

例 — 28 x 28ピクセルで、ボタンの4つの状態ごとに異なる画像を表示する印刷ボタンを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7print { 
margin-top: 4px; 
margin-left: 10px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7print[state='up'] { 
background-image:url(images/v2/Print_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7print[state='over'] { 
background-image:url(images/v2/Print_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7print[state='down'] { 
background-image:url(images/v2/Print_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7print[state='disabled'] { 
background-image:url(images/v2/Print_dark_disabled.png); 
}

ダイアログボックスがアクティブな場合にWebページを覆う背景オーバーレイは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

背面オーバーレイのCSSプロパティ

不透明

背景オーバーレイの不透明度。

background-color

背景オーバーレイのカラー。

例 — 不透明度70 %のグレーの背景オーバーレイを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

デフォルトでは、モーダルダイアログはデスクトップシステムの画面の中央に表示されます。 ダイアログボックスの配置とサイズ設定は、コンポーネントで管理します。ダイアログは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

ダイアログボックスのCSSプロパティ

border-radius

ダイアログボックスの境界線の半径。

background-color

ダイアログボックスの背景色

例 — グレーの背景を持つダイアログボックスを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialog { 
background-color: #dddddd; 
}

ダイアログボックスのヘッダーは、アイコン、タイトルテキストおよび閉じるボタンで構成されます。 ヘッダーコンテナは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

ダイアログボックスヘッダーのCSSプロパティ

パディング

ヘッダーコンテンツの内側のパディング。

アイコンとタイトルテキストは、追加のコンテナにまとめられます。このコンテナは、以下を使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

ダイアログの行のCSSプロパティ

パディング

ヘッダーのアイコンとタイトルの内側のパディング。

ヘッダーのアイコンは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

ダイアログボックスヘッダーのアイコンのCSSプロパティ

width

アイコンの幅。

height

アイコンの高さ。

background-image

アイコン画像。

background-position

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

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

ヘッダーのタイトルは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

ダイアログボックスのヘッダーテキストのCSSプロパティ

font-weight

フォントの太さ。

font-size

フォントの高さ

font-family

フォントファミリ。

パディング

内部テキストパディング。

閉じるボタンは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

閉じるボタンのCSSプロパティ

トップ

ヘッダーコンテナを基準とした垂直方向のボタン位置。

ヘッダーコンテナを基準とした水平方向のボタン位置。

width

ボタンの幅。

height

ボタンの高さ。

パディング

ボタンの内側のパディング。

background-image

各状態のボタン画像。

background-position

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

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

メモ

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

「閉じる」ボタンのツールチップとダイアログボックスのタイトルをローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 — パディング、22 x 22ピクセルのアイコン、太字の16ポイントタイトル、28 x 28ピクセルの閉じるボタンを設定し、ダイアログボックスコンテナの上から2ピクセル、右から2ピクセルの位置に配置するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader { 
 padding: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgprint_cap.png"); 
    height: 22px; 
    width: 22px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7ecatalogsearchviewer .s7printdialog .s7closebutton[state='disabled'] { 
 background-image:url(images/sdk/close_disabled.png); 
}

ダイアログボックスのフッターは、「キャンセル」ボタンと「印刷に送信」ボタンで構成されます。 フッターコンテナは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

ダイアログボックスフッターのCSSプロパティ

枠線

フッターとダイアログボックスの残りの部分を視覚的に区切るために使用できる境界線。

フッターには、両方のボタンを保持する内部コンテナがあります。 これは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

ダイアログボックスのボタンコンテナのCSSプロパティ

パディング

フッターとボタンの間の内側のパディング。

「キャンセル」ボタンは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

ダイアログボックスの「キャンセル」ボタンのCSSプロパティ

width

ボタンの幅。

height

ボタンの高さ。

color

各状態のボタンのテキストカラー。

background-color

各状態のボタンの背景色。

メモ

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

「印刷に送信」ボタンは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

ダイアログボックスのアクションボタンのCSSプロパティ

width

ボタンの幅。

height

ボタンの高さ。

color

各状態のボタンのテキストカラー。

background-color

各状態のボタンの背景色。

メモ

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

さらに、両方のボタンは、他のダイアログボックスのボタンと同じCSS設定を含むことができる、共通のCSSクラスを共有します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

ボタンのCSSプロパティ

font-weight

ボタンのフォントの太さ。

font-size

ボタンのフォントサイズ。

font-family

ボタンのフォントファミリ。

行の高さ

ボタン内のテキストの高さ。 垂直方向の位置揃えに影響します。

box-shadow

ドロップシャドウ。

margin-right

ボタンの右余白。

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

例 — 64 x 34の「キャンセル」ボタンと96 x 34の「印刷に送信」ボタンを含むダイアログボックスフッターを設定し、ボタンの状態ごとにテキストの色と背景色を変えるには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton { 
 width:96px; 
 height:34px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

メインダイアログ領域(ヘッダーとフッターの間)には、ダイアログコンテンツが含まれます。 どの場合でも、コンポーネントがこの領域の幅を管理するので、CSSで設定することはできません。 ダイアログのメイン領域は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

ダイアログボックスの表示領域のCSSプロパティ

height

ダイアログボックスのメイン領域の高さ。

background-color

ダイアログボックスのメイン領域の背景色。

margin

外側の余白。

例 — 高さが自動的に計算され、マージンが10ピクセルで、白の背景を使用するダイアログ領域を設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:auto; 
}

すべてのフォームコンテンツ(ラベルや入力フィールドなど)は、コンテナ内に配置され、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

ダイアログボックスの本文のCSSプロパティ

パディング

内側のパディング。

例 — 10ピクセルのパディングがあるフォームコンテンツを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody { 
    padding: 10px; 
}

ダイアログボックスのフォームは1行ずつ入力します。各行は、フォームコンテンツの一部(ラベルやテキスト入力フィールドなど)を含みます。 単一のフォーム行は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

ダイアログボックスの行のCSSプロパティ

パディング

内側の行のパディング。

例 — 各行に10ピクセルのパディングがあるダイアログボックスのフォームを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline { 
    padding: 10px; 
}

ダイアログコンテンツのブロックのサイズは、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

ダイアログの入力幅のCSSプロパティ

width

ブロックの幅。

パディング

内側の行のパディング。

例 — 幅が430ピクセルで、下部に10ピクセルのパディングがあるコンテンツブロックを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide { 
    padding-bottom: 10px; 
    width: 430px; 
}

ダイアログボックスフォーム内の静的ラベルはすべて、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

このクラスは、フォームユーザーインターフェイスの様々な場所のテキストに適用できるので、ラベルのサイズや位置の制御には適していません。

ダイアログボックスのラベルのCSSプロパティ。

font-weight

ラベルのフォントの太さ

font-size

ラベルのフォントサイズ

font-family

ラベルのフォントファミリ。

color

ラベルのテキストの色。

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

例 — グレー、太字、9ピクセルのフォントにすべてのラベルを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel { 
    color: #666666; 
    font-size: 9pt; 
    font-weight: bold; 
}

入力コントロールはコンテナにまとめられ、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

ダイアログボックスの入力コンテナのCSSプロパティ

padding-left

内側のパディング。

例 — ダイアログボックスの左端から30ピクセルのパディングを設定します。

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer { 
    padding-left: 30px; 
}

ラジオボタンとそのキャプションテキストは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

ダイアログボックスオプションのCSSプロパティ

width

キャプションを含むラジオボタンの合計幅。

color

キャプションのテキストカラー。

ラジオボタンとそのキャプションの間隔は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

ダイアログボックスのオプション入力のCSSプロパティ

margin-right

ラジオボタンとそのキャプションの間隔。

印刷範囲を選択するための数値ピッカーは、以下のCSSクラスセレクターを使用して制御します

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

ダイアログボックスの印刷範囲のCSSプロパティ

width

数値ピッカーの幅。

margin

数値ピッカーの周囲の間隔。

例 — 幅が150ピクセルで、黒のテキスト、10ピクセルの間隔、幅が42ピクセルの数値ピッカーを含むすべてのラジオボタンを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption { 
    color: #000000; 
    width: 150px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input { 
    margin-right: 10px; 
} 
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange { 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 42px; 
}

ページ範囲の選択と印刷レイアウトのセクション間の水平方向の区切りは、以下のCSSクラスセレクターを使用して制御します。

 .s7ecatalogsearchviewer 
.s7printdialog .s7horizontaldivider

水平区切りのCSSプロパティ

枠線

区切りの周囲の境界線。

パディング

内側のパディング。

width

区切り幅。

margin

外側の余白

例 — 幅が430ピクセルで、両側に10ピクセルの垂直パディングがあり、上部に10ピクセルのマージンがあるグレーの区切り線を設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider { 
    border-top: 1px solid #aaaaaa; 
    margin-top: 10px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 430px; 
}

このページ