- ベストアンサー
<ul>は必要ですか？
CSSを使ってなるべくHTMLのソースを減らそうと思い悪戦苦闘中です。 ■が画像だと仮定して書きます。 ■項目１ ■項目２ ■項目４ ■項目５ ■項目６ ■項目７ というような表示ができるようにしたいのですが、 CSSファイルに ul { list-style-image: url(img/mark.gif); vertical-align: middle; } と指定してHTMLには <ul> <li>項目１</li> <li>項目２</li> <li>項目４</li> <li>項目５</li> <li>項目６</li> <li>項目７</li> </ul> と書きました。そうすると表示が ■項目１ ■項目２ ■項目４ ■項目５ ■項目６ ■項目７ と頭にスペースが入ってしまいます。（リスト項目なので当たり前なのかも知れないですが…） これをスペースをなくしたいのです。 そこで、<li>だけならどうだろうと思い、CSSを下記のように書き直し試したところスペースがなく表示出来ました。 li { list-style-image: url(img/mark.gif); vertical-align: middle; } <ul></ul>は必要でしょうか？ それとも他に方法があればご教授下さい。私には上の方法しか思いつきませんでした。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
左マージンの数値をいじってみてはいかがでしょうか？ <style type="text/css"> ul { margin-Left:15; } </style> <ul> <li>項目１</li> <li>項目２</li> <li>項目４</li> <li>項目５</li> <li>項目６</li> <li>項目７</li> </ul>
その他の回答 (2)
- seaw
- ベストアンサー率43% (10/23)
分かりやすい様に、<hr>要素や、<ul>要素に背景色をつけてみました。 CSSに多少バグの残っているInternet Explorer以外では、<hr>要素と<ul>要素の間に空白ができないと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> body { background-color: #bfbfbf; color: #000000; } ul.sample { background-color: #7a8eb2; margin: 0; padding: 0; list-style-position: outside; list-style-type: disc; list-style-image: url(pochi1.gif); } ul.sample li { margin-left: 25px; } hr { margin: 0; padding: 0; height: 10px; background-color: #008740; border: 1px solid #000000; clear: both; } </style> <title>リストのサンプル</title> </head> <body> <h1>リストのサンプル</h1> <hr> <ul class="sample"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ul> <hr> </body> </html>
お礼
回答ありがとうございます。 同じ見栄えなのに色々あるんだと改めて感じました。 クラスに指定するとか・・・ 結局みなさんの意見を参考に色々試させて頂きまして マージン０で無事設定し解決しました。 ありがとうございます。
- exists
- ベストアンサー率62% (27/43)
こんにちは、<ul>はずしたら、かわいそうかも。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <link rev="made" href="mailto:"> <link rel="stylesheet" href="" media=""> <link rel="start" href=""> <link rel="prev" href=""> <link rel="next" href=""> <link rel="help" href=""> <style type="text/css"> <!-- body{ margin:0;padding:0;} .result { margin:0;padding:0;list-style-position: inside} .list {list-style-image: url("sample.gif"); vertical-align: middle; } --> </style> <title>sample</title> </head> <body> <ul class="result"> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> <li class="list">sample</li> </ul> </body> </html> こんなかんじでどうでしょうか？
お礼
ulなくしたらかわいそうですね^^ でも今回の件で、どうしても間があいてしまい 半ばやけになって<ul>に八つ当たりしました。 試させていただきました。 やはりマージン０がポイントですね。 回答ありがとうございました。
お礼
回答ありがとうございました。 マージンの数値を変えたらうまく行きました！
補足
補足ではないのですが、結果報告です。 みなさんの回答を参考に色々試した結果、yambejpさんの回答におそらく近い形で最終的には設定させて頂きました。 以下設定したソースです。 HTMLはyambejpさんと全く同じです。 ul{ margin: 0;padding: 0;list-style-position: inside;list-style-image: url(../img/mark.gif); vertical-align: middle; } ありがとうございました。 またみなさんの意見すべて参考になりましたので ポイントをみなさんに同じ数つけたいのですが、残念ながら無理そうなので、すいませんが回答順にさせていただきます。