四角形でなく、変形した画像のぎりぎりまでhtmlで文字を入れたいのですが、透過gif加工した画像を使っても、文字が原画の四角形のところで分断されてしまいます。
透過済みのgif画像の透明部分に、htmlで書いた文字を重ねることはできないのでしょうか?
今はその画像の余白部分を拡大して、壁紙にしてhtml文字を重ねているのですが、機種によってかなりのズレが生じてしまい、何とかしたいのですが・・・。
どうか宜しくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (7件)

いろいろな方法で文章を載せることができます。


(1)htmlで枠のない表を作る。
(2)変形した画像を表の背景に貼り付ける。
(3)表に文字を挿入し、スペースや右寄せなどで調整する。
これで自由に文字が入るはずなんだけど。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/12/16 16:38

レイアウト枠について言い忘れていました。


レイアウト枠の中でのズレはありませんが、
壁紙や本文との重なりは、
見るプラウザによって多少異なります。
同じウインドウズソフトでも、
ノートとデスクトップで違いますし、
サーバーのコマーシャル位置によっても変化します。

もう一つ思いつきましたが、アプレットやスクリプトでも
画像の上に文字がかけます。
アプレットは多少煩雑ですが、スクリプトは簡単です。
    • good
    • 0

表に挿入する方法のタグは、


<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のレイアウトが作られ、
左下に「こんにちは」と表示されます。

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

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

最後にホームページビルダー学生価格がお勧めですよ!
    • good
    • 0
この回答へのお礼

ありがとうございました!
重ねる文章を短くカットして、何とか調節できました。
何度も丁寧に教えてくださって本当にありがとうございました~!

お礼日時:2001/12/17 15:05

<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ソース編集で,上のようにするとたぶん,重なると思います。
でも,ブラウザによっては,機能しない場合もあります。
    • good
    • 0
この回答へのお礼

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

ほんとうに有難うございました~!!

お礼日時:2001/12/16 17:02

もう一つの方法は、ジフアニメを使う方法です。


ジフ画像と文字の組み合わせなら、
いつでも文字を変更できますから、
htmlで書いたようにみえるはずです。
    • good
    • 0
この回答へのお礼

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

あっ、そう、すみません、下のお礼のところで言っていた表サイズの指定、調べてみたらわかりました。でもやはり、背景に指定するとパターンの繰り返しが起こってしまうので、どちらにしろ余白部分を拡大しなければいけないようです;

お礼日時:2001/12/16 17:24

画像中に文字を書き込む意外方法は無いと思います.


機種やブラウザのバージョン,設定等を限定して
スタイルシートなどを使えば,ある程度は目的通りのことが
できるかも知れませんが…
    • good
    • 0
この回答へのお礼

有難うございます。
・・・スタイルシート?レイヤーと同じものですか?
でもそれを使って作ってもブラウザによっては機能しない、ということですよね・・・。ううーん、やっぱり難しい事をやろうとしているのでしょうか・・・。

お礼日時:2001/12/16 17:30

いわゆる回り込み指定が出来ませんか?ってことでしょうか。



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

もしかしたら、レイヤーとかを使えばいいのかもしれませんが…
そこら辺は詳しくないのでなんとも……
    • good
    • 0
この回答へのお礼

早々の回答、ありがとうございました!
透過していても四角なんですね~。
ちょっと透過加工を過信していました(笑)

お礼日時:2001/12/16 17:27

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QWebでgif画像が表示されません。

基本的なことだと思いますが、教えてください。
http://www.cgi-down.com/cgi/g_counter.php
上のCGIのカウンターをためしに設置しようとしてみて
画像が×印で表示されてうまくいかず、以下のようにindex.htmlに
<img src="../cgi-bin/image/0.gif">
<img src="127.0.0.1/cgi-bin/image/0.gif">
などと実際にGIF画像を表示させてみようとしたのですがそれでもうまくいきません。
場所は以下のようになっていて
Linux上のファイラー上ではGIF画像は正しく表示されています。
# ls /var/www/html/index.html
/var/www/html/index.html
# ls /var/www/cgi-bin/image/
0.gif 1.gif 2.gif 3.gif 4.gif 5.gif 6.gif 7.gif 8.gif 9.gif Thumbs.db

httpd.confでは
ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
としておりExecCGIも有効にしています。
よければ教えてください。

基本的なことだと思いますが、教えてください。
http://www.cgi-down.com/cgi/g_counter.php
上のCGIのカウンターをためしに設置しようとしてみて
画像が×印で表示されてうまくいかず、以下のようにindex.htmlに
<img src="../cgi-bin/image/0.gif">
<img src="127.0.0.1/cgi-bin/image/0.gif">
などと実際にGIF画像を表示させてみようとしたのですがそれでもうまくいきません。
場所は以下のようになっていて
Linux上のファイラー上ではGIF画像は正しく表示されています。
# ls /var/www/html/index.htm...続きを読む

