ホームページの作成で印刷用スタイルシートを作成しているのですが、タイトルを画像で表現しているのですが、その画像は表示させずに、代わりにaltに入っている文字を表示、もしくは、何か別の方法でも結構なのですが、テキストでタイトルを印字させたいと思っているのですが、どのような方法があるのでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2008/06/15 10:24:24
  • 終了:2008/06/22 10:25:02

回答(2件)

id:nikkyororo No.1

nikkyororo回答回数2ベストアンサー獲得回数02008/06/15 13:04:12

ポイント35pt

タイトル画像をHTML内のimgタグで表示する方法ではないので、お望みの方法かわかりませんが…

タイトルをHTMLにh1やh2タグので囲ってテキストで表示し、

スタイルシートでタイトルのバックグラウンド画像としてタイトルの画像を表示。

h2.画像の入ってるクラス {

background: src(タイトル画像);

text-indent: -9999px;

 width: 幅;

height: 高さ;

}

みたいな感じに。

印刷用スタイルシートには、タイトル部分のバックグラウンド画像をやめて

普通にテキストが現れるようにします。

その際、周りが崩れないように高さとか幅だけはきれいに指定しておけば

いけるのではないかと思います。


CSSで画像を表示するためにテキスト飛ばすのが嫌な方もおられるそうなので

もしそうだったら、ごめんなさい。

id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332008/06/15 13:15:42

ポイント35pt

代わりにaltに入っている文字を表示」という条件が難しいですね。以下は完全解決ではないので、ポイント不要で結構です。


スタイルシートで

@media print {
  img { visibility: hidden; }
}

と指定すれば、印刷時のみ img タグで指定される画像を表示できないようにするところまではできます。


Opera や FireFox では、content プロパティが使え、attr(alt) で alt 属性の内容を付加できるのですが、img タグには対応していないようです。


img を alt に置換するようなスクリプトで対応するしかないかもしれません。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません