ちょっと質問です。
HTMLを作成していて、jpg(ジェイペグファイル)の上に
文字を乗せたい(上に書きたい)のは、どうすればできますか??

それと、bmpやgifなんかにも文字を乗せる時は同じやり方で
できるのでしょうか?
(または、そんなんできない)

もし、専用のソフトを使用しなければいけないのなら
なにか、いいソフトを教えてください。
よろしくお願いします。

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

A 回答 (4件)

過去にも何回か同じ質問ありましたよ。



枠なしテーブルの背景として画像を入れれば、文字を乗せるくらいワケないんじゃ?
画像自体に文字を書き込みたいのであれば話は別ですが。

ちなみにbmp画像は、ブラウザによっては表示できないですよ。
    • good
    • 1
この回答へのお礼

回答ありがとうございます。

>過去にも何回か同じ質問ありましたよ。
すいません。過去の調べるの忘れてました。お恥ずかしいです。

なるほどです。枠無しテーブルで出来ますね。
そういうの、考え付きませんでした。
ありがとうございます。

お礼日時:2001/08/01 14:12

せっかくなのでCSSでの書き方も覚えてみてはいかがでしょう。



div.dec{
background-image : url(xxxx.jpg);
width : 100px;
height : 100px;
background-position : 0px;
text-align : center;
vertical-align : middle;
}

とでもスタイルシート(例はかなり適当です)に書き、

<div class="dec">
123
</div>

とでもすればxxxx.jpgの上に123という文字が乗ると思います。
xxxx.jpgをgifにしたりbmpしても当然できます。
    • good
    • 0
この回答へのお礼

ありがとうございます。

CSSは、少しだけ使った事あるので、何となくの
書き方だけわかります。
丁寧にサンプルを載せていただいて、ありがとうございました。

お礼日時:2001/08/01 14:14

こんな感じはいかがでしょうか?



<!-- ここから -->
<Table border="0" cellpadding="0" cellspacing="0" width="200" height="200" background="お好きな画像.gif または .jpgのりんく">
<Tr>
<Td><Font size="5" color="Blue"><B>こんな</B></Font></Td>
<Td></Td>
<Td></Td>
</Tr>
<Tr>
<Td></Td>
<Td><Font size="5" color="Pink"><B>感じは</B></Font></Td>
<Td></Td>
</Tr>
<Tr>
<Td></Td>
<Td><Font size="5" color="BlueViolet"><B>いかが</B></Font></Td>
<Td><Font size="5" color="Red"><B>ですか?</B></Font></Td>
</Tr>
</Table>
<!-- ここまで -->

ちょっと文字のレイアウトが難儀ですが・・・。
GoLive等のHTMLエディターがあれば、
見た目で何とか調整出来ます。

または、CSSやJavaScriptやDHTMLを使った方法もありますが、
それは次の機会ですね。

画像ソフトで、直接文字を打つと
ブラウザ上のテキストと違って
あとから編集は出来ませんが、
そのかわりいろいろフォントが選べたり、
影付け、光らせ、等々が出来ますね。

画像ソフトが欲しいときは、下記URLで探してみてください。

参考URL:http://www.vector.co.jp/
    • good
    • 0
この回答へのお礼

ありがとうございます。

サンプルまで載せていただいて、ありがたいです。
画像ソフトも探してみますね。
色々とありがとうございました。

お礼日時:2001/08/01 14:13

フォトショップを使えばなんでも出来ますよ。

    • good
    • 0
この回答へのお礼

ありがとうございます。

フォトショップですか!!
でも、高いですよね。。。
なので、もうちょっと考えてみます。

お礼日時:2001/08/01 14:09

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q画像をリンクボタンにして文字を重ねる方法

こんばんは。
画像をリンクボタンにして文字を重ねる方法を教えていただきたいのですが。
どういえば良いのかわからなかったので、こういう題名になりましたが、ちがうかもしれないので、まねしたいページのアドレスを置いときます。
http://open2.sesames.jp/bananag/html/_TOP/
このページの「サービス一覧」のランにある「JIFT」ですが、
画像の上に文字がかかってます。それでもって画像,文字をクリックするとURLへジャンプするみたいなのです。
これをまねしたいです。
やり方を教えてください。

Aベストアンサー

ボタン画像を用意して背景にします。その中(上)にリンクテキストを書くだけ。
ここの質問サイト画像を参考に初心者用に簡単にサンプル化してみましたので
意味がわかれば応用です。後は自分なりに綺麗に装飾して下さい。
以下をHTMLに貼り付け表示してみる。

<a href="[URL]" style="display:block; text-align:center; width:200px; height:30px;
background: url(http://oshiete1.goo.ne.jp/images/button_question.gif) no-repeat;">リンク先へ</a>

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTM

画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML
お世話になっております。
ある画像の上にposition:rerative;を使って文字をのせています。
この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか?

下記ソースです。
/*css*/
img.button{/*画像*/
margin:0px 0px 8px;
padding:2px;
border:#999999 1px solid;
}
.text{/*画像上の文字*/
margin:0px;
padding:0px;
font-size:14px;
text-align:left;
}

<!--html-->
<div style="position:relative;">
<a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a>
<div style="position:absolute; left: 24px; top: 13px; width: 217px;">
<p class="text">画像上の文字</p>
</div></div>

検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか?うまくいきませんでした。

お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。
表現の仕方や言葉の使い方を間違っていたらすみません…。

画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML
お世話になっております。
ある画像の上にposition:rerative;を使って文字をのせています。
この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか?

下記ソースです。
/*css*/
img.button{/*画像*/
margin:0px 0px 8px;
padding:2px;
border:#999999 1px solid;
}
.text{/*画像上の文字*/
margin:0px;
padding:0px;
font-size:14px;
text-ali...続きを読む

Aベストアンサー

だって、「画像上の文字」と書いてある段落はリンクに含まれてま
せんからね。場所を重ねただけじゃダメですよ。</a>の位置をもっ
と後ろ、最後の</div>の直前に移動しましょう。

<p class="text">画像上の文字</p>
</div></a></div>

それだけです。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qホームページで画像を横に並べるには?

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて(左→右)表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか?
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・


とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL"> → <img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

QHTMLの画像の位置の指定

HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、CSSやジャバスクリプトで使用している、


position:absolute; 絶対配置
position:relative; 相対配置
position:static; 通常配置(指定しない場合はこれ)
position:fixed;
上のようなポジションタグを使う事は可能ですか?

できれば、そのサンプルのようなものを書いてもらえると 助かります。

Aベストアンサー

こんばんは。
私は画像については良く位置指定をします。
インラインCSSで書きますと、

<div style="position:relative; top:100px; left: 20px;"><img src="ここに画像1へのパスを書きます/gazou1.jpg" width="330" height="200" border="0" alt="画像1"></div>

絶対指定なら;
<div style="position:absolute; top:100px; left: 20px;"><img src="ここに画像1へのパスを書きます/gazou1.jpg" width="330" height="200" border="0" alt="画像1"></div>

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報