背景画像をセットしたh1にmargin-topを記述すると、何と親divの背景まで一緒に移動してしまう

何を直しても直らず困っております。

h1タグに会社ロゴをセットするために会社ロゴをh1の背景にしました。
空タグじゃいけませんのでh1のテキストは入れて、それを-9999pxでセットしました。
マージンをセットしないとヘッダー最上部左上にぴったり配置されてしまうので、上と左にマージンをとって配置させたい位置にもってきたいのですが、驚いたことに、h1にmargin-leftとmargin-topを記述したところ、何と、親divの背景が一緒にmargin-topの数値と同じだけ下に移動してしまうんです。。。どうやって直せるでしょうか？？

以下、ソースです。

●HTML
------------------------------------------------------------
<div id="hdr_wrap">
<div id="hdr">
<h1 title="My Site"><a href="index.html">My Site</a></h1>
</div><!--/div id="hdr"-->
</div><!--/div id="hdr_wrap"-->
------------------------------------------------------------


●CSS
------------------------------------------------------------
body
{
margin: 0;
color: #333;
font-family: "メイリオ","ヒラギノ","ＭＳ Ｐゴシック","平成角ゴシック",sans-serif;
font-size: 80%;
line-height: 1.4em;
letter-spacing:1px;
}

h1
{
width: 228px;
height: 60px;
margin-left: 62px;
margin-top: 39px;
padding: 0;
color: #ccc;
text-indent: -9999px;
background: url(../img/cmn/hdr_vi.jpg) no-repeat left top;
}

h1 a
{
width: 228px;
height: 60px;
margin-left: 62px;
margin-top: 39px;
padding: 0;
border: 0;
text-decoration: none;
}

div#hdr_wrap
{
background:url(../img/cmn/hdr_bg.jpg) #252a2c no-repeat;
width:100%;
height:220px;
text-align: left;
}

div#hdr
{
display: block;
width:955px;
height:117px;
}
------------------------------------------------------------



