【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

HTML5で組んだページでCSSを使っています。

bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。

【効く】 body { background-image: url("./images/haikei.jpg"); }
【効かない】 #contents { background-image: url("./images/haikei.jpg"); }

そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。

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

A 回答 (7件)

body以外では、background-imageプロパティは、width、heightを指定しないと表示されないようです。

    • good
    • 6
この回答へのお礼

ご回答いただき、ありがとうございました。
その点については、No.5さんのご指摘をいただいたときに、思いました。提示させていただいたように、<body>の後に要素が入らずに<div id="contents">がきていますから、高さがないことが原因であればbodyにも効かないはずでは?と推測しました。
恥ずかしながら、No.2さんのご回答ではじめて「詳細度」という言葉を知ったのですが、そのあたりが関連しているのでしょうか。

お礼日時:2014/01/11 08:53

#5です。

ソースのご提示ありがとうございます。

当方で試しましたが、効かないとされている方のcssとご提示のhtmlをソースとしたファイルを作成し表示させました。Ie/firefox/chomeで背景は表示されています。

他に問題があるのではないですか?現象が確認できないのでお望みのことはできていますとしか、答えられないです。
    • good
    • 1
この回答へのお礼

お手間とお時間を割いていただき、深謝いたします。
情報の提示が後手後手にまわりたいへん恐縮ですが、表示環境はXP/Chromeでした(バージョンは今はわかりません)。
HTML、CSSとも、やっていることはシンプルのつもりなので、原因をしぼれずに困惑しています。

お礼日時:2014/01/11 08:45

No.3さんへの回答が気になります。


それでつまり、目的のdivの中に「h1、navをルートとしたulやli、footerをルートとしたp」などが入っていて、divが空ではなく高さがあったのか、高さが全くなかったのかが問題です。

divの中身がない場合、背景は表示されません。なぜなら、divに高さがないため背景は必要ないのです。コンテンツとしてのimgならそれが主体になり、表示されますが、背景は背景が必要な場合にのみ出るわけで、主体もないのに背景だけでることはないです。

その為、そのdivをheight: 794pxと背景をだす高さを指定すると出現したのではと考えたNo3さんへの答えがどっちとも取れるようなので困りましたね。

そのdivに<p>ああああ</p>とかを入れて試し、2行、3行にして試して、徐々に出現するなら、やはり高さがないからだし、違えば他の事を考えないと。

その事象が出現する最低限のソースを頂くのが一番早いですが。ご存知の通り、cssソースだけもらっても、検証できません。
    • good
    • 1
この回答へのお礼

ご回答いただき、ありがとうございます。不十分な状態で質問してしまい、申し訳ありませんでした。そのままを載せることはできないのですが、以下のようなHTMLソースでした。

<body>
<div id="contents">

<header>

<nav id="nv_l">
<ul>
<li><a href="" title="">メニュー</a></li>
<li><a href="" title="">メニュー</a></li>
<li><a href="" title="">メニュー</a></li>
</ul>
</nav>

<h1>ページタイトル</h1>

<nav id="nv_r">
<ul>
<li><a href="" title="">メニュー</a></li>
<li><a href="" title="">メニュー</a></li>
<li><a href="" title="">メニュー</a></li>
</ul>
</nav>

</header>

<footer>
<p>
Copyright(C) hogehoge all rights reserved.
</p>
</footer>

</div>

</body>

お礼日時:2014/01/10 20:40

簡単なサンプル


★タブは_に置換してあるので戻す。

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<style media="screen">
<!--
html,body{margin:0;padding:0;height:100%;width:100%;}
body{
background:silver url("./images/haikei.jpg");
background-size:contain;
}
header,section,footer{
background-image:url("./images/haikei.jpg");
padding:5px;
width:60%;margin:0 auto;
min-height:20%;
background-size:cover;
opacity:0.7;
}
section{position:relative;;min-height:60%;}
section h2,section p{margin-left:20%;}
section aside{width:18%;height:100%;position:absolute;top:0;left:0;background-color:rgba(255,255,255,0.8);}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="#">Some</a></li>
____<li><a href="#">navigation</a></li>
____<li><a href="#">links</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
___記事
__</p>
__<aside>
___<h3>Something aside</h3>
__</aside>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
    • good
    • 1
この回答へのお礼

具体例をご提示いただき、ありがとうございます。
不勉強で知らない点が多々ありました。早速ためしてみたいと思います。

お礼日時:2014/01/10 09:19

> 根拠がわからないので解決にはなりませんが、


> #contents { height: 794px; background-image: url("./images/haikei.jpg"); }
> (※heightの値は、haikei.jpgの高さです。)
> としたら表示されました。

もしかしてdivタグの中身が空っぽだったんじゃないでしょうか?
    • good
    • 1
この回答へのお礼

ご回答いただき、ありがとうございました。
h1、navをルートとしたulやli、footerをルートとしたpなどにテキストは入っていました。

お礼日時:2014/01/10 09:16

>そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。


 これは意味が違います。
