• ベストアンサー

リストで行間を指定したい

リストで「情報」のテキストとリスト1行目「その1」の行間だけを指定したいのですが、可能でしょうか。 ul { list-style-image: url('image/arrow.gif'); } li { margin-bottom: 0.2em;} ----- <p>情報</p> <ul> <li>その1</li> <li>その2</li> </ul>

  • HTML
  • 回答数5
  • ありがとう数5

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

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

#1の方の回答と重なりますが、単純に両者のマージンを調整すればいいのでは?(無指定の状態でPもULも上下に1em程度のマージンがあるので。) p{ margin-bottom:0; } ul{ margin-top:0; }

shizuku
質問者

お礼

教えていただいた方法でできました。 ありがとうございました。

その他の回答 (4)

回答No.4

<li>はline-height: 5pxとすれば間隔は短くなります <p>はできませんでした

shizuku
質問者

お礼

ありがとうございました。 解決しました。

回答No.3

ulタグの上下の間隔は、どうにも出来ないようです。 他のタグで対応するしかないのでは?

shizuku
質問者

お礼

ありがとうございました。 解決しました。

回答No.2

ul { list-style-image: url('image/arrow.gif'); } li { margin-bottom: 0.2em;} .p { line-height: 16px} .li2 { line-height: 20px} ----- <p class="p">情報</p> <ul> <li class="li2">その1</li> <li>その2</li> </ul> でどうでしょう

shizuku
質問者

補足

早速ありがとうございます。 説明不足でした。すみません。 もともとのCSSを使わないリストを使った場合よりも狭くしたいのですが、無理なことなのでしょうか?

  • partita
  • ベストアンサー率29% (125/427)
回答No.1

p { margin_bottom:5px; } や ul { margin:0; } などを追加してみてはどうでしょう?

shizuku
質問者

お礼

方法を勘違いして両方指定せずにどちらかを指定していたのでできずに、お礼が遅くなりましたが教えていただいた方法でできました。 ありがとうございました。

