- ベストアンサー
CSSリストスタイルの表示方法
- 新規に作成するページで数字のリストを作成したい場合、<ol>タグを使用します。
- ただし、<ol>タグの中に<li>タグを記述する際には、list-style:none;が適用されている可能性があります。
- そのため、数字の表示を復元するには、<li>タグにプレースホルダーのコンテンツを追加することで対処できます。
- eri0055896
- お礼率90% (46/51)
- CSS
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
おそらく、 他に<ol><li>が無かったのでしょうね。だから問題無かった。 ～～～ li { list-style:none;} となっていると思うので、 <ul><li>も<ol><li>も両方の行頭マークが表示されないのです。 ～～～ ul li { list-style:none;} と書き換えてやりましょう。 そうすれば、 <ul><li>のマークだけlist-style:none;なので今のまま表示されずに、 <ol><li>に数字番号が表示されます。 ---------------- その他の、リストのデザインがセットであれば、 ～～～ ul li { list-style:none; font-size:85%;} 分けて、 ～～～ ul li { list-style:none;} ～～～ li { font-size:85%;} などとしてあげる。
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ol li { list-style-type: decimal; } これを追加でどうでしょうか。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 すみません。olとul間違えてましたね。 本文中にulが無いのなら、 ul , ul li{display:block;list-style:none;} [0,0,0,1] [0,0,0,2] とすれば良いです。(あくまで当面の妥協策です。) ul li{}は子孫セレクタで、ulの子供にあるすべてのliに適用されます。 この場合、タイプセレクタ単独ですから ul li ol liにも適用されてしまいますし、他の場所のliすべてに適用されてしまいますから、本来は、どの構成要素(たとえばナビゲーションリンク)のみ適用させるようにしたほうが良いことにはかわりません。
お礼
回答ありがとうございます。 コーディングはまだまだ勉強不足で 詳しく説明してくださり勉強になりました。 ありがとうございます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
詳細度を変えて、いずれかが目的のものだけに適用されるようにするのが早いです。 具体的にはHTML全体を見なければなりませんが、ちゃんとしたHTMLなら div.section ul{list-style-type:decimal;} div.section ul li{display:list-item} 本文中のulは、liはと言う意味 もしくは、 ul,ul li{display:block;list-style:none;} を div.nav ul,ul li{display:block;list-style:none;} ナビゲーションのulとliに適用と書き換える。 ★HTMLがきちんと文書構造にしたがってマークアップされていれば、このようにCSSだけの変更で済みます。 使われているスタイルシートはカスケーディングスタイルシートでしょうから、カスケーディングの機能を使うと良いです。というか、それがCSSの絶対的な特色ですからね。 CSS2邦訳 6.4 カスケード処理（The cascade） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade ) ★ただし、詳細度については、現在標準であるCSS2.1では変更されているのでご注意ください。 6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity ) 詳細度の計算はCSS2.1(邦訳なし)を見ること!! より具体的な例 <body> <div class="nav"> <ul> <li></li> に対して、CSSが ul li{color:red;}ならすべてのulの子孫のliの前景色は赤になりますが、詳細度は[0,0,0,2]ですね。 div.nav ul li{color:green;}とすれば、詳細度が[0,0,1,3]になりますから、登場する順番に関わらず、ナビゲーションのliの前景色は緑になります。 逆に、本文のulを戻してもよいが、面倒くさいのでナビゲーションのliだけdisplay:block;list-style:none;にしましょう。
お礼
回答ありがとうございます。 コーディングは勉強不足で分からない事だらけですので 非常に詳しい説明で勉強になりました。 ありがとうございます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
回答ありがとうございます。 そのサイトには今まで olがなく私が始めて使用したので ul li{list-style:none;} にしたらうまくいきました。 ありがとうございます。