外出自粛中でも楽しく過ごす!QAまとめ>>

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

<div id="side">
<ul id="sidenav">
<li class="a"><a href="test.html">test</a></li>
</ul>
</div>

【css】

div#side {
display: inline;
float: left;
width: 178px;
margin-top: 20px;
text-align:center;
background:#fff;
}

div#side ul#sidenav {
list-style-type:none;
border: none;
}

div#side ul#sidenav li.a {
background:url(../common/side.gif) no-repeat left;
background-position: 6px 11px;
}

div#side li {
position:relative;
width: 165px;
height:40px;
padding: 1px;
margin: 5px;
text-align:left;
border: 1px solid #8c8c8c;
}

このQ&Aに関連する最新のQ&A

A 回答 (3件)

>class指定をしない状態ですと普通に表示されるのですが、


このスタイルシートの書き方はどうなってますか?

>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか?
    • good
    • 1
この回答へのお礼

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

>このスタイルシートの書き方はどうなってますか?

div#side ul#sidenav li {
background: url(../common/test.gif) no-repeat left;
}

このように表記していました。
が、ご指示頂いたセレクタのbackground-positionを消してみたら、よくわからないのですが無事に表示がされました!
本当にありがとうございます! 感謝です。

お礼日時:2011/08/04 10:04

>htmlやcssの記述に対する細かいツッこみは勘弁して下さい。


 それに原因があるので、申し訳ありませんがどこが間違っているか指摘できません。

 きちんと子孫セレクタ(空白スペース)や、セレクタのグループ化、詳細度の勉強をしましょう。
    • good
    • 0
この回答へのお礼

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

お礼日時:2011/08/04 10:00

ちょっとよくわからないのですが



>ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが
それぞれのclassに異なる背景画像を表示させるというのに
背景画像が書いてあるclassが一つしかないのですが・・・。

<li class="a"><a href="test.html">test</a></li>
<li class="b"><a href="test.html">test</a></li>
<li class="c"><a href="test.html">test</a></li>

となっていて

div#side ul#sidenav li.a {
background:url(../common/side1.gif) no-repeat left;
background-position: 6px 11px;
}

div#side ul#sidenav li.b {
background:url(../common/side2.gif) no-repeat left;
background-position: 6px 11px;
}

div#side ul#sidenav li.c {
background:url(../common/side3.gif) no-repeat left;
background-position: 6px 11px;
}

これをしたいのでしょうか・・・?
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
言葉が足りなくて申し訳ありません、そういう事です。
実際はそのように表記しているのですが上手く行きません。

