こんばんは。CSS初心者のMxanaduと申します。以下のようなCSSを使ったHTMLソースを記述しています。しかし、ウェブブラウザ（iCab 3.0 Beta 340, Safari 1.3 (v312), IE 5.2.3 (5815.1), Firefox 1.0.6 日本語版--いずれもMac OS X版）で表示させると、タグ内にHSPACEとVSPACEを記述しても画像の間に間隔が空きません。CSSを使うとHSPACEとVSPACEは無視されるのでしょうか？もしCSSを使うとHSPACEとVSPACEが無視されるならば、代替え手段を教えて戴けないでしょうか？ページタイトルメッセージ本文以上、よろしくお願い致します。

CSSを使うと<IMG>タグのHSPACEとVSPACEは無視されるのでしょうか？

解決済

質問者：noname#164148
質問日時：2005/08/16 18:46
回答数：2件

こんばんは。CSS初心者のMxanaduと申します。

以下のようなCSSを使ったHTMLソースを記述しています。しかし、ウェブブラウザ（iCab 3.0 Beta 340, Safari 1.3 (v312), IE 5.2.3 (5815.1), Firefox 1.0.6 日本語版--いずれもMac OS X版）で表示させると、<IMG>タグ内にHSPACEとVSPACEを記述しても画像の間に間隔が空きません。CSSを使うとHSPACEとVSPACEは無視されるのでしょうか？
もしCSSを使うとHSPACEとVSPACEが無視されるならば、代替え手段を教えて戴けないでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=SHIFT_JIS">
<META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="TEXT/CSS; CHARSET=SHIFT_JIS">
<TITLE>ページタイトル</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" LINK="#005048" ALINK="#CDF400" VLINK="#996600">
<P CLASS="MAIN">メッセージ本文</P>
<HR SIZE=1>
<DIV ALIGN="RIGHT"><A HREF="ハイパーリンク"><IMG SRC="images/banner.gif" ALT="バナー説明" WIDTH="88" HEIGHT="31" BORDER="0" HSPACE="10" VSPACE="5"></A><A HREF="ハイパーリンク"><IMG SRC="images/banner.png" ALT="バナー説明" WIDTH="88" HEIGHT="31" BORDER="0" HSPACE="10" VSPACE="5"></A></DIV>
</BODY>
</HTML>

以上、よろしくお願い致します。<(_ _)>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： koutarou504
回答日時：2005/08/17 02:34

＞CSSを使うと

＞HSPACEとVSPACEは無視されるのでしょうか？
まずは、HSPACEとVSPACEはどの様な機能でしょうか？
縦，横の違いはありますが余白（マージン）の指定ですよね。
そしてスタイルの指定ですが全称セレクタでマージンの指定があります。
という事はＩＭＧ要素に於いてHSPACE属性，VSPACE属性によるマージンの指定と全称セレクタによるマージンの指定があります。さてどちらが採用されるのでしょう。
まずHSPACE属性，VSPACE属性の重みはいくつかというと「０(ゼロ)」です。そして，変換された規則は文書制作者のスタイルシートの先頭にあるものとみなし，競合する後続の規則はそれよりも優先することになるそうです。
そしてＳＴＹＬＥ要素で記述されている全称セレクタの重みも「０(ゼロ)」です。
しかし全称セレクタでの記述の方が後の記述とみなされますので、こちらが優先されます。

尚、注意する点は　これは提示されている規則であり
ブラウザがその様に振る舞ってくれるかは別で・・・。
（ＷｉｎのＩＥ6.0はHSPACEとVSPACEの値が採用されていたりしますし・・・。）

＞代替え手段を教えて戴けないでしょうか？
もっと重みのある指定方法を採用するか、全称セレクタによる指定をやめて個々に指定するかです。

＞* { MARGIN: 0%; PADDING: 0%; FONT-STYLE: NORMAL; FONT-WEIGHT: NORMAL; }
これを
BODY, P, HR, DIV, A { MARGIN: 0%; PADDING: 0%; FONT-STYLE: NORMAL; FONT-WEIGHT: NORMAL; }
と、ＩＭＧを除いて全て列挙するという方法で書き換えるとか・・・。

もしくは、
IMG { MARGIN: 5px 10px; }
（特定したい場合は、ID なり class なりを付加）
でHSPACE属性，VSPACE属性の指定をスタイルシートで行う様に変更する。

そもそも、ＣＳＳを用いながらもＨＴＭＬでデザインに関わる記述をしているのが中途半端で
今回の様な状況になっていると思います。

尚、私の方での動作確認（質問で提示の内容）は WindowsXP SP2 による
IE6.0 Slepnir2.0 でHSPACE属性，VSPACE属性の値が常に有効であり、
Firefox1.0.6 Mozilla1.7.5 Opera8.01 ではHSPACE属性，VSPACE属性の値は採用されず全称セレクタのマージンの値が採用されました。

参考URL：http://hp.vector.co.jp/authors/VA022006/css/casc …

- 0
- 件

通報する

この回答へのお礼

koutarou504さま、初めまして。

> しかし全称セレクタでの記述の方が後の記述とみなされますので、こちらが優先されます。

その通りでした。全称セレクタでの記述を外したら、HSPACE、VSPACEともに有効になりました。
全称セレクタは、自分のHPの他の部分でのウェブブラウザ間の差を消すために記述しました。それがHSPACE、VSPACEにも影響するとは知らずに使っていました…。(^^ゞ

> HSPACE属性，VSPACE属性の指定をスタイルシートで行う様に変更する。

全称セレクタの記述を残したまま、この方法でうまく行きました。ありがとうございました。

> そもそも、ＣＳＳを用いながらもＨＴＭＬでデザインに関わる記述をしているのが中途半端で
> 今回の様な状況になっていると思います。

おっしゃる通りです。
このような中途半端な記述をしている理由は、WDG（ウェブデザイングループ）が主張する「アクセシビリティ」を自分なりに解釈した結果です。
WDGは「ウェブページを見る側が独自のCSSを使う場合とか、CSSを使用しない場合、あるいはCSSをサポートしないウェブブラウザで見た場合に配慮すべきだ」と言っています。
そのためCSSを無効にされても、ある程度自分の意図どおりの表示ができるように、HTML内にデザイン要素を組み込んでいます。
しかしながら、本当はどうすべきなのか迷っているというのが私の本音です。

ご回答ありがとうございました。

通報する

お礼日時：2005/08/17 18:55

No.1

回答者： kwgm
回答日時：2005/08/16 19:16

＞CSSを使うとHSPACEとVSPACEは無視されるのでしょうか？

スタイルの指定は、後から読み込まれたものが優先されます。
ですので「属性」で指定された「HSPACE="10" VSPACE="5"」が優先されます。
http://www.kanzaki.com/docs/html/htminfo17.html

- 0
- 件

通報する

この回答へのお礼

kwgmさま、初めまして。

> ですので「属性」で指定された「HSPACE="10" VSPACE="5"」が優先されます。

参照URLの「カスケーディングと継承」の項も読みました。ですが、残念ながら、ご指摘の通りにはならず、Mac OS Xの代表的なブラウザでHSPACEとVSPACEが無視されているのです。
よく分かりもしないでCSSを使っている罰があたったのかも…です。(^^ゞ

ご回答ありがとうございました。

通報する

お礼日時：2005/08/17 16:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！