Aベストアンサー

よく考えたらScriptAliasディレクティブですよね。

>ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"​

ScriptAliasで指定した/var/www/cgi-binディレクトリ配下にあるファイルはスクリプトファイルだと判断され、画像ファイルも実行しようとしてエラーになるようなので、/var/www/cgi-binディレクトリとは別の場所に画像ファイルを置いてそちらを参照するようにするのはどうでしょうか?

Q透過処理をしたGIFファイル画像の周りのギザギザ・・・・

いつも助かってます!今回も宜しくお願いいたします。
HPビルダーでHPを作成してます。透過処理をしたGIFファイルを開いて確認するとそれなりに綺麗に見えるのですが、ブラウザで見ると周囲がギザギザになって非常に見苦しいものになってしまいます。
この「ギザギザ」は処理できるとどこかで読んだ記憶があるのですが、どなたかご存知ではないでしょうか。
宜しくお願いいたします。

Aベストアンサー

アンチエリアシングを有効にして保存した場合、
ギザギザを目立たなくさせることができます。
が、透過GIFの場合は透明色に指定した色と背景色を
工夫しないと色が残ることがあります。

参考URL:http://www.geocities.co.jp/SiliconValley/4634/cg_gif.html

QGIF画像の著作権

JPEG,BMPはOK

GIFは著作権にうるさいからと良く聞きますが、
どういう使い方をすると著作権にかかわるのでしょうか?


1.GIFを表示したホームページ
2.タイトルにGIFを表示しただけのコンピューターソフト
3.GIF自体を使える(GIF編集)コンピューターソフト

※GIFを使ってどのようなものを
作った辞典で著作権なのでしょうか?

Aベストアンサー

著作権とは、画像などの著作物を作成した人の持つ権利です。

GIFという画像形式は、著作権ではなく特許権(画像を圧縮・表示する技術)で守られていて、会社がその管理を厳重にしていて、その形式のファイルを扱うことができるソフトに関しては、ライセンス料(利用料)を要求しているので、いろいろと煩くなっています。

ライセンス料を支払っているソフトを使って画像を作成したり、表示したりすることは何の問題もありません。

Qhtml初心者です。画像サイズについて。 テーブルの中に、文字と、画像リンクを貼っているのですが画像

html初心者です。画像サイズについて。
テーブルの中に、文字と、画像リンクを貼っているのですが画像と文字がズレます!泣
画像というより、文字が下にずれます。

文字<a href=”リンク先”><IMG src=”画像URL” width=”30” height=”40” border=”0”>

3×3のテーブルの中に、上記のコードが9つあります。画像アイコンは2種類で、もう一つは
width=”25” height=”20” border=”0”>です。
アイコンの横と幅が二つそれぞれ違うのでズレてるようです。しかし双方を同じくらいのサイズにしようとするとこうなります。ちなみにフリー素材を拾ってきました。
同じサイズにするにはどうすれば…
ペイントでピクセル値をいじっても、元のサイズが双方違うから結局一緒ですよね?
元が同じサイズの画像をとるしかないでしょうか?

Aベストアンサー

単純にスタイルシートで指定すればよい
img[src=”画像URL”]{height:80px;width:auto;}
位置は、position:relative:top:5px;とかで好きに変えればよい。

そもそも、tableを使って配置するのは問題ですが、それはおいておいて・・

alignなんて16年前から非推奨の代表ですから、そんなもの使わない。

Q画像形式のGIFについて教えてください。

画像形式のGIFについて教えてください。

GIFには、GIF32、GIF64、GIF128

と言うのがありますが、この中で、一番高画質なのは、どの形式ですが。

あと、イラストレーターで保存する場合、

ディザあり、なし、を選択できますが、

高画質で保存する場合、あり、なし、どちらを選択すればよいのでしょうか。

Aベストアンサー

■GIFには、GIF32、GIF64、GIF128と言うのがありますが、この中で、一番高画質なのは、どの形式ですが。この中で、一番高画質なのは、どの形式ですが。
>>このなかで一番色の多いのが128色です。


■ディザあり、なし、を選択できますが高画質で保存する場合、あり、なし、どちらを選択すればよいのでしょうか。
>>低画質で保存して見難いときは、ディザで新聞写真のようにドット化して保存します。

Q背景画像の上に透過GIF背景をのせる方法

はじめまして。