●初期化CSS（このCSSは関係ないとは思いますが一応記載）
------------------------------------------------------------
* {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
color: #333;
font-size: 100%;
font-weight: normal;
font-style: normal;
text-decoration:: none;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,blockquote,table,th,td {
margin: 0;
padding: 0;
}

p {
margin: 0 0 1em 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
margin-left: auto;
margin-right: auto;
}

address,caption,cite,code,dfn,h1,h2,h3,h4,th,var {
font-style: normal;
font-weight: normal;
}

fieldset,img,abbr {
border: 0;
}

caption,th {
text-align: left;
}

q:before,q:after {
content: '';
}

a {
text-decoration: none;
}

img {
border: none;
vertical-align: bottom;
}

p.trs{
white-space: nomal;
margin: 5px 0px 0px 0px;
}
------------------------------------------------------------

宜しくお願い致します。

No.11 ベストアンサー 回答者： nobuoka 回答日時： 2009/11/26 16:26

> 以下のサイトの画像置換方法が良いとどこかで紹介されていたのですが、これもnobuokaさまが今回ご紹介された画期的な案であるlist-styleを使うようですが、もしご存知なかったらと思って情報共有でお送りいたします。

>
​> http://kikky.net/pc/css_ir2.html​

このページは私も見たことがあります！ これは list-style を使う方法じゃないのですよー。 CSS の z-index プロパティを使用して、本来画面奥側にあるはずの要素をテキストを含む要素の手前側に表示させています。 (重なり順を逆転させる。) んで、その手前側に来た要素の背景に表示したい画像を置き、テキストを隠す、という感じです。
この方法もなかなか面白い方法ですよねー。 この方法を使ってた事もあったのですが、何かの理由でやめちゃったんですよねぇ。 透明画像を使う必要があったから、だったような気がします。 (この手法だと透明画像が使えないので。)

この回答への補足

文字数制限があるので、以下にGVナビ箇所だけ一般化した上で記載いたします。
------------------------------------------------------------
@media screen
{

ul#hdr_nv-gb
{
overflow: hidden;
list-style: none;
width: 910px; height: 71px;
padding: 0px;
margin-left: 5px;
font-size: 14px;
/*position: absolute; top: 300px; AbsoluteでもOK*/
}

#hdr_nv-gb li
{
float: left; /* clear: left;*/
overflow: hidden;
width: 180px; height: 71px; /* Navigation Size */
/*margin: 0px;
padding: 0px;*/
position: relative;
}

#hdr_nv-gb li.hdr_nv-gb_about-this,
#hdr_nv-gb li.hdr_nv-gb_software-this
{
float: left; /* clear: left;*/
overflow: hidden;
width: 180px; height: 71px; /* Navigation Size */
/*margin: 0px;
padding: 0px;*/
position: relative;
}

#hdr_nv-gb li a
{
overflow: hidden;
display: block;
width: 180px; height: 71px;
/*background-color: #000000;
margin: 0px;
padding: 0px;
border: 0px none;
color: #46251A;*/
}

#hdr_nv-gb li a:before
{
display: block;
float: left;
color: #333333;
}



/* IE6 に以下のプロパティが適用されるとうまく動かないため子選択セレクタ ">" で IE6 には
認識されないようにする。また、このソースが無いとSafari,OperaでボタンのRollOverができなくなる */
#hdr_nv-gb li > a:hover::before,
#hdr_nv-gb li > a:focus::before,
#hdr_nv-gb li > a:active::before
{
margin-left: -180px;
}

#hdr_nv-gb li.hdr_nv-gb_about-this > :before,
#hdr_nv-gb li.hdr_nv-gb_software-this > :before
{
margin-left: -180px;
}


/* ボタン指定 "hdr_nv-gb_about" */
#hdr_nv-gb li.hdr_nv-gb_about a:before,
#hdr_nv-gb li.hdr_nv-gb_about-this:before
{
content: url("../img/cmn/hdr_nv-gb_about.gif");
}

/* ボタン指定 "hdr_nv-gb_software" */
#hdr_nv-gb li.hdr_nv-gb_software a:before,
#hdr_nv-gb li.hdr_nv-gb_software-this:before
{
content: url("../img/cmn/hdr_nv-gb_software.gif");
}

}

/*===== Global Navigation Print =====*/

@media print
{

ul#hdr_nv-gb
{
overflow: hidden;
width: 910px; height: 71px;
padding: 0px;
margin-left: 5px;
font-size: 14px;
/*position: absolute; top: 300px; AbsoluteでもOK*/
}

#hdr_nv-gb li
{
float: left;
overflow: hidden;
display: block;
width: 180px; height: 71px; /* Navigation Size */
}

#hdr_nv-gb li a
{
display: list-item;
list-style: disc inside; /* 注：none を設定すると画像も表示されなくなる */
}

/* ボタン指定 "hdr_nv-gb_about" */
#hdr_nv-gb li.hdr_nv-gb_about a,
#hdr_nv-gb li.hdr_nv-gb_about-this
{
list-style-image: url("../img/cmn/hdr_nv-gb_about.gif");
}

/* ボタン指定 "hdr_nv-gb_software" */
#hdr_nv-gb li.hdr_nv-gb_software a,
#hdr_nv-gb li.hdr_nv-gb_software-this
{
list-style-image: url("../img/cmn/hdr_nv-gb_software.gif");
}
}

補足日時：2009/12/01 10:29

この回答へのお礼

スミマセン、他のページと間違えていたようです、list-styleではなくz-index手法なんですね。透明画像を使わないのならば使えるということなんですね。
しかしnobuokaさまは流石ですね、すでにチェック済みだったとは。書くことありませんでした（汗；

お礼日時：2009/11/26 21:59

No.10 回答者： nobuoka 回答日時： 2009/11/26 14:27

回答遅くなってしまい申し訳ありません。

会社だけでなく家のプリンタでもおかしくなってしまうということで、提示されたソースコードを元に HTML ファイルを作って試してみたのですが、うちのプリンタでは特に問題がありませんでした。。 (IE6、Firefox 3.5 で確認。)

そこでお聞きしたいのですが、元ネタ [http://www.vividcode.info/wd/tec/sample/ir.htm] を印刷した場合はどうなるのでしょう？
もしこの印刷も上手くいかないようでしたらうちの環境がたまたま印刷に問題がなかっただけで一般的には使えない手法なのだと思います。 その場合は変なものを紹介してしまい申し訳ありません。
もし上記ページの印刷は上手くいくのでしたら、touchy さんが書かれたコードの、一見関係ない場所の記述が悪さをしている可能性があります。 その場合は HTML、CSS コードの一部ではなく、ページ全体のコードを示して頂ければ原因がわかるかもしれません。 もしどこかサーバ上にアップロードできるのであればアップロードして頂ければ幸いです。

全く持ってお力になれず申し訳ありません。。

この回答への補足

済みません、それと以下のサイトの画像置換方法が良いとどこかで紹介されていたのですが、これもnobuokaさまが今回ご紹介された画期的な案であるlist-styleを使うようですが、もしご存知なかったらと思って情報共有でお送りいたします。

http://kikky.net/pc/css_ir2.html

でもこのサイト、「詳細はまた書きます」で終わっておりまして、単にソースだけなのによくわからない感じもありますが苦笑。。。

補足日時：2009/11/26 15:47

この回答へのお礼

とんでもないです、ご協力有難う御座いますm(_ _)m
以下の元ネタでプリントしてみました。

http://www.vividcode.info/wd/tec/sample/ir.htm

IE7
●「画像なし sample」の文字が表示されない。
●その他の画像有りボタンは全て画像ボタンが表示されていて、文字が上に乗っかることもなく正常

Firefox 3.0.15
●全てOK。画像ボタンあるところは画像ボタンが表示されて文字も上に乗っかっていないし、「画像なし sample」の文字も表示されている。

仰る通りどこか周辺のソースが影響でもしているんでしょうか。

> もしどこかサーバ上にアップロードできるのであればアップロードして頂ければ幸いです。

良いアイデアですね！
でも、他人がデータをDLしたら困るのでnobuokaさまだけにDLしてもらう方法は何かあるでしょうか。

お礼日時：2009/11/26 15:46

No.9 回答者： nobuoka 回答日時： 2009/11/20 00:06

お疲れ様です。

。　サイドバーが横一列になってしまう問題が解決してなによりです。
GBNavi がおかしかったりするのはまだ私もよくわかっていないのですが、とりあえず h1 に関して書いておきます。

示されている XHTML は h1 の中に a 要素がありませんが、CSS を見る感じでは a 要素があるようなので、実際には

-- XHTML --------------------------------
<h1><a href="xxxx">Welcome to My Site</a></h1>
-----------------------------------------

という感じなのでしょうか？
それでしたら、CSS は下記のように書けばいいと思います。 もし a 要素を使わないのであれば、代わりに span 要素を使ってください。

-- CSS ベース ----------------------------
/*===== 画面表示用 =====*/
@media screen {
h1 {
margin: 0;
padding: 0;
overflow: hidden;
width: 228px; height: 60px; /* 画像の大きさ */
}
h1 a {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
h1 a:before {
display: block;
float: left;
/* 置換する画像の設定 */
content: url("../img/cmn/hdr_vi.jpg");
}
}

/*===== 印刷用 =====*/
@media print {
h1 {
margin: 0;
padding: 0;
overflow: hidden;
width: 228px; height: 60px; /* 画像の大きさ */
border: solid 1px #333330;
}
h1 a {
display: list-item;
list-style: disc inside; /* none を設定すると画像も表示されなくなる. */
list-style-image: url("../img/cmn/hdr_vi.jpg");
}
}
------------------------------------------

-- CSS IE6, 7 用 ---------------------------
/*===== 画面表示用 =====*/
@media screen {
h1 a { /* IE 6, 7 用 */
display: list-item;
list-style: disc inside; /* none を設定すると画像も表示されなくなる. */
vertical-align: bottom;
line-height: 61px; /* 画像が非表示の場合の文字の位置調節. 画像の高さより 1px 大きめに設定 */
margin-left: -228px; /* 画像の横幅 * (-1) を指定 */
padding-left: 228px; /* 画像の横幅を指定 */
/* 置換する画像の指定 */
list-style-image: url("../img/cmn/hdr_vi.jpg");
background-image: url("../img/cmn/hdr_vi.jpg");
background-repeat: no-repeat;
}
}
-------------------------------------------

この回答への補足

会社だけかと思っておりましたが、自宅のプリンタでも同じく画像ボタンの上に文字まで出ておりました。元ソースにおいて、変える必要が無い箇所、コメントアウトなどの変えても問題ないところ以外は、自サイト固有のID名、class名、画像パスの変更にとどめているはずなのですが・・・一応今ののソースを記載させていただきます・・・
--- XHTML ---------------------------------------------------------
<div id="gbnavi-bg">
<ul id="gvnavi">
<li class="gvnavi_about"><a href="http://mysyte.jp/about/index.php">Mysiteについて</a></li>
</ul>
</div>
--- XHTML End ---------------------------------------------------------

-- CSS ----------------------------------------------------------
div#gbnavi-bg
{
list-style-type: none;
width: 910px;
height: 71px;
margin-left: 25px;
padding: 0;
background: url(../img/gbnavi-bg.gif) no-repeat;
}

@media screen
{

ul#gvnavi
{
overflow: hidden;
list-style: none;
width: 910px; height: 71px;
padding: 0px;
margin-left: 5px;
font-size: 14px;
/*position: absolute; top: 300px; AbsoluteでもOK*/
}

#gvnavi li
{
float: left; /* clear: left;*/
overflow: hidden;
width: 180px; height: 71px; /* Navigation Size */
/*margin: 0px;
padding: 0px;*/
position: relative;
}

#gvnavi li a
{
overflow: hidden;
display: block;
width: 180px; height: 71px;
/*background-color: #000000;
margin: 0px;
padding: 0px;
border: 0px none;
color: #46251A;*/
}

#gvnavi li a:before
{
display: block;
float: left;
color: #333333;
}

#gvnavi li>a:hover::before,
#gvnavi li>a:focus::before,
#gvnavi li>a:active::before
{
margin-left: -180px;
}

/* ボタン指定 "gvnavi_about" */
#gvnavi li.gvnavi_about a:before
{
content: url("../img/gvnavi_about.gif");
}
}

/*===== Global Navigation Print =====*/

@media print
{

ul#gvnavi
{
overflow: hidden;
width: 910px; height: 71px;
padding: 0px;
margin-left: 5px;
font-size: 14px;
/*position: absolute; top: 300px; AbsoluteでもOK*/
}

#gvnavi li
{
float: left;
overflow: hidden;
display: block;
width: 180px; height: 71px; /* Navigation Size */
}

#gvnavi li a
{
display: list-item;
list-style: disc inside;
}

/* ボタン指定 "gvnavi_about" */
#gvnavi li.gvnavi_about a
{
list-style-image: url("../img/gvnavi_about.gif");
}
}
------------------------------------------------------------

補足日時：2009/11/24 13:31

この回答へのお礼

nobuoka様、有り難いですm(_ _)m

> サイドバーが横一列になってしまう問題が解決してなによりです。

凡ミスで申し訳ありません。そして有難う御座いました。


> -- XHTML --------------------------------
> <h1><a href="xxxx">Welcome to My Site</a></h1>
> -----------------------------------------
>
> という感じなのでしょうか？

うっかりしておりました、書くときに漏れておりました。済みません。おっしゃるとおりで、実際にはaタグも記述しております。上記の状態の通りです。


それからh1ですが、li ではくて h1 なのにlist-styleが使えるんですか、驚きました。そして、記述いただいたソースですが、いけました！！
本スレの最初の方で話題にしておりました、h1の親の背景がおかしくなるのも、いただいたソースに以下のソースを付け加え、このdiv id="hdr_vi"をXHTMLの方のh1に包含したら、FirefoxやOpera、SafariでもOKになりました！
ソースが増えるので包含はしたくありませんでしたが、h1のみではヘッダー一面にしきつめた背景画像の上部に隙間があいてしまうので（h1の配置はtopから0px、leftから0pxのようなピッタリひっついた場所ではなく隙間を空けているため）、諦めるしかないかなと。

div#hdr_vi
{
padding-top: 39px;
padding-left: 62px;
}

プリントは引き続き調査中です。そちらでは現象出ませんか・・・プリンタによっても違うんでしょうかね・・・そうなるともうお手上げですが（笑汗；）
ただ、ブラウザによっては確実に違いまして以下のやうになっています。

●IE7：GBnaviだけ画像ボタンが上部にずれ、全画像ボタンの上にliのリンク文字が出現
●IE6：スタンドアローン型IE6だからか、印刷しても無反応で印刷自体ができない（本ソースのせいではない）
●Firefox3.0.15：完璧
●Safari3.2.3：背景が全部でない
●Opera8.5：IE7の現象から画像ボタンのずれが無い状態

お付き合い、本当に有難う御座います

お礼日時：2009/11/20 13:37

No.8 回答者： nobuoka 回答日時： 2009/11/17 16:44

提示されたコードを元に以下の HTML ファイルを作成して試してみました。

"test.png" は縦 71px、横 180px の画像ファイルです。 (横幅 360px にしても特に問題はありませんでした。 はみ出た部分が表示されないだけで。)

ul#sidebar_nv のサイズが横 910px、縦 71px となっていましたが、その状態で印刷をすると横並びにボタンが配置されました。 また、下記コードのように ul#sidebar_nv のサイズを横 180px、縦 142px とすると、縦に 2 つのボタンが並ぶように印刷されました。 (印刷は IE6 を使って行いました。)

そんなわけで私の環境では期待通りに印刷できないという状況が発生しなかったのですが・・・汗 私の IE6 はデフォルト設定になっているはずなんですが、、何が違うんでしょうね。
色々試してみましたが GBNavi において画像の位置がずれるという現象もちょっと再現できませんでした。

もうちょっと色々試してみますので、何かわかったらお知らせします。 touchy さんも、どういう場合に問題が発生してどういう場合は問題が発生しないのかなどわかりましたらお知らせください。


あと今回色々試していて 2 点気づいた事がありますので一応書いておきます。 今回の問題とは全然関係ないのですが。
・ Firefox 3.5 において、画面表示に使用していない画像を @media print により印刷に使用しようとすると印刷されない模様
・ IE8 のデフォルト設定の場合、今回使用している方法では印刷時に画像が表示されない。 (ネタ元では 「IE8 でも期待通りの動作」 となっているが。。 AlphaImageLoader を使ったら対処できそう)

-------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
@media print {
ul#sidebar_nv
{
overflow: hidden;
/*width: 910px; height: 71px;*/ /* ← サイズ変更 */
width: 180px;
height: 142px; /* ← 71px * 2 */
padding: 0px;
margin-left: 5px;
/*font-size: 1.2em;*/
border: solid 1px #000000;
}

#sidebar_nv li
{
float: left;
display: block;
overflow: hidden;
width: 180px; height: 71px; /* Navigation Size */
}

#sidebar_nv li a
{
display: list-item;
list-style: disc inside; /* 注：none を設定すると画像も表示されなくなる */
}

/* ボタン指定 "sidebar_nv01" */
#sidebar_nv li.sidebar_nv01 a
{
list-style-image: url("test.png");
}

/* ボタン指定 "sidebar_nv02" */
#sidebar_nv li.sidebar_nv02 a
{
list-style-image: url("test.png");
}

#test:before {
content: url("test.png");
}
}
</style>
</head>
<body>
<div id="sidebar_nv_bg">
<ul id="sidebar_nv">
<li class="sidebar_nv01"><a href="#">ABCとは</a></li>
<li class="sidebar_nv02"><a href="#">GAV製品</a></li>
</ul>
</body>
</html>
-------------------------------------------------------

この回答への補足

お礼欄からの続き(ベースcss）

/* IE6 に以下のプロパティが適用されるとうまく動かないため子選択セレクタ ">" で IE6 には
認識されないようにする */
h1>a:hover::before,
h1>a:focus::before,
h1>a:active::before
{
margin-left: -228px;
}
/* ボタン指定 "h1" */
h1 a:before
{
content: url("../img/cmn/hdr_vi.jpg");
}
}

/*===== h1 Print =====*/

@media print
{

h1
{
position: absolute;
top: 39px; left: 62px;
overflow: hidden;
width: 228px; height: 60px;
padding: 0;
margin: 0;
font-size: 1em;
/*position: absolute; top: 300px; AbsoluteでもOK*/
}

/* ボタン指定 "h1" */
h1 a
{
background: url("../img/cmn/hdr_vi.jpg");
}

}
------------------------------------------------------------


--- ie67.css ---------------------------------------------------------
@media screen
{

h1 a
{ /* IE 6, 7 用 */

/* display: list-item; */

position: absolute;
top: 39px; left: 62px;
vertical-align: bottom;
line-height: 60px; /* 画像が非表示の場合の文字の位置調節. 画像の高さより 1px 大きめに設定 */

margin-left: -228px;
padding-left: 228px;
}


h1 a:hover,
h1 a:focus,
h1 a:active
{ /* IE 6, 7 用 */
background-position: -228px 0px;
}


h1 a
{ /* IE 6, 7 用 */
background-image: url("../img/cmn/hdr_vi.jpg");
}

}
------------------------------------------------------------

補足日時：2009/11/19 18:59

この回答へのお礼

遅くなって申し訳ありません。
サイドバーが横一列になるのはnobuoka様が書いていただいた通りです。
お恥ずかしいことにwidth記述がprintのところだけGBNaviのコピーのままでした。凡ミスです、申し訳有りません。
次に、
●プリント時に画像が表示されるものの文字まで出てしまう
●GBNaviだけ何故か画像ボタンが上に押しやられる（20px程度）
●サイトバーとフッターNaviは画像は定位置ながら、画像の上に乗っかる形でやはり文字が出る。しかも、「一部の」アルファベットだけ文字が出ない。
ですが、これはわけわかりません。引き続き調査中です。

それから、nobuoka様に教えていただいた画像置換がナビゲーションでの紹介だったため、「これは良い！」とすっかり取りつかれていましたが、本スレの本来のh1の画像置換がまだでありました（苦笑）。
h1に挑戦しているのですが、どうやっても画像が表示できず頓挫しております。
これまではリストであるul、li でやっていましたからIE6、7向けにはlist-style-imageが使えていたわけですが、当然それは使えないですからh1となるとどうすればいいのか挑戦中ですがまだ結果が出ません。
以下、ソースです。
※h1ですのでRollOverさせません。マウスOn時のRollOver画像はありませんので画像はRollOn、RollOutに分かれておりません。

-- XHTML ----------------------------------------------------------
<h1 title="Welcome to My Site">Welcome to My Site</h1>
------------------------------------------------------------

--- CSS ベースcss ---------------------------------------------------------
@media screen
{

h1
{
position: absolute;
top: 39px; left: 62px;
overflow: hidden;
width: 228px; height: 60px;
padding: 0;
margin: 0;
font-size: 1em;
/*position: absolute; top: 300px; AbsoluteでもOK*/
}

h1 a
{
position: absolute;
top: 39px; left: 62px;
overflow: hidden;
display: block;
width: 228px; height: 60px; /* Navigation Size */
padding: 0;
margin: 0;
font-size: 1em;
/*position: absolute; top: 300px; AbsoluteでもOK*/
}
補足欄んへ続く

お礼日時：2009/11/19 18:59

No.7 回答者： nobuoka 回答日時： 2009/11/15 16:47

現在問題となっているのは

・「各画像ボタンにマウスONすると、ON用の画像が出てこずに背景が表示される」
・「印刷がおかしい」

の 2 点ですよね。
これらは IE6 のみの問題ということでいいのでしょうか？
あと元ネタのサンプルはちゃんと表示されるんですかね？

「各画像ボタンにマウスONすると、ON用の画像が出てこずに背景が表示される」 ということの原因として一つ思いつくのは、マウスオーバー時に表示する背景画像を a 要素の background-image に設定している、ということです。 IE6 と IE7 では、ボタンとして表示する画像を a 要素の background-image に設定していますので、マウスオーバー時に a 要素の background-image を設定していると、ボタンを表示するための設定が上書きされてしまってボタン表示されない・・・というわけです。

マウスオーバー時も通常時も背景画像を変更しなくて良い、というのであれば、a 要素ではなく li 要素の background-image に背景画像を指定すれば問題なく動作すると思います。 (a 要素は背景色透過にしておく。)
マウスオーバー時に背景画像を変えたいのであれば、li 要素の backgrund-image に通常時の背景画像を指定して、li:hover, li:active, li:focus の background-image にマウスオーバー時の背景画像を指定すれば、IE7 以降であれば対応できます。 IE6 だとそれだけだとダメなので・・・JavaScript を使うしかないかなぁ、と思ったり・・・。

できるのであれば、背景画像は使わず、背景に表示したい画像も全部まとめてボタン画像にしてしまうのが一番楽な方法だと思います。


もし原因がこれでないのであれば、ちょっと私には原因が思いつきません。 印刷時の問題も、現象を聞いただけではちょっと原因はわかりません。
もうちょっと詳しい情報 (ソースコードとか) を頂ければもうちょっとマシな助言ができると思いますので、もし解決できなさそうであればもうちょっと詳しく教えてもらえればと思います。

この回答への補足

印刷のソースは以下です。
------------------------------------------------------------
@media print {
ul#sidebar_nv
{
overflow: hidden;
width: 910px; height: 71px;
padding: 0px;
margin-left: 5px;
font-size: 1.2em;
}

#sidebar_nv li
{
float: left;
display: block;
overflow: hidden;
width: 180px; height: 71px; /* Navigation Size */
}

#sidebar_nv li a
{
display: list-item;
list-style: disc inside; /* 注：none を設定すると画像も表示されなくなる */
}

/* ボタン指定 "sidebar_nv01" */
#sidebar_nv li.sidebar_nv01 a
{
list-style-image: url("../img/sidebar_nv01.gif");
}

/* ボタン指定 "sidebar_nv02" */
#sidebar_nv li.sidebar_nv02 a
{
list-style-image: url("../img/sidebar_nv02.gif");
}
}
※ボタン画像の個数はもっとありますが文字数制限上、割愛
------------------------------------------------------------
HTML
------------------------------------------------------------
<div id="sidebar_nv_bg">
<ul id="sidebar_nv">
<li class="sidebar_nv01"><a href="#">ABCとは</a></li>
<li class="sidebar_nv02"><a href="#">GAV製品</a></li>
</ul>
</div>
------------------------------------------------------------

GBNaviも印刷は完全には直っていませんでした。画像は出るようになったのですが、配置がずれています。
４ボタンは20pxくらい上にボタンがずれて配置され、ずれた部分はカットされている。１ボタンだけはそのずれがもっとひどく50pxくらい上にずれていました。
が、文字数制限に引っかかるのでここではサイドバーだけのソースにいたしました。
サイドバーの現象内容ですが、サイドバーは縦列にボタンが並ぶはずなのに、何故か横に一列で画像が並んでおります。当然、横一列なのでページの右端で表示は切れてしまいます。具体的には五個まで表示され、六個目からは表示がありません。

なおかつこれだけではなく、画像ボタンと画像ボタンの間にボタン画像と同じだけテキストが表示されております。
●ボタン１　●ボタン１の日本語文字列のみ　●ボタン２　●ボタン２の日本語文字列のみ・・・・・
といった感じです。なぜか半角アルファベットだけ表示されず日本語文字だけが表示されている、という不思議な現象です。

補足日時：2009/11/17 10:25

この回答へのお礼

有難う御座います、作業再開いたしました。

背景画像が表示されてしまう件ですが、ir.htmlのデフォルトである以下の箇所の
背景色を、本件用に制作した背景画像に変えていたのですが、
「#imageReplacing li a」のbackground行と、
「#imageReplacing li a:hover,
#imageReplacing li a:focus,
#imageReplacing li a:active」
のソース自体を削除したらGBNaviもサイドバーもどちらもIE6で直りました！（涙）
このソースでIE７、Firefox、Opera、Safariで逆におかしくなるといったこともありません！
以下のソースを、
------------------------------------------------------------
#imageReplacing li a {
height: 30px;
width: 150px;
overflow: hidden;

display: block;
/*background-color: #000000;
margin: 0px;
padding: 0px;
border: 0px none;
color: #46251A;*/
background-color: #FFF1CC;（←ココに背景画像を指定していた）
}
#imageReplacing li a:hover,
#imageReplacing li a:focus,
#imageReplacing li a:active {
background-color: #F4EFCA;（←ココに背景画像を指定していた）
}
------------------------------------------------------------

以下のソースに変更しました（実際は本件用のID名、画像パスになっていますがわかりやすくするため）。
------------------------------------------------------------
#imageReplacing li a {
height: 30px;
width: 150px;
overflow: hidden;

display: block;
/*background-color: #000000;
margin: 0px;
padding: 0px;
border: 0px none;
color: #46251A;*/
}
------------------------------------------------------------

