CSSリストスタイルの表示方法
- 新規に作成するページで数字のリストを作成したい場合、<ol>タグを使用します。
- ただし、<ol>タグの中に<li>タグを記述する際には、list-style:none;が適用されている可能性があります。
- そのため、数字の表示を復元するには、<li>タグにプレースホルダーのコンテンツを追加することで対処できます。
- ベストアンサー
ＣＳＳのリストスタイルについて
別の人が作成したホームページの更新をしています。 そのホームページ全体に ul と li に list-style-noneのスタイルシートがかかっています。 新規に作成するページで 数字のリスト １．目次 ２．手引きについて ３．今後の流れについて というような数字のリストを作成したいのですが <ol> <li>目次</li> <li>手引きについて</li> <li>今後の流れについて</li> </ol> とすると通常目次についての前に数字の１が 手引きについての前に数字の２が表示されるかと思うのですが 表示されません。 ulとｌｉのlist-style-noneになってるからなのですが これは他のページがくずれるので解除できません。 どのような記述をすれば表示されるでしょうか？ 初歩的な質問で申し訳ありませんが ご回答よろしくお願いいたします。
- 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/2281)
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;にしましょう。
お礼
回答ありがとうございます。 コーディングは勉強不足で分からない事だらけですので 非常に詳しい説明で勉強になりました。 ありがとうございます。
関連するQ&A
- 携帯サイトのcssについて
携帯サイトを作っております。 私の機種はdocomoの903なのですが以下のソースでページをみると リストスタイルが表示されてしまいます。 <ul style="list-style-type: none;"> <li>1</li> <li>2</li> <li>3</li> </ul> ※list-style: none;で試しても結果は同様でした。 <div style="..."></div> のように設定している他の箇所は大丈夫なのでcssの反映には 問題ないと思うのですがどうすればいいでしょうか？
- ベストアンサー
- HTML
- CSSIE7でレイアウトが崩れます（リストスタイル..)
はじめまして ノブタです TAGの掲示板でもご質問いたしています。 急いでいますのでなりふり構わずすみません。 ２コラム型（入れ子）のHP作成で 左側にメニュー項目を作成しました。 あらかじめCSSでlist-styleはnoneを指定いたしています。 作成過程で（Dreamweaver）上でもリストスタイルは表示されませんでした。 もちろんIE6でもレイアウトのズレも無くリストスタイルも無い状態で表示されていました。 しかし、IE７では（Dreamweaver）上でも作成過程からリストスタイルが表示されレイアウトが右に膨らみ崩れます。 初期化する意味でimportで読み込ませてみたり、*:first-child+html { }や アンダーバー＿ を子セレクターを使用したり トライしてみるのですが上手く反映されません。 リストマークがIE7で現れ本当に困っていいます。 助けてください お願いいたします。 （基本的なCSSができていようで勘違いしています） ソースは以下のような感じですが..... 教えて頂けたら嬉しいのですが 宜しくお願いいたします。 /!------CSS------/ #menus{ float:left; margin-left:1px; margin-top:10px; margin-bottom:25px; margin-right:3px; width:162px; background-color: #FFFFFF; clear: both; list-style:none; display:block; } *:first-child+html #menus{ list-style:none; } /!--こんな感じで試しています。--/ UL#menus{ margin:35px 5px 0px 0px; width:162px; height:400px; background-color:#FFFFFF; clear:left; display:inline; list-style:none; _list-style:none;/!--こんな感じで試しています。--/ } ul menus { /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus{ list-style:none; }/!--こんな感じで試しています。--/ UL#menus LI { clear: both; hight: 162px; list-style:none; list-style-position:inside; } ul menus li{ /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus li{ list-style:none; } /!--こんな感じで試しています。--/ /!--*一回一回記述してみたり削除してみたり試しています。--/ /!-----以上がCSSです----/ ｈｔｍｌは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link rel="stylesheet" href="reset.css" type="text/css" media="all"> <link rel="stylesheet" type="text/css" HREF="CSS/details3000.css"> <!------//////// 省略 ////////////---> <div id="left"> <div id="menus"> <ul> <li id="menus01"> <li id="menus02"><a href=""></a></li> <li id="menus03"><a href=""></a></li> <li id="menus04"><a href=""></a></li> <li id="menus05"><a href=""></a></li> <li id="menus06"><a href=""></a></li> <li id="menus07"><a href=""></a></li> <li id="menus08"><a href=""></a></li> </ul> </div> <ul id="menus" > <LI> <img src="imges/leftmenus/sp002.gif" onmouseover="setRollOverImg(0, this)" onmouseout="setRollOverImg(1, this)" /></LI> <LI> <img src="imges/leftmenus/sp003.gif" width="162" height="30" onmouseover="setRollOverImg(2, this)" onmouseout="setRollOverImg(3, this)" /></LI> <!-----以上がソースです。------> リストマークが消えません 教えてください 宜しくお願いいたします。
- 締切済み
- HTML
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- CSS 横並びリストの書き方はどちらがよいでしょうか
スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css"> <!-- /* リスト：インライン ------------------------------------------------------------ */ #yoko1 li { display: inline; } #yoko1 a { display: block; float:left; } #yoko1 li { list-style-type: none; margin:0 5px; } #yoko1 a { padding: 5px 10px; margin: 5px; text-decoration:none; border:1px solid #CCFF33; } #yoko1 a:hover { background-color:#CCCCFF; } #yoko2 { clear:left; } /* リスト：ブロック ------------------------------------------------------------ */ #yoko2 li { display: block; float:left; } #yoko2 a { display:block; } #yoko2 li { list-style-type:none; margin:0 5px; } #yoko2 a { padding: 5px 10px; text-decoration:none; border:1px solid #CCFF33; } #yoko2 a:hover { background-color:#CCCCFF; } --> </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- MTのリストマークが消えない！！！
MTでブログ作成をしてます。 ３カラムのメインページの左サイドにリストメニューを置き、リストマークを画像に消したいのですが、どうしてもできません。 ＃メイン <div id="links-left-box"> ～略～ <ul> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> ～略～ </div> ＃スタイルシート #links-left-box ul{ list-sytle-type:none; } お手数ですが、どなたかお教えいただければ幸いです。
- ベストアンサー
- ブログ
- スタイルシートで作成したリスト
スタイルシートで作成したリストが含まれるwebページを印刷したいのですが、 リストの数字の部分が、文字化けしてしまいます。 （●に置き換わってしまう） どのようにすれば、数字をきちんと表示させたまま印刷することができるのでしょうか？ リスト部分は .LI { list-style-type: decimal; list-style-position: outside; margin-top: 0px } としています。
- ベストアンサー
- HTML
- IEでCSSが適用されません。
現在作成中のページがあるのですが、IEで作成状況をF12で確認すると、 全くCSSが反映されず、グチャグチャに表示されてしまいます。 FireFoxでは、問題なく表示されるのですが・・ div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dl { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dt, dd { margin-bottom:2px; margin-top:2px; } 上記をCSSに組み込んで、リストタグの中黒を消すようにしているのですが、IEでは中黒が表示されたままです。 どうすれば良いのでしょうか。 教えて下さい！！
- 締切済み
- その他([技術者向] コンピューター)
- HTMLタグ リストの入れ子とNetscapeについて
HTMLソースにおけるリストの入れ子とNetscapeについて 更新履歴を作成したく、リストの入れ子を作成しました。 Netscape以外のブラウザ（IE8、Opera、Safari、FireFox）では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 以下ソース ------------------------------------------------------- [html] <ul id = "Style_NonIndex"> <li style="font-size:12px">*最終更新*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">ccccの更新</li> </ul></li> </ul> <br><br><br><br> <ul id = "Style_NonIndex"> <li style="font-size:12px">*更新履歴*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">aaaaの更新</li> </ul></li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">bbbbの更新</li> </ul></li> </ul> ------------------------------------------------------- [css] #Style_NonIndex { margin-top:0px; margin: 0px; padding: 0px; list-style: none; font-size: 10px; font-family: MSゴシック; color: #696969; } .List_Date { float: left; width: 70px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } .List_Comment { float: left; width: 250px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } ------------------------------------------------------- [予想表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- [Netscapeの表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- 他のブラウザでの表示は問題ないのですが、Netscapeのみ横リストとして表示されます。 表示が異なるのはNetscapeの仕様でしょうか？ それとも指定方法がおかしいのでしょうか。 大分煮詰まってしまったので、アドバイスをお願いいたします。
- ベストアンサー
- HTML
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
- css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます（Mac safari firefox）。 なんで～～？？ どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 そのサイトには今まで olがなく私が始めて使用したので ul li{list-style:none;} にしたらうまくいきました。 ありがとうございます。