印刷 print

最終更新日： 2025年10月14日

作成対象：

Developer
User

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

プリントボタンの外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7print

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

margin-top

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

margin-left

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

幅

ボタンの幅。

の高さ

ボタンの高さ。

背景画像

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

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 プロパティ

不透明度

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

背景色

背景オーバーレイの色：

例 – 背景オーバーレイを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 プロパティ

パディング

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

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

パディング

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

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

幅

アイコンの幅：

の高さ

アイコンの高さ：

背景画像

アイコン画像：

background-position

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

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

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

フォントの重み

フォントの太さ：

フォントサイズ

フォントの高さ：

フォントファミリー

フォントファミリー：

パディング

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

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

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

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

上位

ヘッダーコンテナに対する垂直ボタンの位置。

右

ヘッダーコンテナに対する水平ボタンの位置。

幅

ボタンの幅：

の高さ

ボタンの高さ：

パディング

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

背景画像

各状態のボタン画像。

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 プロパティ

パディング

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

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

幅

ボタンの幅：

の高さ

ボタンの高さ：

カラー

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

背景色

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

NOTE

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

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

幅

ボタンの幅：

の高さ

ボタンの高さ：

カラー

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

背景色

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

NOTE

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

ボタンのCSS プロパティ

フォントの重み

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

フォントサイズ

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

フォントファミリー

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

行の高さ

ボタン内のテキスト高さ。垂直方向の整列に影響します。

ボックスシャドウ

ドロップシャドウ：

右余白

右ボタンのマージン。

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

例 – 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 プロパティ 

の高さ

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

背景色

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

マージン

外側のマージン：

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

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

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

パディング

インナーパディング：

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

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

パディング

行の内側のパディング。

例 – ダイアログボックスフォームを設定して、各行に10個のピクセルパディングを設定するには、次の手順を実行します。

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

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

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

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

幅

ブロック幅：

パディング

行の内側のパディング。

例 – コンテンツブロックを幅430 ピクセル、下に10 ピクセルのパディングを持つように設定するには：

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

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

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

フォントの重み

ラベルのフォントの重さ：

フォントサイズ

ラベルのフォントサイズ：

フォントファミリー

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

カラー

ラベルのテキストの色：

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

例 – すべてのラベルを9つのピクセルフォントを含むグレー、太字に設定するには：

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

入力コントロールはコンテナにラップされ、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

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

パディング左

インナーパディング：

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

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

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

幅

キャプション付きのラジオボタンの幅の合計。

カラー

キャプションテキストの色：

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

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

右余白

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

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

幅

数値ピッカーの幅。

マージン

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

例 – すべてのラジオボタンを、黒いテキスト、10 ピクセルの間隔、42 ピクセルの幅の数値ピッカーで150 ピクセル幅に設定するには、次の手順を実行します。

.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 プロパティ

境界線

区切り線を囲む。

パディング

インナーパディング：

幅

区切り線の幅：

マージン

外側の余白

例 – 両側に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

dynamic-media-developer-resources-help-aem-viewers-ref