印刷については補足欄に書かせていただきますね。ひとまずご報告まで！

お礼日時：2009/11/16 13:18

No.6 回答者： nobuoka 回答日時： 2009/11/13 18:23

[PHP には詳しくないですのでちょっとおかしなことを言っているかもしれませんが、その場合はご指摘ください。

]

> 一行目のXML宣言とそれを囲むPHP記述は消せません

ということですが、XML 宣言を消してはいけない理由というのはあるのでしょうか？ 特にないのであれば、XML 宣言は消してしまって、以下のように空文字を出力する (何も出力しない) PHP 記述を冒頭に記述してはどうでしょうか？

--------------------------------------------------------------
<?php echo ""; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …​
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
--------------------------------------------------------------

DOCTYPE 宣言の前に PHP 記述を書いていますが、PHP はサーバ側で処理されるものであるため、IE6 がドキュメントを読込むときには既に PHP 記述はなくなっています。 よって上のように何も出力しない PHP コマンドであれば DOCTYPE 宣言の前に入れていても IE6 でちゃんと表示されるはずです。
また、文字エンコーディングが UTF-8 である場合は XML 宣言を書かなくてよい、ということは XML の仕様で決まっていますので XML 宣言を消すことに関しても問題は無いはずです。 (他の理由で XML 宣言を消せないのであれば考える必要がありますが・・・。)

