スライシング画像とテキスト

質問

今ホームページを作っています。
スライシングした画像の上にHTMLでテキストを自由な位置にのせるには、どのよううにすればよいでしょうか？

回答No.2

abril · ベストアンサー

・「スライシングした画像」："hogehoge.gif"
・「スライシングした画像の上にHTML（上）で自由な位置にのせるテキスト」："hogehoge_text"
・CSSでのclass名（場合によってはidが妥当な状況もありますが話がややこしくなるので）："hogehoge"
・CSSファイルから見た"hogehoge.gif"の位置："../images/hogehoge.gif"
…と仮定します。

大きく分けて、"hogehoge.gif"を「CSSで背景として扱う場合」と「HTML内で<img>タグで参照する場合」の二通りがありますが、後者は多分質問者様には難しいかもしれませんので、ここでは前者の考え方の概略だけを説明しておきます。

"hogehoge_text"をHTMLファイル側で適切なマークアップをする。
【HTML：例】
"hogehoge_text"が段落としてマークアップされるのが妥当だったのなら、
---------------------------------------------------------------------
<p class="hogehoge">hogehoge_text</p>
---------------------------------------------------------------------
【CSS：例】
CSSファイルに"hogehoge"というclassを設定し、backgroundプロパティ＋αでスタイルを指定。
p.hogehoge {
background: url(../images/hogehoge.gif) top left no-repeat #fff;
*必要に応じて＋αのプロパティを設定*
}

これはあくまでごく簡単なサンプルですが、実際には、

・"hogehoge.gif"はレンダリングさせたいのか否か？
・"hogehoge.gif"を充分に表示できるだけのデータ量が"hogehoge_text"にはあるのか否か？
→※backgroundプロパティ自体は高さや幅を持ちませんので、"hogehoge.gif"のサイズより"hogehoge_text"のデータ量の方が”相対的に”少ない状態では"hogehoge.gif"の全貌は表示されません
・"hogehoge.gif"と"hogehoge_text"の位置関係は（左寄せ、センタリング、余白、etc...）？

といった、やりたいことの条件によって、backgroundプロパティのそれぞれの値も、＋αのプロパティも設定が変わってきます。

お礼

cssはまだまだ先になりますが、これから勉強していきたいと思っています。ありがとうございます。

回答No.1

egoblock

CSS

お礼

今cssを勉強中でいます。
その節は、ご回答本当にありがとうございました。