• ベストアンサー

UL要素を使わずにdiscマークを表示

<ul type="disc"> <li>テキスト</li> </ul> で表示されるdiscマークを、UL要素を使わずに表示させたいです。 LIに充てるものが1つしかないのでリストを使いたくはありません。 <p class="class">テキスト</p>でdiscマークを表示させる事は可能でしょうか？ htmlのほうに中点（・）や丸（●）を使う、画像を使うのは考えていません。

  • _-l
  • お礼率40% (2/5)
  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

display:list-item; margin-left:1em; かな。（もしかしたらIEは7以降かもしれません-やや自身なし） なお、margin-leftを設定しているのはリスト項目のマーカーはマージン領域に表示されるブラウザがあるため。 通常のリストであってもマージンを0にすると表示されないブラウザがあります。

_-l
質問者

お礼

displayプロパティで指定できたのですね。 IE6でも確認できました。 ありがとうございます。完璧です。

その他の回答 (1)

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

http://www.google.co.jp/search?q=css%20list-style&hl=ja&lr=lang_ja ulとかの下じゃないと効かないのかな・・・試してないから判らない 記号そのものとか http://www.ne.jp/asahi/minazuki/bakera/html/reference/charref 「·」辺りを使うのが妥当では・・・ 意味的には中黒を直で書くのと変わらないけど一応実体参照だから依存度は少なくなるかと・・・

_-l
質問者

お礼