あと PHP の記述は別に文中のどこに書いてもいいと思いますので、そもそも文頭に <?php echo ""; ?> という記述すら要らないと思うのですが・・・あんまり詳しくないのであんまり突っ込んだことは言わないでおきます。。


あと問題として挙げられている

> 各画像ボタンにマウスONすると、ON用の画像が出てこずに背景が表示されております。
> これはサイドバーにも同様に設置しておりますが同じ現象です。。。

という問題は解決されたんでしょうか？
それと、IE6 でソースを開いたときに 「このテキストはUTF-8(もしくはUTF16ですが、Shift-JISに変換できない文字があります。 これらは、’？’に変換して読み込みました。)」 と出るのは多分ソースコードの問題ではなくて、テキストエディタ側の問題じゃないかなぁと思います。 (もしかすると変な文字がソースコード中にあるのかもしれませんが。)

この回答へのお礼

簡単に導入することができず四苦八苦しておりますがご支援いただけているので何とか頑張ってこれています。有難う御座います。

<?php echo ""; ?> の件ですが、そう言われればサーバが.htaccessのAddTypeに対応していないというガックリなことがあったので要らないかも。。。
というのも、AddType記述が使えれば、.phpにすることなく、.htmlのままで.phpの機能、たとえば欲しい機能であるincludeですね。リンクナビゲーションのところを別ファイル化し、そこさえ記述変更すれば容易に画像ボタンの追加・削除・変更ができるので。
これを達成したかったのですが、AddTypeが使えないのでサーバに.htmlを.phpだと認識させることができなくなったのだから、おっしゃるとおり、もはやご指摘のphp記述は要らない気がしました。。。そうか、ダメだったのに記述が残っていただけだったか。。。
ご指摘ありがとうございます。今、試してみましたがinclude、つまりPHPは機能しているようです。機能していなければインクルードしている箇所はエラー文章が出て表示自体はされませんので。


