イラストの中に文字を入れる方法

質問

ただいま、ＨＰを作成中の初心者ですが、
イラストの中に文字を入れる方法がわからなくて困っています。

たとえば、ふきだしをペイントで書いて、その中に文章を入れるって
いうことがやりたいのですが。

わかる方、誰かご教授ください。

回答No.4

noname#83877

間違いがありました。

tex-indent

ではなく

text-indent

でした。

回答No.3

noname#83877

＞吹き出しからはみ出てしまうという現象が起きてしまいますか？
起きます。そしてデザインによっては対応できないということも有ります。
長方形を主体としたデザイン(角丸でもOK)ならはみ出さないようにできますが、円を主体としたデザインはどうしてもはみ出すのを回避できません。
この場合は

<p id="Balloon">吹き出し</p>

#Balloon {
width:auto !important;
width:150px; /* 画像の幅を指定 */
min-width:150px; /* 画像の幅を指定 */
height:auto !important;
height:100px; /* 画像の高さを指定 */
min-height:100px; /* 画像の高さを指定 */
background:url(image.gif) no-repeat 0 0;
line-height:5; /* テキストの垂直位置を指定 */
tex-indent:20px; /* テキストの水平位置を指定 */
white-space:nowrap;
}

のように指定すれば良いと思います。
このサンプルは吹き出しの形が円形で中が一行のテキストの場合なので、デザインによってはまた別の指定になると思います。

お礼

教えていただいた通りにやりましたら、出来ました！！
まだ仕組みをよくわかってませんが、調べて理解して応。用したいと思います。

スゴイですね。感動しました。
私もがんばってもっと勉強します。
ありがとうございました。

回答No.2

noname#83877

いくつか補足をお願いします

・吹き出しのデザイン
・文字を大きくしたときに、吹き出しも大きくなる必要があるか

補足

噴出しのデザインについては特にこだわりはなく、
自分でペイントで適当に書いたものを使おうとしてます。
文字を大きくしたときに、噴出しも大きくなる必要はあるかというのは
出来れば大きくなる方がよいですが、難しいのであれば
おおきくならなくてもよいです。

そうするとブラウザで文字を大きくしたときに吹き出しからはみ出てしまうという現象が起きてしまいますか？

回答No.1

noname#100277

一番簡単なのは描画アプリケーション（ペイント等）でフキダシの中に直接文字を挿入。
左のメニューの「A」が文字挿入です。

HTMLレベルでならブロックレベルの要素の「背景」に指定して、文字はインライン要素でパッディングで位置指定。
座標はペイントでも解ります。

補足

一つの噴出しでいろいろな文字を入れたいため、ペイントで直接文字を挿入という方法はなしということで。。。

ブロックレベルの要素の「背景」に・・・というのは
positionをabsoluteにしなくても可能でしょうか？
それをもう少し詳しく教えてほしいです。
お願いします。