ドキュメントDynamic Media ビューアリファレンスガイド

印刷 print

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 開発者
  • ユーザー

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

印刷ボタンの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7print

印刷ボタンの CSS プロパティ

margin-top
コントロールバーの上部からのオフセット。
margin-left
左側の次のボタンまでの距離。このボタンが行内の最初のボタンの場合は、コントロール バーの左側。
幅
ボタンの幅。
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる 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 プロパティ

opacity
背景オーバーレイの不透明度。
の背景色の
背景のオーバーレイカラー。

例 – 背景オーバーレイを 70% の不透明度でグレーに設定するには：

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

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

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

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

border-radius
ダイアログボックスの境界線の半径。
の背景色の
ダイアログボックスの背景色

例 – ダイアログボックスの背景をグレーに設定するには：

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

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

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

アイコンとタイトルテキストは、次のように制御される追加のコンテナにラップされます。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

ダイアログラインの CSS プロパティ

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

ヘッダーアイコンは、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

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

幅
アイコンの幅。
高さ
アイコンの高さ。
background-image
アイコン画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

ヘッダーのタイトルは、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

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

フォントの太さの
フォントの線幅。
font-size
フォントの高さ。
フォントファミリーの
フォントファミリー。
padding
内部テキストのパディング。

「閉じる」ボタンは、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

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

天
ヘッダーコンテナに対する垂直方向のボタンの位置。
right
ヘッダーコンテナに対する水平方向のボタンの位置。
幅
ボタンの幅
高さ
ボタンの高さ。
padding
ボタンの内側のパディング。
background-image
各状態のボタン画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる 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 プロパティ

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

「キャンセル」ボタンは、次の CSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

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

幅
ボタンの幅
高さ
ボタンの高さ。
color
各状態のボタンのテキストの色。
の背景色の
各状態のボタンの背景色
NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

「印刷に送信」ボタンは、次の CSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

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

幅
ボタンの幅
高さ
ボタンの高さ。
color
各状態のボタンのテキストの色。
の背景色の
各状態のボタンの背景色
NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

フォントの太さの
ボタンのフォントの線幅。
font-size
ボタンのフォントサイズ。
フォントファミリーの
ボタンのフォントファミリー。
line-height
ボタン内のテキストの高さ。 垂直方向の位置揃えに影響します。
ボックスの影の
ドロップシャドウ。
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 プロパティ ​

高さ
メイン ダイアログ ボックス領域の高さです。
の背景色の
メインのダイアログボックス領域の背景色。
margin
外側余白。

例 – メインダイアログ領域の高さが自動的に計算され、10 ピクセルの余白があり、背景が白くなるように設定するには：

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

すべてのフォームコンテンツ（ラベルや入力フィールドなど）は、次の CSS クラスセレクターで制御されるコンテナ内に存在します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

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

padding
内側のパディング

例 – フォームコンテンツの 10 ピクセルのパディングを設定するには：

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

ダイアログボックスのフォームは、1 行ごとに入力されます。各行には、フォームコンテンツの一部（ラベルやテキスト入力フィールドなど）が含まれます。 単一のフォーム行は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

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

padding
内側の行のパディング。

例 – 各行に 10 ピクセルのパディングを含むようにダイアログボックスフォームを設定するには：

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

ダイアログコンテンツのブロックのサイズは、次の CSS クラスセレクターで制御されます。

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

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

幅
ブロック幅。
padding
内側の行のパディング。

例 – 幅 430 ピクセルで、下部に 10 ピクセルのパディングを含むコンテンツブロックを設定するには：

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

ダイアログボックスのフォーム内のすべての静的ラベルは、次の CSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

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

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

フォントの太さの
ラベルのフォントの線幅。
font-size
ラベルのフォントサイズ。
フォントファミリーの
ラベルのフォントファミリー。
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 プロパティ

幅
キャプション付きのラジオボタンの合計幅。
color
キャプションのテキストの色。

ラジオボタンとそのキャプションの間の間隔は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

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

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

印刷範囲選択の数値ピッカーは、次の CSS クラスセレクターで制御します

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

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

幅
数値ピッカーの幅。
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 プロパティ

境界線
ディバイダーの周りの境界線。
padding
内側のパディング
幅
ディバイダーの幅。
margin
外側余白

例 – 両側に 10 ピクセルの垂直方向の余白を持ち、上部に 10 ピクセルの余白を持つ 430 ピクセル幅のグレーの区切り文字を設定するには：

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8