------------------------------------------------------
> 各画像ボタンにマウスONすると、ON用の画像が出てこずに背景が表示されております。
> これはサイドバーにも同様に設置しておりますが同じ現象です。。。
------------------------------------------------------

はい、これはまだ解決しておりません。仕事場から切り上げされられ、自宅ではIE6が見れないので月曜に改めて作業再開します。

ただ、印刷をしたのですが、妙なことに、
●GBナビ：画像ボタンは表示されず、背景画像（GBナビ周辺もグラフィカルにつながっているので単色背景色ではダメなのでカスタマイズして入れてます）が表示されて、なおかつ背景画像の上に<li>会社概要</li>などのように、文字だけが表示されています。画像ボタンそのものが出ない状況です。

●サイドバーは一行目の画像リンクの次の画像リンクから最後までずっと横並びに出ています。
GBナビと同じく文字だけです（背景は背後の親DIVの背景画像が出ているだけなのでサイドバーについては背景は透明になっていて、右側のコンテンツが下地になっています。

印刷も調査しないといけません。

お礼日時：2009/11/13 23:31

No.5 回答者： nobuoka 回答日時： 2009/11/13 12:33

CSS の変更点に問題はなさそうですね。

というわけで CSS に問題があるのではなくて HTML に問題があるような気がしてきました。 多分レンダリングモードが 「過去互換モード」 になっているのだと思います。

