印刷

最終更新日: 2023-11-03
  • 作成対象:
  • Developer
    User

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

印刷ボタンの外観は、以下の 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;
}

このページ