スタイルをくわしく調査してみると、なかなか面白い事に気がつきます。
| Q | リスト<li>タグの中に画像をスタイルシートでいれたいのですが・・・・http://www.rakuten.ne.jp/gold/hinoya/index.html↑こちらのページのヘッダーの横並びのナビ（ＨＯＭＥ 新着商品～～～）のように作りたいのですが、ソースを見ると、<li id="○○○">の○○○の部分のスタイルシートに画像が埋め込まれているように思うのですが、どのようなソースになっているのかわかる方、教えてください。よろしくお願いします。 |
| A | スタイルシートは<link href="index.css" rel="stylesheet" type="text/css" media="all" /> とあるので、URLは同じ階層の、ttp://www.rakuten.ne.jp/gold/hinoya/index.cssです（先頭に「h」を補完してね）。で、該当箇所は、/* ----------------------------------------------- Gloval navi----------------------------------------------- */#g_navi{ clear:both;}#g_navi li{ float:left;}#g_navi #g_navi_home a{display:block;width:92px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat 0 0;}#g_navi #g_navi_home a:hover{background:url(new/images/g_navi.gif) no-repeat 0 -42px;}#g_navi #g_navi_newitem a{display:block;width:73px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -92px 0;}#g_navi #g_navi_newitem a:hover{background:url(new/images/g_navi.gif) no-repeat -92px -42px;}#g_navi #g_navi_restock a{display:block;width:86px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -165px 0;}#g_navi #g_navi_restock a:hover{background:url(new/images/g_navi.gif) no-repeat -165px -42px;}#g_navi #g_navi_allitem a{display:block;width:74px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -251px 0;}#g_navi #g_navi_allitem a:hover{background:url(new/images/g_navi.gif) no-repeat -251px -42px;}#g_navi #g_navi_allcategories a{display:block;width:95px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -325px 0;}#g_navi #g_navi_allcategories a:hover{background:url(new/images/g_navi.gif) no-repeat -325px -42px;}#g_navi #g_navi_allbrands a{display:block;width:105px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -420px 0;}#g_navi #g_navi_allbrands a:hover{background:url(new/images/g_navi.gif) no-repeat -420px -42px;}#g_navi #g_navi_searchitem a{display:block;width:110px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -525px 0;}#g_navi #g_navi_searchitem a:hover{background:url(new/images/g_navi.gif) no-repeat -525px -42px;}#g_navi #g_navi_cost a{display:block;width:100px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -635px 0;}#g_navi #g_navi_cost a:hover{background:url(new/images/g_navi.gif) no-repeat -635px -42px;}#g_navi #g_navi_qa a{display:block;width:95px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -735px 0;}#g_navi #g_navi_qa a:hover{background:url(new/images/g_navi.gif) no-repeat -735px -42px;}#g_navi #g_navi_boad a{display:block;width:61px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -830px 0;}#g_navi #g_navi_boad a:hover{background:url(new/images/g_navi.gif) no-repeat -830px -42px;}#g_navi #g_navi_voices a{display:block;width:89px;height:42px;text-indent:-9999px;background:url(new/images/g_navi.gif) no-repeat -891px 0;}#g_navi #g_navi_voices a:hover{background:url(new/images/g_navi.gif) no-repeat -891px -42px;}背景画像は、ttp://www.rakuten.ne.jp/gold/hinoya/new/images/g_navi.gifの一枚だけを使用して、最初の画像はbackground-positionで位置を合わせ、マウスを乗せたときはhoverでpositionを下に（42px）ずらすタイプですね。文字はtext-indent:-9999px;で飛ばしています。 |
Webサービス by Yahoo! JAPAN![[stmx] - ソーシャルマーケットプレイス](http://sun.d-064.com/han/images/banner_program/sp-entertainer_120-60.jpg)
Deluxe の通販濃い情報HUGO BOSS の通販サイト フェイドレス の通販レビューPR
