プロが教える店舗&オフィスのセキュリティ対策術

CSSの質問です。

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

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

A 回答 (11件中1~10件)

整理すると


<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- … )]より

 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;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

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

普段、ul li{}という書き方しか書かないのでちょっと試してみました。




>No.7
ol{list-style-type:none}
とした場合、

<ol>
<li>
<div>
<ol> この部分にもol{}が適用し直される
<li>

というわけで<div>を越えて継承しているように見えますが、実はol{}が適用されているだけです。

------------
>No.9
user agent declarations/user normal declarationsよりauthor nomarl declarationsの方が優先されるんじゃないかと思いますが。。。

.none{
color: blue;
list-style-type: none;
}

<div class="none">
<ul>
<li>aaa
</ul>
<ul>
<li>bbb
</ul>
</div>

colorは継承するのにlist-style-typeは継承されない。

調べてみると、
http://www.w3.org/TR/CSS2/generate.html#propdef- …
>Applies to: elements with 'display: list-item'
この条件で、継承していく内容が<li>以外の所でデフォルトスタイルに戻ってしまうということなのかもしれません。

でもul{ list-style-type:inherit}すれば継承されるという。。。


このHTMLで適用させるためには、やっぱり<li>への指定。
.none ul li{list-style-type: none;}
というのが確実らしいです。

--------
.none{color:blue;list-style-type: none;}

<ul class="none">
<li>aaa
<li>
 <ul>
 <li>bbb
 </ul>
</li>
</ul>

これでも上位しか適用されない。
もちろんli{}と書けば、下位でもli{}が直接適用される。(ので、継承されるわけではない)

----------------
なので、ul-li間は継承するが、それ以外(li-ul含め)では継承しない(ただしinherit指定で継承できる)、
というのがブラウザの実装ではないかと思います。(文法通りの実装ではない?)

私自身が勘違いしている可能性もありますので、悪しからずご了承ください。

検証はMac Safari5.1.7です。
    • good
    • 1

http://www.w3.org/TR/CSS2/cascade.html#cascading …

2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations

だから、ブラウザの ul 要素に対する既定スタイルが list-style-type:desc なんだとおもう。div から継承しないようにみえるけど、ul に list-style-type:inherit を指定すれば、継承するようなきがする。

継承が途中で途切れるのは、ブラウザの要素に対する既定スタイルのせいだったのか。。。
    • good
    • 0

文法に合わせるのであれば、「どちらも正しい」。


ブラウザの実装に合わせるのであれば、li{list-style-type:none}が「より的確(適切)」または「期待通りに表示されやすい」
という表現の方がいいと思います。

どれだけ正しくても、
ブラウザが文法通りに解釈してくれないと意味は無いですから。
(文法至上主義ならそれでもいいのかもしれませんが。)
    • good
    • 0

【追加情報】


仕様書の下の方にかかれてました。
『Authors who use only the descendant selector may not achieve the results they expect. Consider the following rules: 』
 継承は、olやul要素から、子孫のli要素に転写されるので、ol要素ないしul要素に指定することを推奨する。

 では、途中に<div>があると適用されないのかと言うと
<ol>
 <li>あいうえお
  <div>これはテスト
   <ol>
    <li>カキクケコ</li>
    <li>カキクケコ</li>
    <li>カキクケコ</li>
   </ol>
  </div>
 </li>
</ol>
 で、ol{list-style-type:none;}は適用される。
<div>これはテスト
 <ol>
  <li>カキクケコ</li>
  <li>カキクケコ</li>
  <li>カキクケコ</li>
 </ol>
</div>
 でdiv{list-style:none;}は適用されない。

 ブラウザの実装がおかしいという結論で、変ですが、しょうがない。
    • good
    • 0

No.3,No.4です。


実際には、ulかolに書かないと継承されないようです。
 仕様書の書き方が悪いのか、読み方を間違えたか???
【引用】____________ここから
Each property may also have a cascaded value of 'inherit', which means that, for a given element, the property takes the same specified value as the property for the element's parent. The 'inherit' value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Assigning property values, Cascading, and Inheritance( http://www.w3.org/TR/CSS2/cascade.html#value-def … )]より

各プロパティは、与えられた要素に対して、プロパティは、要素の親のプロパティと同じ、指定された値をとる、ということを意味し、 "継承"のカスケード接続された値を持つことができます。 "inherit"という値は、値の継承を強制するために使用することができ、それが正常に継承されていないプロパティでも使用できます。
 --google翻訳

 それで読み返すと
