写真の上に文字をのせてみる

はじめに

HTMLで写真の上に文字を書く方法に関して試してみました。その履歴です。参考のサイトを見ていただいた方が良いと思います。実際は写真の上に直接文字を書いたものをアップした方が簡単で楽かもしれません。

例：写真の上に文字を載せる

写真の上に文字を載せる

投稿欄に記述

<div style="position: relative;">

<img src="http://ここに画像のURLアドレス.jpg" alt="" width="440" height="296" border="0" />

<div style="position: absolute; top: 110px; left: 100px;font-weight:bold;color:mediumblue;font-size:12px;">写真の上の文字</div>

</div>

注意：コードの間にスペースがありますが，実際には詰めて書いています。

調整としては青色の部分ですね。"top:110px;"で上からの位置を調整。"left:100px"のところで左から100pxのところに移動しています。値は写真に合わせて調整ですが，少し大変ですね。


参考：画像上の自由な位置に文字を重ねる方法

最後に

携帯とPCで感じがいまいちでした。もう少し工夫が必要かもしれません。参考のサイトをご覧になった方が良くわかると思います。


※素材は写真素材ぱくたそさんからお借りしました。