list-styleではリストでないので無理でした。 文字参照でもhtmlを弄ることは考えていませんでした。 displayプロパティで解決しました。 ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • <ul>と<li>リストマークを消すのはどちら？

    CSSの質問です。 <ul>と<li>でリストマークを消すために list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか？ どちらに設定してもリストマーク消えますけど。 どちらに設定したら規格上違反とかありますか？

    • ベストアンサー
    • CSS
  • CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。

    .ul { width: 120px; height: auto; float: left; font: 12; line-height: 150%; padding: 0; list-style-image: url(img/side-tab.gif); } .li { font-size: 12px; margin-left: 1.5em; } <ul class="○○○"> <li>１１１１１</li> <li>２２２２２</li> <li>３３３３３</li> <li>４４４４４</li> <li>５５５５５</li> <li>６６６６６</li> </ul> このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。 横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。 唯一firefoxだけが思うように表示できました。 IE６と７でも違う表示になりました（IE6だとかなり右寄り） operaに関しては画像とテキストの縦位置がずれてしまっていました。 CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・ これを一つのCSSできれいに表示することは不可能でしょうか？ どうかよろしくお願致します。

    • ベストアンサー
    • HTML
  • ulとulの間が空いてしまう

    http://www.ana.co.jp/asw/index.jsp こういったメニューが作りたいのですが <ul class="menu"> <li> <li> ... <ul> <ul class="menu"> <li> <li> ... <ul> こうやってやるとulとulの間に隙間が出来ます。 marginもpaddingも0です。 どうやったらいいでしょうか？ ＣＳＳは下記です。 ul.menu { width: 750px; margin: 0px; padding: 0px; list-style-type: none; line-height:normal; } ul.menu li { line-height:normal; margin: 0px; padding: 0px; float:left; } 宜しくお願いします！

  • ul・liについて

    ul・liを使って <ul> <li>みかん</li> <li>りんご</li> <li>レモン</li> </ul> というリストをつくったのですが(リストマークなし)、FirefoxとIEでは表示がだいぶずれてしまいます。（各行のインデントが発生する） これって妥協するしかないんですかね？ ご回答よろしくお願いします。

  • ul liのclass指定について

    表示が上手くいかないのでお助け下さい。 ul　liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、 なぜかclass指定をすると画像が消えてしまいます。 class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。 どなたか教えて頂けないでしょうか？ また、申し訳ありませんがとりあえず表示されれば良いだけなので htmlやcssの記述に対する細かいツッこみは勘弁して下さい。 宜しくお願いします！ 【html】 <div id="side"> <ul id="sidenav"> <li class="a"><a href="test.html">test</a></li> </ul> </div> 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; text-align:center; background:#fff; } div#side ul#sidenav { list-style-type:none; border: none; } div#side ul#sidenav li.a { background:url(../common/side.gif) no-repeat left; background-position: 6px 11px; } div#side li { position:relative; width: 165px; height:40px; padding: 1px; margin: 5px; text-align:left; border: 1px solid #8c8c8c; }

    • ベストアンサー
    • CSS
  • jQuery　1つの要素を複数箇所に表示したい

    いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか？ ▼HTML ------------------- <div class="hoge"></div> ～別要素(省略)～ <div class="info"> 　<ul> 　　<li>項目1</li> 　　<li>項目2</li> 　</ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • 要素をソートしてその要素を三つずつ表示するには

    お世話になっております。 最近、jQueryを使い始めたjavascript初心者です。 以下の動作を実装したいのですが、どうすればいいでしょうか？ 1.カテゴリーボタン（中華、和食、洋食）を押すとそのカテゴリー要素の上位三つのみが表示される。 2.もっと見るボタンを押す度に表示させているカテゴリー要素が三つずつ増えていく。 各カテゴリー要素の上位三つを表示させるのは jQueryのltフィルターを使うことでできたのすが、もっと見るボタンで三つずつ表示要素を増やしていく動作がうまくいきません。 $(".chinese:lt(3)").show();のli()の数値部分を変数にし、 もっと見るボタンを押すたびに変数Numに値を+3してltの数値を動的に変更することができればうまくいくと思ったのですが $(".chinese:lt(Num)").show(); これでは動作しません。 以下ソースです。 ご回答よろしくお願いいたします。 http://foofoo77.web.fc2.com/imagechange/sort.html <head> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(function(){ var Num = 3; $("#chinese-btn").click(function(){ $("li").hide(); $(".chinese:lt(Num)").show(); }); $("#japanese-btn").click(function(){ $("li").hide(); $(".japanese:lt(2)").show(); }); $("#european-btn").click(function(){ $("li").hide(); $(".european:lt(2)").show(); }); $("#add-seeing").click(function(){ Num +=2; alert(Num); }); }); </script> <style type="text/css"> li { display: none; } </style> </head> <h1>ソート</h1> <button id="chinese-btn">中華</button> <button id="japanese-btn">和食</button> <button id="european-btn">洋食</button> <ul> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> <li class="chinese">中華</li> <li class="japanese">和食</li> <li class="european">洋食</li> </ul> <button id="add-seeing">もっと見る</button>

  • <ul><li></li></ul>にするメリットって？

    <ul><li></li></ul>にするメリットって？ こんにちは。お世話になっています。 色んな方のソースを見ていると、 例えば 「ABOUT」「SERVICE」「COMPANY」・・・という項目を並べる際に <ul> <li id="about">ABOUT</li> <li id="service">SERVICE</li> <li id="company">COMPANY</li> </ul> という風にリスト化する方が多いと思うのですが中には <div id="contents"> <div class="about">ABOUT</div> <div class="service">SERVISE</service> （略） </div> という風にdivで括る方もいると思います。 （※私はdivで括るタイプです。） また。 <dl id="contents"> <dt class="about">ABOUT</dt> <dt class="service">SERVICE</dt> （略） </dl> という風に<dl><dt></dt></dl>括る方もいると思います。 それぞれのメリットってなんでしょうか？ 特に<ul><li></li></ul>という風に括ってる方がおおいと思うので <ul><li></li></ul>にするメリットが知りたいです。

  • <ul>タグでのリストの使い方

    こんばんわ。 すみません。リストをCSSで体裁を整え、ここまでできましたが、各リストの下に、ラインの画像を入れたいのですが、うまくいきません。。 画像を入れるやり方を教えてください～ <tr> <td> <div class="abc"> <ul> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/08/10<br> ○○○○</a></li> </ul> </div> </td> </tr>

    • ベストアンサー
    • HTML
  • プレビュー画面でリストマークが消えない

    いつもお世話になります。 DW CS3でナビゲーションバーを作成しようとしているのですが、CSSでlist-style:none;やlist-style-type:none;にしてもリストマークが消えてくれません。 さらにfloat:left;を使っても横並びになってくれません。 デザイン画面ではリストマークも消え横並びになっているになぜかプレビューで確認すると反映されていないのです。 HTMLおよびCSSは下記の通りです。 どなたか詳しい方、ご教授願います。 HTML <div id="nav"> <ul> <li class="nav01"><a href="#0"><img src="images/keybridge.gif" border="0" /></a></li> <li class="nav02"><a href="#n" class="style14">News</a></li> <li class="nav03"><a href="#s" class="style14">Schedule</a></li> <li class="nav04"><a href="#a" class="style14">Access</a></li> </ul> </div> CSS #nav { background:#FFFFFF } #nav ul{ width:100%; margin:0 auto; overflow:hidden; } #nav li { width:25%; float:left; list-style:none; } #nav a{ display:block; text-align:center; text-decoration:none; } #nav a:hover{ background:#CCCCCC }

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する