お礼日時:2011/08/04 10:00

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qcssでロールオーバーを作る時、
  • にidをふる理由
  • ナビゲーション部分などで、CSSでロールオーバーを作成する場合の質問です。

    <ul>
    <li id="navi1"><a href="#">ナビ1</a></li>
    <li id="navi2"><a href="#">ナビ2</a></li>
    <li id="navi3"><a href="#">ナビ3</a></li>
    </ul>

    htmlでは上記のように記し、cssで

    #navi1 a{
    display:block;



    }
    #navi2 a{
    display:block;



    }

    というように表記しています。
    参考書やネットで検索した際も上記のように書かれているのですが、
    なぜ<li>にidを振るのでしょうか?
    <a>にidを振る形は間違っているのでしょうか?

    初歩的な質問かもしれませんが、よろしくお願いします。

    Aベストアンサー

    背景画像を使った画像置換をさせなければ別に必要ないと思いますけど

    idなりclassなりなんらかのユニークな印を付けなければ、個別でロールオーバーの画像を(cssのみで)指定できませんよね?

    あとはaタグの親要素につけたほうがシンプルになるからじゃないでしょうか。

    Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

    こんにちは。タイトルの通りサイト作成で、
    画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

    参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

    画像とテキストの兼ね合いで、画像の右側や左側に、
    ところどころで間隔が欲しいと思っています。

    間隔をいじれるところといえば縦間隔、横間隔になりますが、
    縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
    これらが一度に動いてしまうのです。
    片方には確かに欲しい間隔が得られるのですが、
    ほう片方に要らない間隔ができてしまい困っています。

    例えば右だけに間隔が欲しい。
    左だけに間隔が欲しい。

    こういう場合って、何かやり方があるのでしょうか。

    もともと余白込みの画像を用意するという手も講じましたが、
    その場合はその場合で、その画像が他のレイアウトに流用しづらい
    という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
    対症療法としてはうまくいきませんでした。

    また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
    セルがあまりにも絡まりあってしまい、
    かなりぐちゃぐちゃなものになるためうまくいきませんでした。

    やはりもうちょっと詳しい方にお訊きしようと思いまして
    質問を立てさせていただきました。
    素人質問で大変申し訳ありません。
    どうぞ宜しくお願いいたします。

    こんにちは。タイトルの通りサイト作成で、
    画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

    参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

    画像とテキストの兼ね合いで、画像の右側や左側に、
    ところどころで間隔が欲しいと思っています。

    間隔をいじれるところといえば縦間隔、横間隔になりますが、
    縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
    これらが一度に動いてしまうのです。
    片方には確かに欲しい間隔が得られるのですが、
    ほう片方...続きを読む

    Aベストアンサー

    HTMLの初歩です。具体的には、
    -------------------------------------------
    <img src="○○.gif" width="100" height="100" alt="*"
    style="margin: 10px 20px 0 30px;">

    上10px 右20px 下0 左30px の四方の隙間が開く。
    数値は例なので適当に変更を。
    -------------------------------------------

    <img src="○○.gif" width="100" height="100" alt="*"
    style="margin: 5px 20px;">
    上下5px 右右20px の2方の隙間が開く。

    Q

    CSSの質問です。

    <ul>と<li>でリストマークを消すために
    list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

    どちらに設定してもリストマーク消えますけど。
    どちらに設定したら規格上違反とかありますか?

    Aベストアンサー

    整理すると
    <div class="nav">
     <ul>
      <li>
    において、
    div.nav{list-style-type:none;}
     では、リストマークは消えない。
     しかし、
    <div class="nav">
     <ul>
      <li>
       <div>
        <ul>
         <li>
    では、
    div.nav ul{list-style-type:none;}
    で、途中にdivがあっても、リストマークは消えます。

     仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
    【引用】____________ここから
    Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

     OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

     このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

     listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
     そこで、私は、
    div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
    といったんリセットしてから、様々な指定を付け加えていくことにしています。

     文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

    整理すると
    <div class="nav">
     <ul>
      <li>
    において、
    div.nav{list-style-type:none;}
     では、リストマークは消えない。
     しかし、
    <div class="nav">
     <ul>
      <li>
       <div>
        <ul>
         <li>
    では、
    div.nav ul{list-style-type:none;}
    で、途中にdivがあっても、リストマークは消えます。

     仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
    【引用】____________ここから
    Inheritance will transfer the 'list-style' values fr...続きを読む

    QCSS、width100%でもできる余白

    CSSに関する質問です。
    上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
    どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

    また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

    コードは以下のとおりです。

    HTML

    <html>
    <head><link rel="stylesheet" type="text/css" href="css.css" /></head>
    <body>

    <div id="header">
    <div class="centerbox">
    <div id="lang"><ul><li>EN</li><li>CZ</li></div>
    <div id="logo"></div>
    <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
    </div>
    </div>
    <div id="contents"><div class="centerbox">contents</div></div>

    <div id="footer"><div class="centerbox">footer</div></div>

    </body>
    </html>


    CSS

    body{color:white; width:100%;}
    .centerbox{width:500px; height:100%;}
    a:hover{background-color:red;}

    /*base layout*/
    #header{width:100%; height:auto; text-align:center; background-color:black;}
    #lang{text-align:right;}
    #lang li{list-style:none; display:inline; margin-left:10px}
    #logo{float:left; width:150px; height:80px; background-color:white;}
    #menu{text-aign:right; margin-top:50px;}
    #menu li{list-style:none; display:inline; margin-left:10px}
    #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
    #footer{width:100%; height:100px; text-align:center; background-color:black;}

    CSSに関する質問です。
    上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
    どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

    また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

    コードは以下のとおりです。

    HTML

    <html>
    <head><link rel="stylesheet" type="text/css" href="css.css" /></head>
    <body>

    <div id="header">
    <div class="centerbox">
    <div id="lang"><ul><li>EN</li><li>CZ</li></div>
    <di...続きを読む

    Aベストアンサー

    スタイルシートの書き始めに、
    html,body{margin:0;padding:0;}
    の一行を入れておくようにすれば回避できます。
     これは常に入れておきましょう。

     なお、今後のために・・・どの部分が影響しているかは
    *{border:solid 1px red;}
    を入れてみると、わかりやすいです。

    また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

    Qテーブル内の文字サイズを変更したい。

    HTMLのテーブル内の文字サイズを変更したいのですが。
    イマイチ上手くいかずに悩んでいます。
    出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
    <TD>タグや<TR>タグのところでいじくるのですか?

    Aベストアンサー

    いろいろやり方はありますが
    文字単位でサイズを変更するには
    #2の方法ですね。

    テーブルごとやセル(<TD>)ごとにサイズを変更するには
    スタイルシート(CSS)を使用します。

    テーブルごとにサイズを変更する場合
    <TABLE style="font-size : 20px;">

    セル(<TD>)ごとにサイズを変更する場合
    <TD style="font-size : 20px;">あああ</TD>

    #1の方法だとページ内の全てのセル(<TD>)に設定することになります。

    スタイルシート(CSS)はこれら以外にも
    いろいろな設定方法があります。

    Q「CSS」リストの2段組どのように組まれていますか?(同一カテゴリの場合)

    リストの2段組ですが、皆さんどのように組まれていますか?

    リストの項目が同一カテゴリーだった場合です。
    例えば下記のような同一カテゴリー(花)の場合
    ・チューリップ
    ・あじさい
    ・たんぽぽ
    ・ひまわり
    ・すみれ
    ・パンジー

    これを
    =============
    ・チューリップ  ・ひまわり
    ・あじさい     ・すみれ
    ・たんぽぽ    ・パンジー
    =============
    のように表示させたい場合です。
    投稿した後に表示がズレるかもしれませんが、
    ・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

    苦肉の策で下記のようなマークアップをしています。
    <ul class="left">
    <li>チューリップ</li>
    <li>あじさい</li>
    <li>たんぽぽ</li>
    </ul>
    <ul class="right">
    <li>ひまわり</li>
    <li>すみれ</li>
    <li>パンジー</li>
    </ul>
    そして左右にfloatさせています。
    ただ、これだとリストが途中で分断されてしまって
    正しいマークアップとは言えないですよね・・・。

    こういうケースって結構あるのでは、と思い、
    色んなサイトを巡りましたが見つからず。

    皆さんこういったケースの場合どのように組まれてますか?
    いっそテーブルの方が良いのでしょうか?
    項目は後から追加するものと想定してください。
    (縦に可変していきます)

    どうぞ宜しくお願いいたします。

    リストの2段組ですが、皆さんどのように組まれていますか?

    リストの項目が同一カテゴリーだった場合です。
    例えば下記のような同一カテゴリー(花)の場合
    ・チューリップ
    ・あじさい
    ・たんぽぽ
    ・ひまわり
    ・すみれ
    ・パンジー

    これを
    =============
    ・チューリップ  ・ひまわり
    ・あじさい     ・すみれ
    ・たんぽぽ    ・パンジー
    =============
    のように表示させたい場合です。
    投稿した後に表示がズレるかもしれませんが、
    ・ひまわり ・すみれ...続きを読む

    Aベストアンサー

    確かに下のソースだとIEで駄目でした・・・
    以下の部分を追加してください。


    .left {
    width:251px;
    float:left;
    clear:left; /* ←追加する場所 */
    }

    Qテーブルセル余白(例えば左側だけ、上側だけ、など)

    こんにちは。
    宜しくお願いいたします。

    テーブル内のコードに、cellpadding="5" は
    セル余白が上下左右のすべて、5ピクセル空きますが、

    左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
    指定方向のみ、余白を作ることは可能でしょうか。

    その場合のHTML記述を教えてください。

    また、ここで質問させていただいている「指定方向への余白指定」と
    全体余白指定の「cellpadding="XX"」は同時に使って
    良いものでしょうか。
    素人質問ですみません。
    宜しくお願いいたします。

    Aベストアンサー

    1つのセルだけなら、下記で。
    <td style="padding: 5px 10px 20px 30px;">
    上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
    適当に数値変更してください。
    cellpadding="5" と style="padding: 5px;"は同じになるはず。
    <td style="padding: 5px;">

    両方使うとどうなるかは、試して下さい。
    cellpadding をここ数年利用していないので・・・

    複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
    <style type="text/css">
    <!--
    td {padding: 5px 10px 20px 30px;}
    -->
    </style>


    人気Q&Aランキング