ホームページの画像の部分をhoverを使って、画像切り替えしているところがあります。
当然、その部分は印刷されないのですが、hoverなしの画像の状態で印刷したいと思っ
ております。
このような場合、どのような処理にすれば、screen上ではhoverがきき、印刷もされるよ
うに出来るのでしょうか。
以下は現在のソースです
【HTML】
<div class="header">
<a href="./" id="hogehoge">Top</a>
</div>
【CSS】
a#hogehoge {
display: block;
width: 900px;
height: 210px;
text-indent: -1000px;
background-image: url("../images/main/img_header.jpg");
}
a#hogehoge:hover {
background-position: bottom left;
}
No.3ベストアンサー
- 回答日時:
具体的な例を
<div class="header">
<h1>ページタイトル</h1>
<p class="goTop"><a href="/">トップへ</a></a>
・・・
</div>
だったとします。A要素はブロックに入ります。<div>だと文法的には合致していますが、文書構造上はおかしいので・・
p.goTop{
width:900px;height:210px;
position:absolute;top:0;left:0;
}
div.header h1{
margin-top:210px;
}
p.goTop a{
display: block;
width: 100%;height:100%;
background-image: url("../images/main/img_header.jpg") top left no-repeat;
text-indent:10em;
overflow:hidden;
}
p.goTop a:hover {
background-position:bottom left;
}
・・・
@media print{
p.goTop a:before{
content:url("../images/main/img_header_bottom.jpg");
position:absolute;top:0;left:0;
}
}
以上、試してません
なお、リキッドデザインで中央に表示したいならpを配置した後、a要素を内部でmargin:0 autoですかね。
No.2
- 回答日時:
>back-groundで設定しているため、画像が消えてしまうので、どの様にすれば、表示できるかと思っております。
背景はブラウザの印刷設定で背景を印刷を選択すれば良いのですが、そうすると印刷したくない背景まで印刷されてしまいます。
特にmedia="screen"で背景黒、前景白の設定しにしていて、印刷が想定されるページにはprintメディア用のスタイルシートが必要です。
背景のサイズが印刷用になっていないとうまく行きませんが、内容の追加プロパティを利用します。(:before,:after擬似要素--詳細度はタイプセレクタと同じです)と組み合わせて、position:relativeで配置すれば良いでしょう。
示されたスプライトを使う場合は、その画像では不可能だと思います。表示したい部分を切り取った画像を用意すると良いでしょう。
なお、a#hogehogeは、ちょっと・・いちいちa要素にidをつけるとHTML/CSSの変更が出来なくなり、
・HTMLは文書構造だけ記述するのでシンプル
・スタイルシートを書き換えるだけでデザインを変えられる
という最大の利点を失うことになります。
a[href="/]:hover{background-image:url() left bottm;}
印刷用
a[href="/"]:before{content:url();position:absolute;top:0;left:0;z-index:-10;}
とか・・
No.1
- 回答日時:
単純にmedia="print"
のスタイルシートを書けば良いだけですが・・・
私の例ですが
<link rel="stylesheet" type="text/css" href="./styleSheet/Preferred.css">
<link rel="stylesheet" type="text/css" media="screen,projection,tv" href="./styleSheet/screen.css">
<link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="/styleSheet/HightCont.css" title="ハイコントラスト">
<link rel="styleSheet" type="text/css" media="print,handheld" href="./styleSheet/print.css">
とか・・・
@media screen{screen用のスタイルシート}
@media print{印刷用スタイルシート}
とか・・に分けても良いでしょう。
screen用のスタイルシートとprint用のスタイルシートは、本来別物です。ブラウザが持つデフォルトのスタイルシートも異なるように・・印刷を想定されるページには、必ず印刷用スタイルシートを用意しておきましょう。
[例]
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
表示メニュー→スタイルシートで色々なスタイルシートが適用できますが、どれを選択しても印刷には不向きです。印刷用は[印刷プレビュー]で見たらわかるように、URLまで印刷されます。
この回答への補足
早速のご回答有難うございます。
おっしゃる通り、print用のcssを書けばよいのは分かっているのですが、ソースにあるようなhoverの部分をどのように書けばよいのかわからず、質問しました。
back-groundで設定しているため、画像が消えてしまうので、どの様にすれば、表示できるかと思っております。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
EXCEL VBA 印刷プレビューダイ...
-
PDFファイルを開かずに印刷...
-
インラインフレームの印刷について
-
EXCEL VBAでPDFファイルを開い...
-
VBによる改頁行の罫線変更
-
phpについてですかね、印刷ボタ...
-
クリスタルレポートでプレビュ...
-
Excel VBAで文字列の可視長を得...
-
ページ内にスクロールバーのあ...
-
PageBreaks.Countと印刷範囲の...
-
C# 2010 PrintPreviewDialogか...
-
印刷するときにテキストボック...
-
ヘッダやフッタの印刷をしたくない
-
印刷用ページを作る際のCSSの使...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
フォルダ内の写真を画面幅にあ...
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
PDFファイルを開かずに印刷...
-
EXCEL VBA 印刷プレビューダイ...
-
ページ内にスクロールバーのあ...
-
Excel VBAで文字列の可視長を得...
-
EXCEL VBAでPDFファイルを開い...
-
Excel VBA 「印刷中」メッセー...
-
ACCESS VBA レポートプレビュー...
-
コマンドプロンプトでフォルダ...
-
excelにて各シートの総印刷ペー...
-
phpについてですかね、印刷ボタ...
-
C# 印刷可能領域と余白範囲...
-
サイト全体を縮小して印刷する...
-
Accessレポートでの改ページ
-
印刷時ヘッダーとフッターを挿入
-
WebBrowserコントロールでのPri...
-
クリスタルレポートでプレビュ...
-
WEBでのフォーム入力後の印刷
-
横に長いWeb画面を一枚の用紙に...
-
ページ内の画像印刷について
-
ACCESSで印刷プレビューをした...
おすすめ情報