印刷

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

プリントボタンの外観は、以下の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プロパティ

opacity

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

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-重み付け

フォント重み付け

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クラスには、他のダイアログボックスのボタンと同じCSS設定を含めることができます。

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

ボタンのCSSプロパティ

font-重み付け

ボタンのフォント重み付け。

font-size

ボタンのフォントサイズ

font-family

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

line-height

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

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行ずつ入力されます。各行は、フォームコンテンツの一部(ラベルやテキスト入力フィールドなど)を担います。 フォームの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-重み付け

ラベルのフォント重み付け

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; 
}

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now