Full property table ( http://www.w3.org/TR/CSS2/propidx.html )
 に、適用範囲のデフォルトはallですが、list-style-typeは、List-itemと書かれている。ulやolはlist-itemではないのに、ulやolに適用すると、子孫のliに適用される。

 このあたりは、ブラウザの実装とスタイルシートの規定が異なる部分でしょう。
ちなみに、
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
では、下記が正しいとされます。
div.nav{list-style-type:none;}
html{list-style-type:none;}
*{list-style-type:none;}

 ブラウザ実装を考慮すると
ul,ol,li{display:block;list-style:none;}
としておくほうが無難と言うことです。
    • good
    • 0

ANo.3> まず、誤解があるようです。



無理やり正しい・正しくないを作っちゃった。。。
[ANo.1] を撤回して、他の回答に 1票ずつ。
    • good
    • 0

No.3 続きです。


 list-style-typeは、どこで指定しても良いことは説明したので実際に使う方法です。

 たとえば、ナビゲーションリストがあるとします。HTMLは、当然
<div class="nav">
 <ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>
</div>
とか、
<div class="nav">
 <ul>
  <li><a href=""></a></li>
  <li><a href=""></a>
   <ol>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
   </ol>
  </li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>
</div>
とかになっているはずですよね。
 ←DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 (HTML4.01 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 ←文書をよりよく構造化するために、次の要素が新しく追加されました。 (HTML5 http://standards.mitsue.co.jp/resources/w3c/TR/h … )

 この様な場合、
div.nav ul,div.nav ol,div.nav li{list-style:none;display:block;margin:0;padding:0;}
 と簡略化プロパティと、セレクタのグループ化で一回で初期値を指定しておきます。
 ここで、
・詳細度が 0,0,1,2 であること。
・display,margin,paddinは、継承されないプロパティだということ。
・子セレクタではなく、子孫セレクタが使われていることに留意

 その上で、子供セレクタを使って
div.nav{width:80%;margin:0 auto;position:relative;}
div.nav li{widt:20%;}
div.nav ul>li{display:inline-block;}/* 詳細度が0,0,1,3 */
div,nav ul li ol{display:none;} /* 詳細度が0,0,1,4 */
 とすれば、詳細度が高くなりますから、横に並び、サブリストは見えなくなります。

>どちらに設定したら規格上違反とかありますか?
 いずれかどころか、適用されれば、記述しても良いです。
    • good
    • 0

まず、誤解があるようです。

CSSは、どの要素にどのプロパティを指定しても良いのです。
本来は、CSSの仕様書にあるようにブラウザのデフォルトの指定では、
ol,ul{display: block;margin: 1.33em 0;margin-left: 40px;unicode-bidi: embed;}
ol{list-style-type: decimal;}
OL UL, UL OL,UL UL, OL OL{ margin-top: 0; margin-bottom: 0 }
@media print {UL, OL, DL{ page-break-before: avoid;}
とかになっています。
 →HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

 ここで、CSSはカスケーディングという重要な仕組みがあって、どのプロパティが適用されるかは?
・出所
・重要度
・出現順番
・継承
・詳細度
 をしっかりと理解しなければなりません。仕様書には
'list-style-type'について、
 Value(とりうる値): disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

 Initial(初期値):disc
 Applies to(適用):elements with 'display: list-item'
 Inherited(継承):yes する ★
 Percentages:N/A
 Media:visual  視覚ブラウザ
 Computed value: as specified
と書かれています。(CSS2.1でvalueの値は随分と増えました。)

 ここでもキーワードは「Inherited(継承):yes」です。継承されるプロパティですから、それよりも上位のすべての要素に記述しても継承されます。
 すなわち、
html{list-style-type:none;}
 とすれば、そのHTML内のすべての Applies to(適用)list-item;にされたものに適用されるのです。

 よく使うのに、
div.aside{font-size:0.8em;list-style:none;}
 で本文と関係ない記事中のフォントは80%で、登場するすべてのlist-itemに何もつきません。もちろん、この指定の詳細度は 0,0,1,1ですから、
div.aside ul{list-style-type:lower-alpha;}とすれば、詳細度が 0,0,1,2 となりますから、任意の位置で指定して上書きされます。
    • good
    • 0

正しい、正しくないというのはありません。



<ul>に指定した場合は、そこに内包する<li>全てに適用されますが、
古いブラウザは適用されなかったと思うので<li>に指定するほうが確実です。
(たぶんIE7以下のIEだけだった気がしますが、記憶が曖昧です。
もちろん、対象ブラウザを最新版のみに限定するのであれば、その限りではありません。)


また、li {} という指定は、
<ul><li>と、<ol><li>の両方に適用されます。

<ul><li>だけに適用したい場合はul li {}とすればいいだけですが、
どちらを使うかは、管理しやすさや目的次第だと思います。
    • good
    • 0
この回答へのお礼

なるほどです。liが正しそうですね。
あとは古いブラウザの問題ですか。

どちらでもよさそうですがliにするよう心がけます。

お礼日時:2012/06/13 14:46

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