【引用】____________ここから
Note: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html … )]より
 直訳すると「他に適切な要素がないときの最後の最後の手段としてdiv要素を使うことを強く推奨する。div要素より適切な要素を使用することは、著者にとっては保守性の向上に、読者にはってはより良いアクセス性につながる。」
 元々、1999年勧告のHTML4.01のときから『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』とされてきましたから、
<div class="article">
  <div class="header">文書のヘッダ</div>
  <div class="section">本文</div>
  <div class="footer">文書のフッタ</div>
</div>
とされてきたと思いますが、それが、HTML5では
<article>
  <header>文書のヘッダ</footer>
  <section>本文</section>
  <footer>文書のフッタ</footer>
</article>
とマークアップせよと言う意味です。

【効く】 body { background-image: url("./images/haikei.jpg"); }
【効かない】 #contents { background-image: url("./images/haikei.jpg"); }
前者は詳細度は0,0,0,1、後者は0,1,0,0ですので、これによって、利く利かないが変わる事はありません。




 
    • good
    • 0
この回答へのお礼

ご回答いただき、ありがとうございます。
大元を読んで理解しなければならないと思いながら、つい手近なものに目を向けてしまいます。自戒します。

お礼日時:2014/01/09 16:20

タイプミス等ありませんでしょうか?


手元で試す限り、効かないと書かれているcssの記述でも問題なく表示されます。

HTML5にもdivタグはありますので、利用可能です。
    • good
    • 1
この回答へのお礼

ご回答いただき、ありがとうございます。
タイプミスは無かったと思います。

根拠がわからないので解決にはなりませんが、

#contents { height: 794px; background-image: url("./images/haikei.jpg"); }
(※heightの値は、haikei.jpgの高さです。)

としたら表示されました。

お礼日時:2014/01/09 16:11

この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の方も修正する方法でもよけ...続きを読む

QCSSで背景画像が表示されない

CSSレイアウトで通常のHTMLで作成しています。
背景画像が表示されないくて困っています。
他の方の質問で似た事例があったのと、
情報サイトを見てみたのですがどうしても上手くいきません。
この場合floatとclearはどう使えば背景が表示されるのでしょうか?

http://oshiete1.goo.ne.jp/qa3882745.html
http://2nose.com/css/?ID=120

bodyには別背景を指定してあるのでbodyへの指定はできません。
何かアドバイスがあれば教えて頂けますでしょうか。(__)
確認はIE8です。

[ css ]-----------------------------------------------------

#wrap{
width: 920px;
height: 100%;
margin-left: auto;
margin-right: auto;
background: url(../img/background.jpg) repeat-y;
}
#contents{
clear: both;
}
#sidemenu{
width: 275px;
float: left;
}
#mainbox{
width: 570px;
float:right;
}

[ html ]----------------------------------------------------

<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
</div>
</div>

以上です、よろしくおねがいします!

CSSレイアウトで通常のHTMLで作成しています。
背景画像が表示されないくて困っています。
他の方の質問で似た事例があったのと、
情報サイトを見てみたのですがどうしても上手くいきません。
この場合floatとclearはどう使えば背景が表示されるのでしょうか?

http://oshiete1.goo.ne.jp/qa3882745.html
http://2nose.com/css/?ID=120

bodyには別背景を指定してあるのでbodyへの指定はできません。
何かアドバイスがあれば教えて頂けますでしょうか。(__)
確認はIE8です。

[ css ]--------------...続きを読む

Aベストアンサー

