- ベストアンサー
webサイト印刷時に特定の画像を縮小/拡大する方法
webサイト印刷時に特定の画像のみを縮小/拡大する方法はないでしょうか？ プリントCSSに何か追記すればいいのでしょうか？ よろしくお願いいたします。
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞対象の画像に指定すればいいのかなと思ってたんですが、 発想の転換が必要です。 HTMLは、文書構造をマークアップする方式です。Hyper Markup Language 一方スタイルシートは、その文書をどのように表現するか--プレゼンテーション--を指定するものです。 この二つは、独立している(文書構造とプレゼンテーション)し、かつ関連(文書構造を基にプレゼンテーションを指定する)しています。 特定の画像と言う場合、通常は[一意]という意味であるときと、[あるグループに属する]や[特定の要素]という二つの場合があります。 スタイルシートでは、プレゼンテーションを適用させたい要素(この場合、画像)をセレクタ(選択子)を使って指定します。 その文書内の一意の画像--一意セレクタ その要素にidをつけて、#(id名) 特定のグループ--半角スペースで区切られたリストの中にそれを含むもの。.(class名) 属性セレクタ--属性名,属性値など [title="テスト"]、[class~=rest](classセレクタと同じ)、。。。 子孫セレクタ、子セレクタ、隣接セレクタ、擬似クラス、擬似要素・・ 文書構造さえ、しっかりとマークアップされていれば＝＝言い換えるとHTMLがきちんと文書構造がマークアップされていると、 body>div.section>p img.figure.main{display:block;width:480px;height:auto;} という風に、指定できるということです。意味は 本文の子供の汎用ブロック内の子供段落内に含まれるfigureクラスとmainクラスに属する画像 <body> <div class="section"> <p> <img class="figure main"> ですね。当然ですが、 コラム(<div class="aside">やフッター<div cass="footer">内には適用されませんし、<img>が<strong>で囲まれていても適用されます。 このセレクタや継承--カスケーディング--はカスケーディングスタイルシートの最も重要な部分です。 →セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) →値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) それを活用して ＞webサイト印刷時に特定の画像のみを ^^^^^^^^^^^^^^にスタイルを適用させます。 またスタイルシートは、メディアごとに指定できます。 →媒体型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/media.html ) ＞webサイト印刷時に特定の画像のみを ^^^^^^^ も指定できます。 いずれにしても、大事なことはHTMLを開かなくてもわかるくらい、HTMLがきちんとマークアップされているかです。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たとえば、HTMLが次のようなものだったとします。 [HTML]HTML5の場合は、<div class="figure|section">を<figure|section>とする。 <div class="section"> <div class="figure"> <img src="./fig/1.jpg" width="240" height="180" alt="印刷時イメージ-印刷時にはfloatではなく段落内に表示される"> </div> <p> webサイト印刷時に特定の画像のみを縮小/拡大する方法はないでしょうか？プリントCSSに何か追記すればいいのでしょうか？よろしくお願いいたします。 </p> </div> [CSS]screen.css div.section div.figure{width:260px;float:right;text-align:center;} [CSS]print.csss div.section div.figure{width:100%;float:none;} div.section div.figure img{display:block;width:96%;margin:5px auto;} とか、セレクタは、どの(どれらの)画像に適用させるかを書きます。上記の場合、div.section内のすべてのdiv.figureについて適用されます。 なお、印刷は高速印刷でも200dpiですので、実際の画像は印刷で想定されるピクセルの数倍の解像度にしないとなりません。このように印刷時に拡大する場合は、ブラウザ閲覧からの拡大率も掛け合わせますから、結構な解像度が必要です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
印刷用スタイルシートを作成しましょう。 印刷が想定されるページは、印刷用スタイルシートは必ず用意しましょう。
補足
printcssの設定はすでにやっています。どんな記述方法をすればいいのでしょうか？
お礼
ありがとうございました。print.cssに画像のサイズ指定のクラスを記述して、対象の画像に指定すればいいのかなと思ってたんですが、そう簡単にもいかないんですね。。