Ｐａｇｅ 856 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼リストと普通の文の行間の設定についての質問 CSS初心者 04/11/19(金) 9:07 ┣Re:リストと普通の文の行間の設定についての質問 Pid 04/11/19(金) 15:00 ┗Re:リストと普通の文の行間の設定についての質問 むむりく 04/11/19(金) 15:21 ┗Pidさん、むむりくさん ありがとうございました CSS初心者 04/11/20(土) 19:02 ─────────────────────────────────────── ■題名 ： リストと普通の文の行間の設定についての質問 ■名前 ： CSS初心者 ■日付 ： 04/11/19(金) 9:07 -------------------------------------------------------------------------
| CSSを使ってホームページを作成中の初心者なのですがお世話になっています。 行間について教えて頂けたらと思います。 リストを使って下記のように表現したいのですが、<ol><li>を使っているせいか、「赤」と「りんご、すいか」の部分がすごく離れてしまっています。 「・青」と「・黄色」の行間(line-height:30%)よりも、もっと行間を詰められないかと思いまして。 「・青」と「･黄色」の行間がその次に狭くて「・色と果物」と「・赤」の行間が一番広いという風にしたいのですが。 ちなみに、テーブル内です。 （しかもよくわからないのが、普通はline-height:30%や50%ですと、字が重なると思うのですが、 <li>なので、プレビューすると、ちょうど良い行間になるようですが、この値でも平気でしょうか？(他のプラウザだと重なったりはしないでしょうか？)） どうぞ宜しくお願い致します。 ・色と果物 ・赤 りんご、すいか ・青 ・黄色 レモン、バナナ、グレープフルーツ、マンゴー ・ピンク 桃 スタイルシート(一部省略) TD {font-size: 9pt;} body {color:black; font-size: 9pt;} h3 {font-size: 10.5pt; font-weight:bold; color:#3333cc;} ol.1 {list-style-type:square; color:purple; margin-left:20px; line-height:50%} ol.2 {list-style-type:square; color:green; margin-left:30px; line-height:30%} span {margin-left:35px;} 本文 <tr> <td> <ol class="1"><li><h3>色と果物</h3></li></ol> <ol class="2"><li>赤</li></ol><span>りんご</span> <ol class="2"><li>青</li></ol> <ol class="2"><li>黄色</li></ol><span>レモン、バナナ、グレープフルーツ、マンゴー</span> <ol class="2"><li>ピンク</li></ol>桃</span> </td> </tr> |
| どもです。 li 要素の中に h3 要素があるというのも奇妙な感じがしますが，それはさておき。 >「赤」と「りんご、すいか」の部分がすごく離れてしまっています。 私が試した限りでは「すごく」というほどでもありませんでしたが…上記 HTML ソース内には全角空白が入っていますが，それのせいということはありませんか？ >「・青」と「・黄色」の行間(line-height:30%)よりも、もっと行間を詰められないか ちょっと気になったのですが，line-height は「行間」ではなく「行の高さ」です。行間の調節は li 要素の margin/padding で行います（border を引いてみると関係がよく分かると思います）。 で，ol 要素（番号つきリスト）を使っているのに { list-style-type: square; } というのは面白いテクニックではあるのですが，最初から ul 要素（番号なしリスト）を使った方が良いのでは。 <h3>色と果物</h3> <ul> <li>赤<p>りんご、すいか</p></li> <li>青<p>(nothing)</p></li> <li>黄色<p>レモン、バナナ、グレープフルーツ、マンゴー</p></li> <li>ピンク<p>桃</p></li> </ul> h3 { font-weight: bold; color: #33c; } ul { list-style-type: square; } li { margin-bottom: 0.5em; } /* li 要素の下に若干の余白を設けて行間調整 */ li p { margin: 0; } ※もしくは dl 要素の方がマークアップとして美しい(?)と思います。 なお細かい点ですが， ・class 名が数字だけというのは避けた方が良いかもしれません。 ・印刷用ページでないのなら，フォントを pt 単位で固定するのは避けた方が良いです。 ・「桃」の span 要素の開始タグがないのはコピペミス？(^^;)。 |
| ><ol class="1"><li><h3>色と果物</h3></li></ol> ><ol class="2"><li>赤</li></ol><span>りんご</span> ><ol class="2"><li>青</li></ol> ><ol class="2"><li>黄色</li></ol><span>レモン、バナナ、グレープフルーツ、マンゴー</span> ><ol class="2"><li>ピンク</li></ol>桃</span> まずマークアップがおかしいです。 こんな感じになるのではないでしょうか？ <h3>色と果物</h3> <ul> <li>赤<ul><li>りんご</li></ul></li> <li>青</li> <li>黄色<ul><li>レモン</li><li>バナナ</li><li>グレープフルーツ</li><li>マンゴー</li></ul></li> <li>ピンク<ul><li>桃</li></ul></li> </ul> で、リスト間は、line-height でなく、margin を使えばいいです。 >・色と果物 > ・赤 > りんご、すいか > ・青 > ・黄色 > レモン、バナナ、グレープフルーツ、マンゴー > ・ピンク > 桃 ul { list-style-type: square; color: purple; } li ul { margin-left: 0;} li ul li { color: green; display: inline; margin-left: 1em;} こんな感じ？ ><li>なので、プレビューすると、ちょうど良い行間になるようですが、この値でも平気でしょうか？(他のプラウザだと重なったりはしないでしょうか？)） http://www.shoshinsha.com/pukiwiki/pukiwiki.php?%C6%B0%BA%EE%B4%C4%B6%AD%A4%F2%B3%CE%C7%A7%A4%B9%A4%EB%A4%CB%A4%CF%A1%A9#content_1_9 これを機に、導入されるのもよいかも。 |
| Pidさん、むむりくさん どうもありがとうございました。 CSSを独学で勉強中でして、基本がわからなくて、試行錯誤していました。 marginで調整する事や リストのマークアップの仕方、 皆さんのご助言により、すっきりする事ができました。 どうもありがとうございました。 |