floatというのは特殊で、floatが指定されているブロック要素(今回は#sidemenu,#mainbox)を囲むブロック要素は高さが0になります。

なので#contentsのbackgroundに指定をしても何も表示されなかったでしょう?floatのが指定してあるブロック要素の高さは無視されます。
なので、例え#sidemenu{height:500px;}と指定してもこの場合#contentsは高さ0のままです。

またclearの指定方法も間違っています。floatを囲うブロック要素にclearを指定しても何も意味はありません。
この場合使うとしたら
<div id="wrap">
<div id="contents">
<div id="sidemenu">サイドメニュー内容</div>
<div id="mainbox">メインコンテンツ</div>
<div style="clear:both"></div>
</div>
</div>
でしょうね。これで初めてclearの意味が出て#contentsと#wrapの高さが出ます。ただ、これだと空のボックスが生まれる為W3Cに準拠したコーディングとは言えませんが。
また例えば#sidemenuの内容よりも#mainboxの内容が多く#sidemenuの内容の高さの方が低くなってしまう場合はどうやっても現在のCSSでは#sidemenuの高さを#mainboxの高さまで広げる事は不可能です。CSS3.0では可能だったりしますが、IE6等が対応してないのでとりあえず置いときます。
その場合は#sidemenuの背景だけが欲しい場合でも#contentsに背景を指定します。これで#sidemenu,#mainboxどちらが高くなっても高い方の高さまで背景が反映されます。
#contents{backgrounde:url(画像) repeat-y left top}
のように#sidemenuの背景の幅の画像を左側に寄せて縦だけにリピートさせます。repeat-xかも。。忘

ちなみに上の方に書いたclearのかかったdivをおく対処法ですが、先ほども述べたように空のブロック要素は本来書かないほうがよいです。
参考サイトのにかかれてあるようにafter疑似要素というのを利用してfloatを解除します。
ネットで「float after疑似要素 解除」などで調べると出てきますが、もしプロの方でなければ空要素の<div style="clear:both"></div>を書くのが楽です。できれば疑似要素のfloat解除はサイト制作に必須スキルですので勉強した方が勿論よいですが。

参考URL:http://www.cptskgj.com/ilog/2008/04/css-floatclearfix.php

floatというのは特殊で、floatが指定されているブロック要素(今回は#sidemenu,#mainbox)を囲むブロック要素は高さが0になります。

なので#contentsのbackgroundに指定をしても何も表示されなかったでしょう?floatのが指定してあるブロック要素の高さは無視されます。
なので、例え#sidemenu{height:500px;}と指定してもこの場合#contentsは高さ0のままです。

またclearの指定方法も間違っています。floatを囲うブロック要素にclearを指定しても何も意味はありません。
この場合使うとしたら
<div id="...続きを読む

QIEで背景画像が表示されない

【HTML部分】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あああああ</title>
<link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
あいうえお
</body>
</html>

【CSS部分】
body {
background-image: url("./img/back.jpg");
background-repeat: repeat;
}

Firefox系やchrome系では背景が表示されるのですが、IEでのみ白色となってしまいます。
検索してひと通りの解決方法を試してみましたがどれもうまくいかず…。
解決のヒントをいただけたらと思います。
よろしくお願いしますm(_ _)m

Aベストアンサー

>("./img/back.jpg");
部分をフルパスか、本体BODYに直接指定するかでどうですか?

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qスタイルシートで、背景画像が表示されない

スタイルシートで、背景画像(header.jpg')を設定してるのですが表示されません。

 --- style.css
    newpage5.html

 --- img ┐
       header.jpg

スタイルシートは

border-bottom: 1px solid #FF9900;
background-image: url('img/header.jpg');
padding: 20px;

ホームページビルダーでは、簡易表示されてるんですが
アップロードすると、画像が表示されないのですが・・・

以上宜しくお願いします。

Aベストアンサー

>img
半角小文字や/img/ディレクトリで間違いなく、
また、border-bottom: 1px solid #FF9900;が表示されてるなら外部CSSは問題ないので、

絶対パスで画像だけ表示してみる。
http://www.○○.com/img/header.jpg

HTMLファイル内の適当な所に表示してみる。
<img src="img/header.jpg" width="200" height="200" />

style属性で書いてみる。
<div style="width: 200px; height:200px; background: url(img/header.jpg);">テスト</div>

↑このセレクタを #idや.class で適応してみる。
<div id=" ">テスト</div>

別の表示可能な画像.jpgと入れ替えてみる。

別の名前で新規保存して表示してみる。

これらで原因がわかれば、対処もできますが、
単なる記述ミスの場合が多いのでは・・・

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 )を使うと、このあたりがよくわかると思います。

QCSSでDIVで挟んでいるのに背景色が出ない?

CSSと(X)HTMLでページを作っています。角丸なページにしたいため、

/* ---------- 角丸画像の上辺 ---------- */
#main_contents_header {
width: 800px;
height:20px;
background:url(./top.png) no-repeat top;
margin: 10px auto 0px;
padding: 0;
text-align: center;
}

/* ---------- 上辺と下辺の間のメイン部分 ---------- */
#main_contents {
background:url(./bg.png);
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}

/* ---------- 角丸画像の下辺 ---------- */
#main_contents_bottom {
width: 800px;
height:20px;
background:url(./bottom.png) no-repeat top;
margin: 0 auto;
padding: 0;
text-align: center;
}

というCSSを作り、

HTMLは

<div id="main_contents_top"></div>
<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>
<div id="main_contents_bottom"></div>

という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。

<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>

という書き方ではダメなのでしょうか・・・?

確認はFirefoxとSafariでやっています。

CSSと(X)HTMLでページを作っています。角丸なページにしたいため、

/* ---------- 角丸画像の上辺 ---------- */
#main_contents_header {
width: 800px;
height:20px;
background:url(./top.png) no-repeat top;
margin: 10px auto 0px;
padding: 0;
text-align: center;
}

/* ---------- 上辺と下辺の間のメイン部分 ---------- */
#main_contents {
background:url(./bg.png);
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}

/* ---------- 角丸画像の下辺 ------...続きを読む

Aベストアンサー

最初のソースでいいですので、以下を試してください。
#main_contents_bottom {}
内部に
clear:both;
を入れる。
</div>
<div id="main_contents_bottom"></div>

<div id="main_contents_bottom"></div></div>
にする。要は下のコーナーも一くくりにする
以上


簡単にいうとfloatとは浮かせて右か左に配置させる指示です。浮いているので高さが無く高さがないので背景が無いというような状態です。でclearとはそれをクリアーする指示。floatがleftだけなら、clear:leftでもオッケイ。というわけ。

html的物理レイアウトの悪癖をひきづっておられるようです。Web標準を学ばれるとレイアウトがとんでもなく楽になるので、初歩からの学習をおすすめします。

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リストの左余白の削除方法

<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 {

にするだけ

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...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング