- 締切済み
行間が詰めれない
HP作成でテーブル内の行間がどうしても詰めれません。 line-heightで指定しているのですが、、、 html、cssとも設定する方法をご教授下さい。 この状態は 空きすぎているのです ↓ 例えばこのように したいのです。
- みんなの回答 (6)
- 専門家の回答
みんなの回答
- MRT1452
- ベストアンサー率42% (1391/3293)
禁止事項に抵触するかと思いますが、敢えて、弁明させてもらいますが。 別に他回答者殿に苦言を言ったのではないですが。 私の回答は自己の経験、他のサイトのソースの傾向からそのように書いただけで。 内容にしろ、質問者の返答を元に再返答したまでで、他回答者殿の回答を間違いと言った覚えはありません。 (と言うか、貴方の回答内容は全く読んでません。) 単に一定間隔の行間にしたいなら、<p>で調整するより<br>の方が都合が良いというだけで、 イチイチスタイルシート設定したりする必要も無いし。 そういう視点でしか書いてません。 大半の人は、イチイチ日本語の文章の有り方とか考えて作りますか? 企業サイトのHTMLですらいい加減な物も多いのに。 正義論で「知ったかぶり乙」と思うなら勝手に思っていてください。 貴方のフォローはありがたいですが、そういう言い方をされるのは心外です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと誤解されているようなので。 brは段落内でありながら強制的に開業する"forced line break"で、仕様書には 【引用】____________ここから BR要素は、現在のテキスト行を強制的に区切る(終了させる)。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-BR )]より と書かれているように、日本語で言う「改行」=段落が変わることを示すのためのタグではありません。 <td>要素は、仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#edef-TD )を見ると <!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell--> と書かれていて、block要素もinline要素も含むことができますから、<p>はなくてもよいのですが、この場合異なる段落を含むのですから、 <td> <p>・・・・段落・・・・</p> <p>・・・・段落・・・・</p> </td> とマークアップするのが正しいです。仕様書も読まずに、【日本語の段落が違うことを示す】<p>(paragraph)は、段落間のマージンが広すぎるから、配置が狂うからという理由で<br>を使用するのは誤りです。 段落間のマージンが、広すぎる場合・・・日本語では段落間は詰めて、新しい段落を字下げ(text-indent)で示す文化では、この仕様を嫌うことが多いのですが、その場合は、スタイルシートで指定すればよいだけです。 P{txxt-indebt:1em;margin:0px;} はその指定です。 私が示したサンプルは、WC3Cの仕様に合っているはずです。
- MRT1452
- ベストアンサー率42% (1391/3293)
正直スタイルシート以前の問題だと思いますが。 余計な突っ込みだと思いますが。 > <td> > <p>例えばこのように</p> > <p>したいのです。</p> > </td> 単なる改行なら<br>を使いましょう。 <p>はあくまで段落区切りなので、改行に使うべきタグではないです。 それに、この書き方をすると、<p>に対していくら行間の指定をしたところで、無意味だし。 単に一般的な行間に全て統一させるなら、いっそのこと<p>タグは全て消した方がマシ。 <p>はキチンと理解して使わないと行間を乱すことにしかならないので。 なので、明確に行を空ける等のことをしないのであれば<p>は根本的に使う必要が無いです。 そして改行は<br>を使うクセをつけた方が良いです。 パッと見て <p>の使い方を理解しているのか疑問に思ったので。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
サンプルです。詳細度が異なるためtable内のtable内のtr内のtd内のpのみマージンが変わります。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) CSS 検証サービス検証結果 TextArea (CSS レベル 2.1) ( http://jigsaw.w3.org/css-validator/validator ) で検証済みです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <style type="text/css"> <!-- html,body{ padding:0px;margin:0px;line-height:1.2em; background-color:rgb(200,200,200); } p{ text-indent:1em;border:solid red 1px; width:60%;margin-right:auto;margin-left:auto; background-color:white; } table{ border-collapse: collapse;border:ridge 3px blue; width:60%;margin-right:auto;margin-left:auto; } table tbody td p{ width:100%;margin-top:0px;margin-bottom:0px; color:red;background-color:white; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>サンプル</h1> <p>HTML作成で、line-heightで指定しているのですが、テーブル内の行間がどうしても詰めれません。html、cssとも設定する方法をご教授下さい。</p> <p>たとえば、この文章をtableの外と内で段落間の間隔を変えたい</p> <table summary="サンプル"> <tbody> <tr> <td> <p>HTML作成で、line-heightで指定しているのですが、テーブル内の行間がどうしても詰めれません。html、cssとも設定する方法をご教授下さい。</p> <p>たとえば、この文章をtableの外と内で段落間の間隔を変えたい</p> </td> </tr> </tbody> </table> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>テーブル内の行間がどうしても詰めれません。 これは、table内の行間・・・ <tr></tr>・・・行 と <tr></tr>・・次の行 の間という意味ですか? それとも <td> <p>例えばこのように</p> <p>したいのです。</p> </td> のような、セル内の段落間のマージンですか それとも、これは使うことないと思いますが <td> <p>例えばこのように<br>したいのです。</p> </td> の、行の高さですか? ・・・どのようなマークアップがされていて、それをどのように表示したいかを示してください。
- MRT1452
- ベストアンサー率42% (1391/3293)
以下で試してみましたが、 問題なく調整できましたよ。 同じ行の全ての列に対してスタイルを掛けてますか? テーブルでは、同じ行中の一番高さのあるセルの高さが有効になるので、 その影響を受けてる等はありませんか? <style type="text/css"> <!-- td {line-height:8pt;} ←tdタグの有効範囲内の文字に対して行間調整を行う。 --> </style> Hello<br>World ←通常出力 <table> <tr> <td> Hello<br>World ←行間調整出力 </td> </tr> </table> ※半角スペースでのインデントは表示されないので全角スペース置いてます。
補足
ORUKA1951さま <td> <p>例えばこのように</p> <p>したいのです。</p> </td> です。よろしくお願いします。