ここから本文です

HP作成において、画像の上に文字を書くタグまたは方法を教えてください。

質問者

clanus83さん

2008/1/1000:34:23

HP作成において、画像の上に文字を書くタグまたは方法を教えてください。

閲覧数:
7,023
回答数:
3
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

2008/1/1011:18:49

文字を書きたい画像は、ページの好みの位置に配置したいでしょうから、何処に画像を置いても可能なソースを書きます。
スタイルシートになりますから、head部のソースと、body部のソースになります。

【head部のソース】

<style type="text/css">
div.photobox{width:480px;height:360px;background: url(images/gazo.jpg) no-repeat;position:relative;}
.photobox p{ width:120px;position:absolute; top:50px;left:30px;color:#fff;font-size:12px;}
</style>

【body部のソース】

<div class="photobox">
<p>ここに文章を書く</P>
</div>

body部ソースは、好みの位置に配置してください。

head部ソースは画像のサイズを幅=480px、高さ360px、画像名=images/gazo.jpg と書いてありますが、
実際に使う画像名とサイズに変更してください。

head部ソース、2行目の文字を書く位置として、画像上から50px、左から30pxの位置に120px幅で書いていく、
指定をしていますが、この数値も好みの数値に変更してください。もし、画像全体に文字を書くのでしたら、
画像サイズに数値を合わせれば可能です。

サンプルソースは、以下のページにあるエディタで書いています。好みの数値を入力するだけで作ってくれますので、
今回のソースも10~15秒もあれば、書いてくれます。一度ご覧ください。URLは↓

http://www4.nasuinfo.or.jp/~gushioda/css/page35.html

参考になれば幸いです。

質問した人からのコメント

2008/1/13 01:10:45

笑う ありがとうございます!参考にします。

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

このQ&Aで解決しましたか?質問する

閉じる

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

socket551さん

2008/1/1001:27:12

では、私は方法の方でも。

スタイルシートを使います。

<img src="hoge/hoge.jpg" style="position:absolute; z-index:1;">
<div style="position:absolute; z-index:2; top:400px; left:150px;">あいうえお</div>

z-indexの数字が大きい要素が上に来ます。
この場合は画像の上に文字が乗っている状態ですが、z-indexの数字を逆にすると文字は画像の下に隠れてしまいます。

position:はポディショニング方法を指定します。
static既定、relative相対位置、absolute絶対位置、fixed(絶対位置固定)、inherit継承
top:left:はそれぞれ上端、左端からの距離をpx単位で指定しています。
例の場合はabsoluteでポディショニングを指定しているので、実質左上が上端左端共に0になります。

「画像の上に文字を書く」に主点をおいたので、かなり端折っている部分がありますが
スタイルシートを使えばこんな感じになります。

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

name_404さん

2008/1/1000:54:18

画像の上に文字を書くタグはないと思います。
また、画像に直接文字を入れたほうがいいと思いますが。。。

どうしてもタグの使用で!というならば、

<table border="0" width="画像の幅" height="画像の高さ" background="表示させる画像">
<tbody>
<tr>
<td>
表示させる文字
</td>
</tr>
</tbody>
</table>

このような記述で表示させることも可能です。

ちょい足しを取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

ID/ニックネームを選択し、「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。

ほかのID/ニックネームで利用登録する