例えば、こんな場合でも
<ol>
<li>
<ul>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ol>
</li>
<li></li>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
<li></li>
<li></li>
</ol>
こんな場合でも
<ul>
<li>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li></li>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
<li></li>
<li></li>
</ul>
どの階層上のol、ulでも
ulのliには、list-style-typeのdisc(・)が付き、
olのliには、list-style-typeのdecimal(1、2、3…)が付く
cssのシンプルな記述方法を教えて下さい。
何も設定しないと、ulのliが階層によってcircle(○)だったりsquare(■)だったり。
ul liで設定すると、ul内にあるol liが意図しないマークになる。
liのみ設定すると、ulかolのどちらかで意図しないマークになる。
ひょっとしたら、いろんな階層に居る場合を想定した記述方法(ul ol liとか ol ol liとか)
をするしかやり方はないのでしょうか?
No.2ベストアンサー
- 回答日時:
ul{list-style-type:disc;}
ol{list-style-type:decimal;}
ブラウザの持つスタイルは優先順位最下位です。
1)優先順位
ユーザーの最重要宣言されたスタイル
>著者の最重要宣言されたスタイル
>著者のスタイル
>ユーザーのスタイル
>ユーザーエージェントのスタイル
2)継承
list-style-typeは、liについての指定ですが、継承されるプロパティです。
list-style-type'( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
★Inherited: yes
よって、上記の二行で良いです。この場合詳細度はタイプセレクタのみですから、[0 0 0 1]になりますから、必要に応じてセレクタを追加して変更できるでしょう。
⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
は、list-style-typeなどのプロパティより先に、正確にきちんと身につけるべきです。最低でもこれらについて、プロパティより前に詳しく説明していない参考書やサイトは利用したらダメです。
ORUKA1951さん
ありがとうございます。ホント一番簡単で誰でも思いつきそうな設定で良かったんですね。何で気づかなかったのだろう・・・恥ずかしい・・。
ホントにありがとうございました。
No.4
- 回答日時:
>ホント一番簡単で誰でも思いつきそうな設定で良かったんですね。
何で気づかなかったのだろう実は、これは仕様書にも明確に書かれているのです。
⇒リスト: 'list-style-type'、'list-style-image'、'list-style-position'、'list-style'
( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
の一番最後に
引用______________ここから
子孫セレクタのみを使うと意図した結果を得られないことがある。 次の文書で考えてみよう:
・・・【中略】・・・
「level2」のリスト項目に'disc'のマーカーを意図している。 しかし、最初の規則はクラスセレクタを含んでいるので、カスケード処理の順序に従うと2つ目の規則が上書きされてしまう。 それに対して、次に示す規則のように子供セレクタを使えば問題は解決する:
・・・【中略】・・・
もう1つの解決法は、'list-style'をリスト種類の要素にのみ設定する方法である:
・・・【中略】・・・
'list-style'の値はOL要素からLI要素へと継承されることになる。
リスト形式を指定するのにはこの方法を用いるよう推奨する。
引用 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで
仕様書を読むのは、確かに面倒ですが、探せば必要な情報が見つかります。
なお、現行のCSS2.1はこの仕様書(邦訳CSS2.0)からいくつか改訂されています。
⇒変更点(CSS2.1 Appendix C 邦訳)( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )
⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
もあわせて目を通しておくと良いでしょう。
セレクタやカスケーディングというCSS(カスケーディングスタイルシート)の根幹を学ばれると、スタイルシートだけではなく、HTMLもとっても簡潔に分かりやすくなります。
No.3
- 回答日時:
No2です。
基本がいかに大事か。
>ul liで設定すると、ul内にあるol liが意図しないマークになる。
基点となるせれくたがulで、半角スペース(子孫セレクタ)でliが指定してあるため、デフォルトのスタイルでol liにdecimalが指定されていても、ul/olに関わらず、子孫であるliには ul li{}の指定(詳細度0002)が利かなければならない !!はずですよね。
>liのみ設定すると、ulかolのどちらかで意図しないマークになる。
liはタイプセレクタです。
とっても単純な事です。これができてないと言うことは、明らかに大事な基礎をすっ飛ばしています。
★なお、詳細度の計算は現行のCSS2.1では変更になっています。
⇒6.4.3 Calculating a selector's specificity( http://www.w3.org/TR/CSS2/cascade.html#specificity )
No.1
- 回答日時:
ul > li
でul直下のliのみ適用。
ただしIE(7以下だったかな)は対応できないので、結局はごちゃごちゃと指定するかいわゆる「ハック」を使う羽目になると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS display flex の使い方 1 2022/04/25 19:13
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
HTML5のfooterに見出しを付けて...
-
リストの数字のフォントサイズ...
-
リストマーカーをボックス内に...
-
html <ul></ul>の並びで一行空...
-
HTMLで組織図を作成する方法
-
画像にリンクを張ると画像がず...
-
リンク文字同士の間隔を開ける...
-
タイトルの横にサブタイトルが並ぶ
-
ulタグやliタグの中でbrタグ...
-
透明のボックスにリンクを貼りたい
-
IE8でli:hoverが効かない
-
html/cssの、navを2段にする...
-
メニューの横並びで改行されて...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
cssで、入れ子になったリストに...
-
IEで<td>の全角を有効にする方法
-
リストを一行にせずに横並びに...
-
HTMLもしくはCSSのULでリンクを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報