関連するQ&A

  • IE7で行間 助けてください

    行間の差がありすぎます。IE7で1行程度の行間が出来ます。行間の差を少なくしたいです。 検証お願いします。 ul{ margin:0; padding:10px 0; font-size:85%;} li{ display: block; float:left; margin:0; padding: 0px 8px; white-space:nowrap; list-style:none;} <div style="width:400px;"> <ul> <li>あああああああああ</li> <li>いいいい</li> <li>ううううううううう</li> <li>ええええ</li> <li>おおおおおおおおお</li> <li>かかかか</li> <li>ききききききききき</li> <li>くくくく</li> <li>けけけけけけけ</li> <li>こここここここここ</li> </ul> <br style="clear: both;" /> </div>

    • ベストアンサー
    • HTML
  • リストに指定したマークの位置がずれてしまいます

    特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。 リストマークのサイズは20×20です。 マークをlist-style-type: square;などにすると普通に表示されます。 非常に困っています。宜しくお願いします。 <style type="text/css"> <!-- body { background-color: #333333; background-image: url(images/left_background.jpg); background-repeat: repeat-y; width: 150px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { color: #FF6600; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> </style> <style type="text/css"> <!-- ul { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 40px; font-size: large; font-weight: bold; list-style-image: url(images/arrow.gif); list-style-position: outside; } #base { margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; padding-left: 20px; } --> </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; } .style24 {font-size: x-large} --> </style> </head> <body> <div id="base"> <ul> <li> <a href="main.html" target="mainFrame">Home</a></li> <li> <a href="image.html" target="mainFrame">Image</a></li> <li> <a href="flash.html" target="mainFrame" >Flash</a></li> <li> <a href="logic.html" target="mainFrame" >Music</a></li> <li> <a href="link.html" target="mainFrame"> Link</a></li> </ul> </div> </body>

    • ベストアンサー
    • HTML
  • フッターの画像の位置づけ指定方法がわからない

    ヘッダー・メイン・サイドバー(左右)・フッターの5コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて(画像の上に、真ん中寄せでテキストを乗せたい)反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff;             font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top;          /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{       display: block; line-height: 25px; text-decoration: none;    text-align:right background-img:url(.gif);       padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5               color: #8b1c62 } ul.sidemenu ul {margin: 0;       padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff;        line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5;                   color:#ffffff;      border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff;   background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg);       background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ~~テキスト文章~~<br> <address><big>~アドレスのテキスト~</address></big> <br>○○おなじくテキスト</div> <div align="center"> ~◆◆サイトの名前~   <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。

    • 締切済み
    • CSS
  • リストを全体的に右寄せにしたい。

    リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>

    • ベストアンサー
    • HTML
  • list-style-imageがきかない。

    下記のようにリストの中黒を画像にしたいのですが、Chromeでは画像が表示されず、中黒のままです。原因が分る方教えてください。 SafariとFireFoxでは表示されます。 [html] <ul> <li><a href="concept.html">コンセプト</a></li> <li><a href="gallery.html">ギャラリー</a> </li> </ul> [CSS] li { margin-bottom:15px; margin-left:50px; list-style-image:url("../img/xxx.png"); }

    • ベストアンサー
    • CSS
  • リストの画像をくっつけたい!

    教えてください。 <ul> <li><img src="../img/link_a.gif" /></li> <li><img src="../img/link_b.gif" /></li> <li><img src="../img/link_c.gif" /></li> </ul> と画像をリストにした場合、画像と画像の間にblankができてしまうのですが、これは仕方がないのでしょうか? CSSでマージンを0pxにしても画像と画像がくっつきません。 #contentMenu li { width: 160px; height: 25px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } 教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • XML
  • 文字の左側にチエックマークを入れる方法

    よろしくお願いします。テキストの左側にチエックワークを入れたく以下の記述をhtmlにしました。 <ul class="ulfont"> <li>ああああああああああああああああああああ</li> <li>いいいいいいいいいいいいいいいいいいいいいいいい</li> </ul> <ul class="ulfont1"> <li>うううううううううううううううううう</li> <li>おおおおおおおおおおおおおおおおおおお</li> </ul> そしてcssには以下の記述をしました。 .ulfont{ list-style-image:url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left:-1px; } .ulfont1{ list-style-image:url(img/ani059.gif); background-image:url(img/mark.png); color: #ff0000; font-weight:bolder; font-size:1.0em; line-height:2.0; margin-left: -1px; } checkmark.gifは表示されるのですが、ani059.gifが表示されません。 前回も、このようなご質問をさせていただいたのですが、解決できなく再度ご質問をさせていただきました。 なお、前回はlist-style-noneを入れると良いとご指導を頂いたのですが、なぜかうまく行かず、画像も右によってしまい、左に空白ができてしまいました。 ただし、文字の背景に設定している画像は表示されております。 何か記述方法が間違っているのだと思うのですが、わかりません。 どなた様か、ご指導のほどよろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSについて リスト表示のリストマークの表示位置

    カテゴリをリスト表示すると左揃いにならず、 なぜが左に余計な空白というか空間ができてしまいます。 リスト表示のリストマークの表示位置をもっと左にするにはどうすればいいですか? /* カテゴリー */ div#sidebar-left li {font-size: 0.75em; list-style-type: none; background-image: url(listmark.png); background-repeat: no-repeat; padding-left: 16px; margin-bottom: 4px; vertical-align: top} div#sidebar-left li a{color: #000000; text-decoration: none} div#sidebar ul{padding: 0; margin: 8px 8px 20px}

  • リストリンクと角丸画像のロールオーバーを連動させる方法について

    縦に並んだリンクを作成していたのですが分からない所がありましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 リストリンクのロールオーバー時に下記を変化させたいです。 1. リストマーク的な画像(テキストの1行目の横に表示し、テキストが何行になろうとも自動で対応したいです) 2. テキストの文字色 3. リンク領域内の背景色 ただし1行目と最終行のリンクについては上記以外に下記も変化させたいです。 4. 角丸画像 【できていない事】 最終行のリンクで、【やりたい事】の1と4を連動させる事ができませんでした(1行目はできています)。 なお1行目はできていて、最終行ができていない理由は下記となります。 1. 1行目は下記の2つの座標が常に一定の為、この二つと背景色を一体化した画像を作成すれば意図した動作となりました。 角丸画像の座標(0, 0) リストマーク的な画像の座標(4, 14) 2. 最終行の角丸画像の座標はテキストの行数が決まっていない為、特定できません。 その為、一体化した画像は作れませんでした。 下記のソースでは、最終行の角丸画像の動作は問題ないのですが、最終行のリンクは、ロールオーバー前、後共にリストマーク的な画像が表示されません(【やりたい事】の1と4を連動させる事ができず、4が動き、1が動かない形となっております)。 【ソース】 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { font:13px "MS Pゴシック"; *font-size:small; *font:x-small; margin:0; padding:0; } #navi_menu { width: 170px; } #navi_menu ul { margin:0; padding:0; } #navi_menu .navi_link { line-height: 26px; list-style: none; } #navi_menu .navi_link a { display: block; height: 100%; padding-left: 18px; color: #333333; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 4px 7px; } #navi_menu li.top_kadomaru a { padding-top:7px; background-image: url(images/corner_maru_top.gif); background-position: 0px 0px; } #navi_menu li.bottom_kadomaru a { padding-bottom:6px; background-image: url(images/corner_maru_bottom.gif); background-position: bottom; } #navi_menu .navi_link a:hover { color: #c9c; background-color: #3ff; background-image: url(images/arrow_on.gif); background-repeat: no-repeat; background-position: 4px 7px; } #navi_menu li.top_kadomaru a:hover { background-image: url(images/corner_maru_top_on.gif); background-position: 0px 0px; } #navi_menu li.bottom_kadomaru a:hover { background-image: url(images/corner_maru_bottom_on.gif); background-position: bottom; } #navi_menu .navi_link a span { display: block; margin-left: -18px; padding-left: 18px; text-decoration: underline; background-image: url(images/bg.gif); background-repeat: repeat; } --> </style> </head> <body> <div id="navi_menu"> <ul> <li class="navi_link top_kadomaru"><a href="index1.html"><span>1行目は1行でも複数行でも大丈夫です</span></a></li> <li class="navi_link"><a href="index2.html"><span>2行目も同上</span></a></li> <li class="navi_link"><a href="index3.html"><span>3行目は同上</span></a></li> <li class="navi_link"><a href="index4.html"><span>4行目は同上</span></a></li> <li class="navi_link bottom_kadomaru"><a href="index5.html"><span>最終行を連動させる方法が分かりませんでした</span></a></li> </ul> </div> </body> </html> 【使用ファイル】 index.html(上記ソース) arrow.gif(10x10の任意の画像) arrow_on.gif(同上) bg.gif(2x26で最終行の1ピクセルのみに任意の色がついている画像(罫線的な意味合いがあります)) corner_maru_bottom.gif(170x6の任意の画像) corner_maru_bottom_on.gif(同上) corner_maru_top.gif(170x24で(0,0)~(170,7)が角丸画像用領域、(4,14)にarrow.gifを貼り付けた画像) corner_maru_top_on.gif(同上) どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • HP作成時のリストやインデントの設定について

    DreamweaverCS4を使っています。 文中にリストやインデントを挿入したいと思っています。 ------------------------------------ タイトル文1   ・文章1   ・文章2 タイトル文2 ------------------------------------ という感じに「文章~」の部分がリストになります。 ------------------------------------ <style type="text/css"> <!-- li,ul { margin: 0 0 0 1em; padding: 0; } li,ol { margin: 0 0 0 1em; padding: 0; } ------------------------------------ リストの前の空白部分の調整方法はネットで調べ上記の感じで調整できました。 ですが、リストにすると「タイトル文1~・文章1」や「・文章2~タイトル文2」の間のように 1行文の空白が出来てしまいます。 この行間を半分くらいにする、もしくはなくすことは可能でしょうか? 仕様と言われてしまったらそれまでですが、やり方があれば調整したいと思い質問させていただきました。 よろしくお願いします。

専門家に質問してみよう