「IE6 でだけ表示がおかしい」 と聞いた時に気づくべきでしたが、IE7 ではちゃんと表示されているのですよね？
ということは CSS には問題が無く、IE6 が 「過去互換モード」 でレンダリングしているのが問題なのだと思います。
ブラウザのレンダリングモードに関してご存知かどうかはわからないですけど、簡単に説明しておきます。 IE5 などの古いブラウザでは、CSS の width や height の指定というのは border や padding も含めた値であると解釈されていました。 しかし、実際の CSS 仕様では width や height は border と padding を含まない、純粋なコンテンツ領域のみのサイズを指定します。 その他にも古いブラウザでの CSS 解釈と実際の CSS 仕様には違いが大きいため、現在のほとんどのブラウザには、古いブラウザの表示と互換性がある 「過去互換モード」 と仕様に従った 「標準準拠モード」 があります。
(もちろんこれらのモードはブラウザ独自のものですので、IE の過去互換モードにおける CSS 解釈と Firefox の過去互換モードにおける CSS 解釈は全然違ったりします。)
Firefox の場合、メニューバーの "ツール" → "ページ情報" でページ情報を開くと "一覧" タブの中に描画モードというのがあり、今見ているページを標準準拠モードでレンダリングしているのか過去互換モードでレンダリングしているのかがわかります。

んで、それらのレンダリングモードはどのようにして切り替えられるかというと、ブラウザがページのソースコードを見て自動的に判断します。 具体的には、DOCTYPE 宣言があるかどうか、あるならばそれが適切であるかどうかを見て判断しているようです。 (「DOCTYPE スイッチ」 というキーワードで調べると色々情報があると思います。)

今回の話を聞いた感じですと touchy さんは XHTML で書いているのではないでしょうか？ IE6 の場合、DOCTYPE 宣言の前に何か文字があると、たとえ DOCTYPE 宣言が正しくても 「過去互換モード」 になってしまうという問題があります。 つまり、XML 宣言があると IE6 では 「過去互換モード」 になってしまいます。

今回の画像置換のコードは、「標準準拠モード」 でないとちゃんと表示されませんので、一度その部分を確認してみてください。

参考URL：http://www.vividcode.info/wd/tec/docswitch.xhtml

この回答への補足

一応、できました。。。
でもこれでホントに大丈夫なんでしょうかという感じです。

お礼欄に書かせていただきましたように、PHPファイルにしたいことがあるので一行目のXML宣言とそれを囲むPHP記述は消せません。
なので、順位を入れ替えてみました。以下のように。

------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …​
<html xmlns="​http://www.w3.org/1999/xhtml"​ xml:lang="ja" lang="ja">
<?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; ?>
------------------------------------------------------------

ダメもとでしたが、別のサイトでやはり.htmlではなく.phpにしているサイトがあり、そこでサイドバーのインクルードソースを使っているのでそのサイトで試しました。
すると、カラム落ちはするものの（苦笑；標準準拠モードになったお陰で今度はこっちが・・・）、PHPでインクルードしているサイドバーもちゃんと動いておりました。

でもこれで良いのか全く安心できません。順序変更したソースなど見たことないので、PHP機能をはじめとして悪い副作用がないのかとても不安です。。。
早くサイトを立ち上げないといけないけれど、もう少し調査するしかないですね。。。頑張ります。。。

補足日時：2009/11/13 14:24

この回答へのお礼

本当に有り難いです。

