背景画像に任意の位置でテキストを配置する

質問

CSSで背景画像を読み込み、に任意の位置でテキストを配置するには
テーブルでとspace.gifを使ってやるしかないのでしょうか？
もっとスマートな方法はないんでしょうか？

CSS
.ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; }

HTML
<table class="ac1">
<tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr>
<tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr>

<tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>

回答No.1

ORUKA1951 · ベストアンサー

＞テーブルでとspace.gifを使ってやるしかないのでしょうか？
　最低限仕様書は理解しなくても一度は目を通しておきましょう。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
　・ メーカー独自拡張のHTMLを使う。
　・ テキストを画像に置き換えて表現する。
　・ 余白制御のために画像を用いる。　　★★space.gifを使って
　・ ページレイアウトの目的で表を用いる。★★テーブルで
　・ HTMLでページを作らずにプログラムに頼る。
　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　1999年のHTML4.01の勧告以来強く言われ続けてきた事です。

　大事な事は、HTMLは文書構造を、プレゼンテーションはスタイルシートという大原則です。構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

　例えば、ナビゲーションリストなので次のようにマークアップされていたとします。
<div class="nav" id="globalNavi">
　<ol>
　　<li><a href="/">トップ</a></li>
　　<li><a href="/products">製品一覧</a></li>
・・・・
　このようにHTMLではデザインをまったく考えずにひたすら文書構造をマークアップします。
　そして、スタイルシート(media="screen")で

#globalNavi{
background-image:url(images/index_main01_02.jpg);
width: 629px; height: 390px;
positio:relative;
}
#globalNavi ol li{
list-style:none;
position:absolute;
}
#globalNavi ol li{
left:0;
top:60px;
}
#globalNavi ol li+li{
top:100px;
left:100px;
width:520px;
}
#globalNavi ol li+li+li{
top:300px;
left:200px;
width:420px;
}
とか、好きにデザインすれば良い。
こうしておけば、携帯電話や印刷、読み上げブラウザでは、きちんとリストで表示、印刷、読み上げてくれるが、PCやスマートフォンでは、629px; height: 390px;の背景画像の上に、最初の項目は右サイドに上から60px、二番目は上から100px左から100px、三番目は上から100px左から200pxに表示してくれる。
　もちろん、先でデザインをまったく変えたくなってもHTML書き換える必要はないし、必要なら印刷用、携帯用でデザインを変えることもできる。

お礼

ORUKA1951様

なるほど、分かりました。　分かりやすいご説明ありがとうございました。