OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

透過gif画像の上に文章を重ねるには?

  • 困ってます
  • 質問No.185834
  • 閲覧数681
  • ありがとう数7
  • 気になる数0
  • 回答数7
  • コメント数0

お礼率 85% (6/7)

四角形でなく、変形した画像のぎりぎりまでhtmlで文字を入れたいのですが、透過gif加工した画像を使っても、文字が原画の四角形のところで分断されてしまいます。
透過済みのgif画像の透明部分に、htmlで書いた文字を重ねることはできないのでしょうか?
今はその画像の余白部分を拡大して、壁紙にしてhtml文字を重ねているのですが、機種によってかなりのズレが生じてしまい、何とかしたいのですが・・・。
どうか宜しくお願いします。
通報する
  • 回答数7
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.3
レベル6

ベストアンサー率 66% (2/3)

いろいろな方法で文章を載せることができます。
(1)htmlで枠のない表を作る。
(2)変形した画像を表の背景に貼り付ける。
(3)表に文字を挿入し、スペースや右寄せなどで調整する。
これで自由に文字が入るはずなんだけど。
お礼コメント
hihumi

お礼率 85% (6/7)

うわぁ~!有難うございます!
やってみたら、本当に画像と文字が重なりました!
でも、重なったのですけど、表の右端が文字の方に合わさって、画像が切れてしまいます。スペースで幅をつけようと思ったのですが、なぜか変更してくれません。
表自体のサイズをこちらで指定することは出来ますか?
投稿日時 - 2001-12-16 16:38:42
-PR-
-PR-

その他の回答 (全6件)

  • 回答No.2
レベル9

ベストアンサー率 31% (31/98)

画像中に文字を書き込む意外方法は無いと思います. 機種やブラウザのバージョン,設定等を限定して スタイルシートなどを使えば,ある程度は目的通りのことが できるかも知れませんが… ...続きを読む
画像中に文字を書き込む意外方法は無いと思います.
機種やブラウザのバージョン,設定等を限定して
スタイルシートなどを使えば,ある程度は目的通りのことが
できるかも知れませんが…
お礼コメント
hihumi

お礼率 85% (6/7)

有難うございます。
・・・スタイルシート?レイヤーと同じものですか?
でもそれを使って作ってもブラウザによっては機能しない、ということですよね・・・。ううーん、やっぱり難しい事をやろうとしているのでしょうか・・・。
投稿日時 - 2001-12-16 17:30:40
  • 回答No.1
レベル11

ベストアンサー率 31% (76/239)

いわゆる回り込み指定が出来ませんか?ってことでしょうか。 GIF画像は、透過していようがしてなかろうが、四角形の画像です。 ですので、普通に表示している限りは無理だと思われます。 もしかしたら、レイヤーとかを使えばいいのかもしれませんが… そこら辺は詳しくないのでなんとも…… ...続きを読む
いわゆる回り込み指定が出来ませんか?ってことでしょうか。

GIF画像は、透過していようがしてなかろうが、四角形の画像です。
ですので、普通に表示している限りは無理だと思われます。

もしかしたら、レイヤーとかを使えばいいのかもしれませんが…
そこら辺は詳しくないのでなんとも……
お礼コメント
hihumi

お礼率 85% (6/7)

早々の回答、ありがとうございました!
透過していても四角なんですね~。
ちょっと透過加工を過信していました(笑)
投稿日時 - 2001-12-16 17:27:43
  • 回答No.4
レベル6

ベストアンサー率 66% (2/3)

もう一つの方法は、ジフアニメを使う方法です。 ジフ画像と文字の組み合わせなら、 いつでも文字を変更できますから、 htmlで書いたようにみえるはずです。 ...続きを読む
もう一つの方法は、ジフアニメを使う方法です。
ジフ画像と文字の組み合わせなら、
いつでも文字を変更できますから、
htmlで書いたようにみえるはずです。
お礼コメント
hihumi

お礼率 85% (6/7)

ええと・・・ジフアニメ・・・というのは?
フォトショップ6.0を持っているので、たぶんジフアニメはできると思うのですが、使い方がわからなくて・・・;よろしければ、それの作り方を詳しく教えてくださると嬉しいです!すみません、何度も・・・。
上の方の教えてくださった方法で出来たのですが、やはりブラウザによって機能しない、というのは少し不安なので、宜しくお願いします。

