人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: machakichi
●カテゴリ:コンピュータ インターネット
✍キーワード:スタイルシート タイトル テキスト ホームページ 作成
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● nikkyororo
●35ポイント

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

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

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

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

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

text-indent: -9999px;

width: 幅;

height: 高さ;

}

みたいな感じに。

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

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

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

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


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

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


2 ● pahoo
●35ポイント

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


スタイルシートで

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

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


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


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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