印刷ツールは、コントロールバーに追加されるボタンと、ツールがアクティブになったときに表示されるモーダルダイアログボックスで構成されます。
印刷ボタンの外観は、以下の 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 |
外側の余白 |
例 — 両側に 10 ピクセルの垂直パディングを持ち、上部に 10 ピクセルのマージンを持つ、幅が 430 ピクセルのグレーのディバイダを設定するには、次のように記述します。
.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
border-top: 1px solid #aaaaaa;
margin-top: 10px;
padding-bottom: 10px;
padding-top: 10px;
width: 430px;
}