あっ、そう、すみません、下のお礼のところで言っていた表サイズの指定、調べてみたらわかりました。でもやはり、背景に指定するとパターンの繰り返しが起こってしまうので、どちらにしろ余白部分を拡大しなければいけないようです;
投稿日時 - 2001-12-16 17:24:53
  • 回答No.5
レベル14

ベストアンサー率 68% (2350/3407)

<DIV style="width : (数字)px;height : (数字)px;top : (数字)px;left : (数字)px; position : absolute; z-index : 2;" id="Layer2">文章</DIV> <DIV style="width : (数字)px;height : ...続きを読む
<DIV style="width : (数字)px;height : (数字)px;top : (数字)px;left : (数字)px; position : absolute; z-index : 2;" id="Layer2">文章</DIV>
<DIV style="width : (数字)px;height : (数字)px;top : (数字)px;left : (数字)px; position : absolute; z-index : 2;" id="Layer2"><IMG src="画像ファイル名"></DIV>
HTMLソース編集で,上のようにするとたぶん,重なると思います。
でも,ブラウザによっては,機能しない場合もあります。
お礼コメント
hihumi

お礼率 85% (6/7)

あっ!できました!重なりました~~!ありがとうございます~~!!
すごい!これが下の方がおっしゃっていたレイヤーのHTMLですね?

ほんとうに有難うございました~!!
投稿日時 - 2001-12-16 17:02:42
  • 回答No.6
レベル6

ベストアンサー率 66% (2/3)

表に挿入する方法のタグは、 <TABLE><TBODY><TR> <TD width="250" height="200" background="○○.gif" align="right" valign="bottom">こんにちは</TD> ...続きを読む
表に挿入する方法のタグは、
<TABLE><TBODY><TR>
<TD width="250" height="200" background="○○.gif" align="right" valign="bottom">こんにちは</TD></TR></TBODY></TABLE>
で右下隅に「こんにちは」と表示されます。
大きさはwidth="250" height="200"の数字を変更する。

応用すれば、レイアウト枠で自由な位置に貼り付け可能。
<DIV style="width : 250px;height : 200px;top : 150px;left : 400px;
position : absolute;
z-index : 1;
visibility : visible;
background-image : url(○○.gif);
" id="Layer1" align="left"><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
こんにちは</DIV>
これで画面の上から100ピクセル左から400ピクセル
の位置に立て200横250のレイアウトが作られ、
左下に「こんにちは」と表示されます。

正式にジフアニメを作るならカナダ・アルケミニー社ですが、ホームページビルダーのウェブアニメーションウィザードの文字アニメーションを選択すれば簡単。
フォトショップがお勧めという人もいますが、まだ利用したことがありません。

まだ数少ない機種しか触ってないので、全プラウザが大丈夫かどうかは自信がないけれど、
「見えない」とか「画像とずれている」と苦情を言われたことはありません。

最後にホームページビルダー学生価格がお勧めですよ!
お礼コメント
hihumi

お礼率 85% (6/7)

ありがとうございました!
重ねる文章を短くカットして、何とか調節できました。
何度も丁寧に教えてくださって本当にありがとうございました~!
投稿日時 - 2001-12-17 15:05:40
  • 回答No.7
レベル6

ベストアンサー率 66% (2/3)

レイアウト枠について言い忘れていました。 レイアウト枠の中でのズレはありませんが、 壁紙や本文との重なりは、 見るプラウザによって多少異なります。 同じウインドウズソフトでも、 ノートとデスクトップで違いますし、 サーバーのコマーシャル位置によっても変化します。 もう一つ思いつきましたが、アプレットやスクリプトでも 画像の上に文字がかけます。 アプレットは多少煩雑ですが、スクリプトは ...続きを読む
レイアウト枠について言い忘れていました。
レイアウト枠の中でのズレはありませんが、
壁紙や本文との重なりは、
見るプラウザによって多少異なります。
同じウインドウズソフトでも、
ノートとデスクトップで違いますし、
サーバーのコマーシャル位置によっても変化します。

もう一つ思いつきましたが、アプレットやスクリプトでも
画像の上に文字がかけます。
アプレットは多少煩雑ですが、スクリプトは簡単です。
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