No.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 … )
→値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
それを活用して
>webサイト印刷時に特定の画像のみを
^^^^^^^^^^^^^^にスタイルを適用させます。
またスタイルシートは、メディアごとに指定できます。
→媒体型 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
>webサイト印刷時に特定の画像のみを
^^^^^^^
も指定できます。
いずれにしても、大事なことはHTMLを開かなくてもわかるくらい、HTMLがきちんとマークアップされているかです。
No.2
- 回答日時:
たとえば、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ですので、実際の画像は印刷で想定されるピクセルの数倍の解像度にしないとなりません。このように印刷時に拡大する場合は、ブラウザ閲覧からの拡大率も掛け合わせますから、結構な解像度が必要です。
この回答へのお礼
お礼日時:2012/06/08 10:09
ありがとうございました。print.cssに画像のサイズ指定のクラスを記述して、対象の画像に指定すればいいのかなと思ってたんですが、そう簡単にもいかないんですね。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PDF 画像調整してスクショし保存した画像を印刷する方法 1 2022/03/31 18:42
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- Excel(エクセル) Excelでこういうカードの作り方 枠線の引き方や、挿入画像の拡大縮小など わかる方教えてください、 2 2022/05/03 21:22
- ホームページ作成・プログラミング 保存したホームページのファイルは何をしている推測できますでしょうか。 1 2023/08/18 15:50
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- Excel(エクセル) エクセルでキーリストからデータを取り出して1枚1枚印刷するには? 11 2022/06/27 09:52
- Windows 10 macからwindows11に変えてから印刷の速度が変えられなくなりました。 2 2023/05/31 20:49
- デジタルカメラ 録画した4K動画を、フルピクセルで再生したい 5 2023/05/10 00:05
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
最近、HTMLのヘッダーをIDで定...
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
HTML要素のid/class名の長さに...
-
divの入れ子を多用してページを...
-
dreamweaverのコード画面で波線。
-
CSSを多用すると遅くなる?
-
CSSに同じclass名がいっぱい‥。...
-
CSSのクラス名・ID名の指定でワ...
-
セルの高さが変化しない(ワー...
-
CSSの文
-
CSS, リンクの色を一部変えるに...
-
クラス内のテーブルが全体に適...
-
スタイルシートで、id属性の中...
-
style属性を使って擬似クラスを...
-
IEにおいて、CSSの記述順番によ...
-
フロートのクリアについて
-
同一行の行頭と行末に2つの要素
-
文字の右寄せの書き方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSに同じclass名がいっぱい‥。...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
サイトにjQueryが使用されてい...
-
liリストタグの背景色に色がつ...
-
CSSのホバーエフェクト
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートで、id属性の中...
-
htmlのid属性って必要なの?
-
透過背景を解除するにはどうす...
-
外部css定義したclassをht...
-
<span>で2重にかけているものを...
-
CSSのクラス名・ID名の指定でワ...
-
子孫セレクタの読み方をおしえ...
-
Bootstrap3でcontainerがずれる...
-
CSSが効かずどのように指定すれ...
-
brにクラスをつけてcssでdispla...
おすすめ情報