メモ帳にHTMLタグ打ち込みでWEBページを作ってるのですが、
bodyで背景画像を指定し、その上に透過GIFをおき、さらにその上にテキストを表示させるにはどうしたらよいのでしょうか。
具体的には、「テキストを表示させるブロック(tableやdiv)の部分」を半透明の透過GIFをフィルターみたいにかぶせて、その上に書くテキストを見やすくさせたい、という動機です。
divのなかのstyle、またはtableでbackgroundを定義しても、もとのbodyの背景が反映されなくなってしまうのですよね。
一応、自分で考えた策としては
・ブロックの背景そのものを、ある程度薄い色に変えた画像を用意してそれをtableの背景にする
というものがあるのですが、これはやはりつなぎ目の部分でズレてしまって見栄えがあまりよくないのです。

かなり細かいところにこだわりすぎな感じもするんですが、
ぜひとも叶えたいのでどなたか方法をご存知でしたら教えていただきたいと思います。
よろしくお願いします。

Aベストアンサー

ブラウザの環境にある程度左右されない方法として、
私の場合、逆に非常にベタなやり方で同じ効果を狙ってページを作っています。
透明部分と白(画によっては背景画像のカラーと同系の薄い色が良いかと)の
市松模様GIFを作って、それをtable背景にしています。

QGIF フラッシュ その他の技術?

ある一つの大きなGIF画像があるとします。
そのGIF画像上には、
「左右どちらかの道に進んでください」と記載されているとします。
さらにその大きなGIF画像上には、小さな「右」「左」というGIF画像がそれぞれ貼り付けてあって、
質問の回答として、「右」をクリックしたときに(あるいは「左」をクリックしたときに)
大きなGIF画像がきりかわる(つまり別のGIF画像が現れる
)。

上記のようなことをしたいのですが、フラッシュを使わないとできないですか?

Aベストアンサー

GIFは設定された時間だけ設定された画面を繰り返して表示する事しかできません。
したがって、クリックしても何の感知もしません。

ただし、htmlでGIF画像をクリックして、新しいページ(html)を表示させる事ができます。
htmlでページが変わっても良ければGIF画像だけでも可能でしょう。

QHTMLの画像をGIFにかえる方法

 最近自分のHPをつくりはじめたのですが、まったくの初心者でちんぷんかんぷんです。HTMLの画像をはりたいのですが、gif形式でないとはれないようなのです。それでHTMLの画像をGIFに変える方法があれば教えていただきたいのですが・・・過去ログや、検索サイトで検索してみても、基礎が理解できていないので、よくわかりませんでした。そんな私にもわかるように、これでもかっっ!ていうぐらい丁寧にわかりやすく、教えていただけるとうれしいです。

Aベストアンサー

そのページをブラウザーで表示させて、
そのウインドウをスクリーンキャプチャーツールを使って
画像に変換します。

「スクリーンキャプチャー」というキーワードで探されるといいと思います。

ペイントツールがあれば、
ブラウザーで[Alt]+[PrtSc]、
ペイントツールで[貼り付け]をすればできるかも。

参考URL:http://www.forest.impress.co.jp/capture.html

QGIF動画とGIF動画を繋げる方法

GIF動画の作成について質問です。
数本作ったGIF動画を繋げて一本の長いGIF動画にしたいと思っています。1秒につき10枚×10数秒程度のものを数本連結するという感じです。
GIF動画同士をつなげて一本にする方法が分からず検索してみると、ムービーメーカーについてやフリーソフトの紹介をいくつか見つけたのですが、それは最終的にはGIF動画という形にはならないようで・・・。
初心者にも簡単に出来る良い方法がありましたら教えてください。よろしく御願いします。

Aベストアンサー

GIFアニメーション作成ソフト 「Giam」がお勧めです。
まず1つ読み込んで、「コマの付け足し」で別のGIFアニメを読み込みます。
これを繰り返して、最後に保存すればOK。
http://homepage3.nifty.com/furumizo/giamd.htm

参考URL:http://homepage3.nifty.com/furumizo/giamd.htm

QIEブラウザはpngの透過画像は透過にならないのが仕様でしょうか?

IEブラウザはpngの透過画像は透過にならないのが仕様でしょうか?

IE6でpngの透過画像を表示させると、透過になっていませんでした。
FireFoxやサファリは透過になります。
仕方がないので、画像をgifの透過にしましたが、
このようにブラウザによって、gif, jpeg, pngの仕様は異なりますか?
もうIE6は見捨てたくなります。

Aベストアンサー

透過PNGをサポートしていないってだけ。
ただ、表示させるテクニックもあるので「透過PNG IE6」で検索して下さい。

ウチでは面倒なので、透過する場合はGIFを使います。

確かに、IE6撲滅運動もあるようですが、
まだ、IE6シェアが10%程度は有ると思いますので、
少なくとも、あと3年程度は対応(CSSなど)するつもりですが。

透過以外でも画像の色が違うとか、
制作時のカラープロファイルも考慮しましょう・・・


人気Q&Aランキング