おっしゃる通りでして、xhtmlで標準準拠モードで書いております。
が、IE6で過去互換に解釈する原因があるのですね。。。
以下が書いている冒頭記述です。includeファイルだけの更新でナビゲーション類が全ページ反映してくれるなどの理由で.phpファイルにしてもおります。

------------------------------------------------------------
<?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
------------------------------------------------------------

「DOCTYPE宣言の前に何か文字があると、正しく書いていても過去互換になる」
ということですが、上記の場合、xmlのバージョン記述とそれを覆うphpのコードがありますのでこれを削除してみました。

すると、余計な二つ目のGBNaviは確かに消えました！


が・・・
各画像ボタンにマウスONすると、ON用の画像が出てこずに背景が表示されております。これはサイドバーにも同様に設置しておりますが同じ現象です。。。
それに、IE6でソースを開くと、
------------------------------------------------------------
このテキストはUTF-8(もしくはUTF16ですが、Shift-JISに変換できない文字があります。
これらは、’？’に変換して読み込みました。)
------------------------------------------------------------
と出てしまいます。困った・・・


それと、DOCTYPE宣言の前のコードですが、PHPファイルにしなければならないのでPHP記述部分は必要ですし、今どきもうXHTMLで標準準拠で書くのはもはや当たり前ですのでどうしたものかと落ち込んでおります。。。

<?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; ?>

現在、別の方法でIE6も標準準拠モードで読ませることができないか探しに入りました。ウ～ン・・・マズイことになった・・・・・

お礼日時：2009/11/13 13:56

No.4 回答者： nobuoka 回答日時： 2009/11/12 22:31

> 何故かナビゲーションがレイヤー重ねされた感じで横300px、縦20pxくらいずれて二重に表示されております

ということですが、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>画像置換を用いた横型メニューのサンプル</title>
<style type="text/css">

ul#imageReplacing {
list-style: none;
width: 151px; height: 30px;
padding: 0px; margin: 20px 300px;
border-style: solid none double solid;
border-color: #46251A;
border-width: 1px 0px 3px 1px;
/*position: absolute; top: 300px; 絶対配置でも問題なし*/
}

