spanで指定する方法教えてほしいです。

質問

<span class="top">Home</span>

topで指定したのですが、うまく画像が表示されません。
どうすればうまくbackground-colorのimages/btn046_06.gifが表示されるでしょうか？
よろしくお願いします。

htmlの部分

<div id="left_navi">

<ul>
<li><a href="#"><span class="top">Home</span></a></li>
<li><a href="#"><span>Categories</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Categories</span></a></li>

</ul></nav>
</div>

cssの部分

#left_navi{
width:230px;
height:700px;
background-color:#e6e6e6;
float:left;
}

#left_navi ul{
list-style-type: none;
padding-top: 20px;
color:blue;
}

#left_navi li{
padding-top:20px;
}

#left_navi a{
text-align: center;
display:block;
width:100%;
height:40px;
padding-bottom:9px;
padding-top: 11px;
padding-left:-50px;
padding-right:30px;
background-image:url(images/btn046_05.gif);
background-repeat:no-repeat;
color:gray;
}

#left_navi a .top{
background-image:url(images/btn046_06.gif);
}

#left_navi a:hover{
background-image:url(images/btn046_10.gif);
color: blue;
}

回答No.1

DrFell · ベストアンサー

なぜ、spanなのか？理解に苦しみます。理由を教えていただければ、別の答えが出ると思いますが、今回は想像での回答になります。

sinto58167 さんのソースで、しっかりと、images/btn046_06.gifは表示されています。よーく見てください。「span」なので、インライン要素ですので、Homeと文字のある所だけ画像が表示されることとなります。

a または、li全体に画像を反映したいなら、spanをブロックレベル要素に見えるようにしてください。

というか、aとspanは同じにしたいように見受けられます。そこで最初の、「なぜ、spanなのか？理解に苦しみます。」となるわけです。「span」は「a」などの適切な理由がないが、文章構造的に区別が必要な場合に限りつけるタグだから、「a」があるのに、何故？？？？？となるわけです。

この考えに従って、ご提示されているhtmlソースを修正すると
<div id="left_navi">
<ul>
<li><a href="#" class="top">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
</ul></nav><!--<nav>無いよ！-->
</div>

cssソースは

#left_navi a .top{
background-image:url(images/btn046_06.gif);
}
を
#left_navi a.top{/*#left_navi a .topのaの後ろのスペースを削除*/
background-image:url(images/btn046_06.gif);
}
に変更。
となります。

まぁ、spanをブロック要素に表示するプロパティと値でも、表示はできます。

お礼

なぜspanを使うかと言えば、間違ってspanを使えば指定できると覚えてしまってからです。
変な質問をしてしまい申し訳ございませんでした。
ありがとうございました。

回答No.2

ORUKA1951

どこで拾ってきたのかわかりませんが、spanで括る必要はまったく内容に見受けられます。
spanは、
「(DIV要素と)SPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
　言い換えれば、その内容を適切に示す要素(タグと解釈しても良い)が他に無いときに使う最後の手段(HTML5)です。この場合<a></a>と＝なのですから、<span></span>で囲む必要はありません。
　HTMLは
<nav>
<ul>
<li><a href="../">Home</a></li>
<li><a href="./Categories">Categories</a></li>
<li><a href="./About"><span>About</span></a></li>
<li><a href="./Portfolio">Portfolio</a></li>
<li><a href="./Contact"><span>Contact</a></li>
</ul>
</nav>
　HTML4なら
<div class="nav">
<ul>
<li><a href="../">Home</a></li>
<li><a href="./Categories">Categories</a></li>
<li><a href="./About"><span>About</span></a></li>
<li><a href="./Portfolio">Portfolio</a></li>
<li><a href="./Contact"><span>Contact</a></li>
</ul>
</div>
で良いでしょう。

[スタイルシート]は
div.navi{
width:230px;
background-color:#e6e6e6;
float:left;/* floatでないほうがよいかも */
}
div.navi ul,div.nav ul li{
list-style-type: none;
display:block;/* displayがlist-itemなのでblockに */
/* padding-top: 20px;*/ /* これって必要？？？なお、共通な指定は一回で */
/* color:blue; */ /* リンクのない内容はないので要らない */
text-align:center;/* 継承されるので親で */
}
div.nav ul li{
position:relative;/* a要素のサイズの基準にするため */
width:200px;height:40px;/* ここでボタンのサイズとかを決めておく */
/* width:100%にするとpaddingを指定したときはみだします */
margin:10px;
}
div.nav ul li a{
width:100%;height:100%;
display:block;
background:url(images/btn046_05.gif) no-repeat;
color:gray;
}
div.nav ul li a[href="../"]{
background-image:url(images/btn046_06.gif);
}
div.nav ul li a:hover{
background-image:url(images/btn046_10.gif);
color: blue;
}