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ベストアンサー
- 回答日時:
>テーブルでとspace.gifを使ってやるしかないのでしょうか?
最低限仕様書は理解しなくても一度は目を通しておきましょう。
【引用】____________ここから
そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
・ メーカー独自拡張のHTMLを使う。
・ テキストを画像に置き換えて表現する。
・ 余白制御のために画像を用いる。 ★★space.gifを使って
・ ページレイアウトの目的で表を用いる。★★テーブルで
・ HTMLでページを作らずにプログラムに頼る。
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
1999年のHTML4.01の勧告以来強く言われ続けてきた事です。
大事な事は、HTMLは文書構造を、プレゼンテーションはスタイルシートという大原則です。構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
例えば、ナビゲーションリストなので次のようにマークアップされていたとします。
<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書き換える必要はないし、必要なら印刷用、携帯用でデザインを変えることもできる。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSでボックスのheightが0になる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSで3分割した背景画像を配置...
-
Media Queries 4 で 非推奨とな...
-
HTMLのiframeの入れ子について
-
中点「・」の改行について
-
div内に外部のurlを表示させたい
-
CSS上での計算を行うためのルー...
-
W3Cのソースコードの検証サービ...
-
画像リンクの下に文字を付けた...
-
border-style:solidで文字がずれる
-
テキストボックスの高さを可変...
-
CSSと<dl><dd>で間隔をあけて1...
-
<li>の黒い点を消したい。
-
【CSS】ヘッダーの高さが不明の...
-
CSSでborderの指定を解除する記...
-
CSSだけで、テーブルにスクロー...
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報