#imageReplacing li {
float: left; /* clear: left;*/
width: 150px; height: 30px; /* 画像の大きさ */
/*margin: 0px;
padding: 0px;*/
border-right: 1px solid #46251A;
position: relative;
/*overflow: hidden;*/ /* この指定を有効にすれば解決するのでは？ */
}
#imageReplacing li a {
height: 100%;
width: 100%;
overflow: hidden;
}
#imageReplacing li a { /* IE 6, 7 用 */
display: list-item;
list-style: disc inside; /* none を設定すると画像も表示されなくなる. */
vertical-align: bottom;
line-height: 31px; /* 画像が非表示の場合の文字の位置調節. 画像の高さより 1px 大きめに設定 */
margin-left: -300px; /* 画像幅 * (-1) を指定 */
padding-left: 300px; /* 画像幅を指定 */
background-repeat: no-repeat;
}
#imageReplacing li a:hover,
#imageReplacing li a:focus,
#imageReplacing li a:active { /* IE 6, 7 用 */
background-position: -150px 0px; /* マウスオーバー時などに画像を変えるため */
}
#imageReplacing li.home a { /* IE 6, 7 用 */
background-image: url("http://www.vividcode.info/wd/tec/sample/ir_home. …
list-style-image: url("http://www.vividcode.info/wd/tec/sample/ir_home. …
}
</style>
</head>
<body>
<ul id="imageReplacing">
<li class="home"><a href="../irhmenu.xhtml">HOME</a></li>
</ul>
</body>
</html>

こんな感じの表示になってしまうという事でしょうか？ (IE 6 で表示させてみてください。)
それでしたら、li 要素に overflow: hidden を指定すれば解決するのではないかと思います。 CSS を見てもらえればわかるように a 要素に display: list-item の指定をして、さらに a 要素に list-style-image と background-image を指定しているのですが、本来表示領域外に押し出されるべき list-style-image が見えているのだと思います。

ちなみにこの list-style-image は、画像非表示時には文字が見え、画像表示時には文字が見えないように位置を調整する役目をしてます。 そんなわけで、元ネタのコード中には書いてませんが、#imageReplacing li a の中の margin-left と padding-left には、使用する画像幅の値を指定する必要があります。

果たしてここまでして画像置換をする意味があるのかどうかというと微妙なところではありますが・・・、頑張ってください！

参考URL：http://www.vividcode.info/wd/tec/irhmenu.xhtml

この回答への補足

※お礼欄の続きを以下に記載

------------------------------------------------------------


また、overflow: hidden;
の件ですが、削除しておらずそのままちゃんと記述しているんです。。。
ウ～ン・・・なんで表示がおかしいのですかね。。。
あまりにソースが多かったので、ソースを見ながら自分のCSSに適用すると絶対に表示がエラーになると感じたので、ir.htm、ir.css、irie67.cssなど、実際のソースをまるまるもってきて、それに対して当方固有の変更箇所だけをを差し替えていく手法を採ったのですがおかしいな。
おそらくIE76用のCSSのどこかで変更が足りない箇所があるのでは？と思っているところでした（でもこの箇所じゃないかも。自信無し汗；）。

なお、ir_ie67.cssで自分が設定変更した点ですが、

#imageReplacing
を自分のID名に置換機能で全て変更した。

line-height: 31px; /* 画像が非表示の場合の文字の位置調節. 画像の高さより 1px 大きめに設定 */
ここはですが、当方の画像ボタンの縦幅は70pxありますので、この場合はこの1px大きめに設定する必要はない、と考え、70pxと書き換えた。
※ちなみに、サイドバーにも本CSSスプライトを適用し、ここの縦幅は34pxなので35pxとした（本お礼欄では絞るためにサイドバーのずれ現象については触れておりません。GBnaviで解決できれば同じ箇所だと思うので）。

margin-left: -300px;
padding-left: 300px;
を、自分の画像ボタンの横幅である180pxでとらえ、
margin-left: -360px;
padding-left: 360px;
と書き換えた。

#imageReplacing li a:active { /* IE 6, 7 用 */
background-position: -150px 0px;
の-150pxを、自分のケースの-180pxに書き換えた。

background-imageとlist-style-imageは当然ながら自身の画像URLへ書き換えた。

これらなのですが、間違った箇所がわからないので本編のCSSを調べたりして格闘中です汗；

補足日時：2009/11/13 10:14

この回答へのお礼

ご支援、誠に有難う御座います。

添付画像有難う御座います。それを拝見しますと現象は一致しているように見受けられます。一応正確にお伝えいたしますと、

(1) 正しい位置にGBNaviが表示されている。が、後述するがマウスオンののち、マウスアウトすると違う画像が表示されてしまう。

(2) もうひとつGBNaviが正常箇所からずれて表示されている。しかもリロードするたびに違う表示状態になる。
一番多く見れる表示状態の場合の正常位置からのずれ数値は、横が正常位置からちょうどボタン一個分左にずれ、縦は15px上にずれている。つまり、左上方向にずれている。
そして、マウスをON・OUTしても画像のRollOverはおこなわれない。無反応。

(3) 正常位置のGBNaviはちゃんとRollOverがおこなわれるが、重なりが無い一番右端のGBNaviボタンでマウスONすると、画像が出ずに、背景設定した色が出る。
そして、マウスOutすると元の正常なマウスOUT画像ボタンが再び表示される。


こんな感じです。

※文字数制限につき、補足欄へ続く・・・・・・・・

お礼日時：2009/11/13 10:13

No.3 回答者： nobuoka 回答日時： 2009/11/10 14:06

#1 の方も書いていますが内側のブロックに margin を指定した時に外側のブロック要素に border も padding も指定されていない場合は、外側のブロックも一緒に動いてしますようです。

(Firefox や Safari など。 CSS の仕様がそうなってるような気がしますがちょっと確認できませんでした。)

画像置換の方法としての text-indent に関して悩んでおられるようですが、個人的には確かに使用しない方がいいだろうと思います。 SEO 的にグレーということもありますが、何より画像非表示の環境で何も表示されないというのは (特に企業のサイトなどでは) 避けるべきだと思います。

そこで代わりとなる手段ですが、1 つは単純に img 要素を使う方法があります。
ただ、img 要素を使った場合はたとえ代替文字列を alt 属性に入れていたとしても、テキストを使うよりも SEO 的に不利な気がします。
んで私がよく使う方法は参考 URL のページに書いてある方法です。
一般的ではないですし CSS が結構ごちゃごちゃしてしまうのですが、HTML がすっきりしていて、画像非表示時でもテキストが表示されるという点で text-indent: -9999px を指定するよりも良いと思います。

参考URL：http://www.vividcode.info/wd/tec/irheader.xhtml

この回答への補足

忘れておりました。IE6だけモンダイでした。
何故かナビゲーションがレイヤー重ねされた感じで横300px、縦20pxくらいずれて二重に表示されております。もちろん元ネタは正常に表示されるのでどこかで間違っているのです。。。ウ～ン・・・険しい・・・
でも、これさえ出来ればベストになると信じて頑張ります！

補足日時：2009/11/12 17:49

この回答へのお礼

アドバイス、どうもありがとうございました。
このCSSスプライトをcontentを利用しておこなうのですか。で、対応できないブラウザが主要なのでそこには別にソースを書くと。凝りまくってますね。
でも、CSSスプライト等の画像置換の問題である「背景画像なので印刷できない点」にも配慮されており、手間はかかるものの完璧な気がしました。

それで早速やってみました。
ヘッダー横並びのグローバルナビに適用しましたがなかなかちゃんと表示されず６～７時間かかってやっとできました。
当方のヘッダー横並びのグローバルナビは横幅サイズがボタンによって違いまして、でも本方法が均等サイズでのものとは知らないので最初は気づかずやっていました。しかも、ボタン画像はCSSスプライトという手法になってるんですね～♪これまた知らず、画像が出ない出ないで二時間悩んでました（死）。
でもダメなことを知り、ボタングラフィックを根本から作り直してようやくできました！
いやぁ・・・長かった笑。

でもまだ終わってません。サイドバーのナビもありますし、別に独立して存在させてあるUtilityナビ(サイトマップなど）が二箇所あります。そしてそれぞれ視覚デザイングラフィックは違いますので完成までにはまだまだかかるでしょう。

画像ナビゲーションについて、SEO最適化を損なわず、主要ブラウザの表示がバッチリで、なおかつ視覚的にグラフィカルな画像ボタンにする、というのは本当に厳しい道のりですね・・・。
もっと他に簡単な方法が無いものかなぁ・・・なんでこんなに普通な見栄え機能ができないんだろう・・・

貴重な手法を教えていただき本当にありがとうございました

お礼日時：2009/11/12 14:02

No.2 回答者： twinhourse 回答日時： 2009/11/10 12:46

#1です

marginを使うとそのように親要素も動いてしまうということがあるので、自分はそういう場合marginの代わりにpaddingを指定しています。なので、前の回答ではmarginを全く使わずに#hdr_wrapにpaddingを指定して解決しようと考えていたのですが、h1のみでやるということでしたら、

h1
{
float: left;
padding-left: 62px;
padding-top: 39px;
color: #ccc;
}

h1 a
{
display: block;
width: 228px;
height: 60px;
text-indent: -9999px;
border: 0;
text-decoration: none;
background: url("../img/cmn/hdr_vi.jpg") left top no-repeat;
}

div#hdr_wrap
{
background: #252a2c url("../img/cmn/hdr_bg.jpg") left top no-repeat;
height:220px;
text-align: left;
}

こんな感じでしょうか。

text-indentに関しては、SEO的にグレーというのは聞きますが、個人的にはかなり使っています。まあ、使わないに越したことはないですが、便利ですからね。

参考までにですが、Yahoo!Japan自身は以下のページの中段の赤い「Yahoo!プレミアムに会員登録!」ボタンのところでtext-indent:-9999pxを使っています。まあ、自分はスパムじゃないということが保証されているからかもしれませんが。

Yahoo!ミュージック - 総合音楽サイト
http://music.yahoo.co.jp/

参考URL：http://music.yahoo.co.jp/

この回答へのお礼

再度お手間をとらせ申し訳ありません。
確かにできるようです。ありがとうございました！

お礼日時：2009/11/12 14:04