• 締切済み

行間が詰めれない

HP作成でテーブル内の行間がどうしても詰めれません。 line-heightで指定しているのですが、、、 html、cssとも設定する方法をご教授下さい。 この状態は 空きすぎているのです ↓ 例えばこのように したいのです。

みんなの回答

  • MRT1452
  • ベストアンサー率42% (1392/3296)
回答No.6

禁止事項に抵触するかと思いますが、敢えて、弁明させてもらいますが。 別に他回答者殿に苦言を言ったのではないですが。 私の回答は自己の経験、他のサイトのソースの傾向からそのように書いただけで。 内容にしろ、質問者の返答を元に再返答したまでで、他回答者殿の回答を間違いと言った覚えはありません。 （と言うか、貴方の回答内容は全く読んでません。） 単に一定間隔の行間にしたいなら、<p>で調整するより<br>の方が都合が良いというだけで、 イチイチスタイルシート設定したりする必要も無いし。 そういう視点でしか書いてません。 大半の人は、イチイチ日本語の文章の有り方とか考えて作りますか？ 企業サイトのHTMLですらいい加減な物も多いのに。 正義論で「知ったかぶり乙」と思うなら勝手に思っていてください。 貴方のフォローはありがたいですが、そういう言い方をされるのは心外です。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

ちょっと誤解されているようなので。 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% (1392/3296)
回答No.4

正直スタイルシート以前の問題だと思いますが。 余計な突っ込みだと思いますが。 >　<td> >　　<p>例えばこのように</p> >　　<p>したいのです。</p> >　</td> 単なる改行なら<br>を使いましょう。 <p>はあくまで段落区切りなので、改行に使うべきタグではないです。 それに、この書き方をすると、<p>に対していくら行間の指定をしたところで、無意味だし。 単に一般的な行間に全て統一させるなら、いっそのこと<p>タグは全て消した方がマシ。 <p>はキチンと理解して使わないと行間を乱すことにしかならないので。 なので、明確に行を空ける等のことをしないのであれば<p>は根本的に使う必要が無いです。 そして改行は<br>を使うクセをつけた方が良いです。 パッと見て <p>の使い方を理解しているのか疑問に思ったので。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

サンプルです。詳細度が異なるため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)
回答No.2

＞テーブル内の行間がどうしても詰めれません。 　これは、table内の行間・・・ <tr></tr>・・・行 と <tr></tr>・・次の行 の間という意味ですか？ それとも <td> <p>例えばこのように</p> <p>したいのです。</p> </td> のような、セル内の段落間のマージンですか それとも、これは使うことないと思いますが <td> <p>例えばこのように<br>したいのです。</p> </td> の、行の高さですか？ ・・・どのようなマークアップがされていて、それをどのように表示したいかを示してください。

uemasayan
質問者

補足

ORUKA1951さま <td> <p>例えばこのように</p> <p>したいのです。</p> </td> です。よろしくお願いします。

  • MRT1452
  • ベストアンサー率42% (1392/3296)
回答No.1

以下で試してみましたが、 問題なく調整できましたよ。 同じ行の全ての列に対してスタイルを掛けてますか？ テーブルでは、同じ行中の一番高さのあるセルの高さが有効になるので、 その影響を受けてる等はありませんか？ <style type="text/css"> 　<!-- 　　td {line-height:8pt;} ←tdタグの有効範囲内の文字に対して行間調整を行う。 　--> </style> Hello<br>World　　　←通常出力 <table> 　<tr> 　　<td> 　　　Hello<br>World　　　←行間調整出力 　　</td> 　</tr> </table> ※半角スペースでのインデントは表示されないので全角スペース置いてます。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • Dreamweaverでの行間の指定について

    現在、Dreamweaver8(Win版)でホームページを作成中の初心者です。 そこで行間の指定に、CSSで「line-height」を使ってるのですが、IE7でプレビューした時の行間と、firefoxで見た場合の行間が違い、デザインが壊れてしまうのです。（単位は使ってません） どちらのブラウザでも、同じように見える作成方法があるのでしょうか？ 色々調べてみたんですが、解決できなかったので、質問させていただきました。 どうかご回答の程よろしくお願い致します。

  • ホームページの行間設定について

    ホームページの行間設定について質問です。 ページ全体の行間指定は<style type="text/css"> <!-- body,th,td {line-height : 180%;} --> </style> にしています。その中で一部行間を変えたいのですが<p style="line-height: 150%;"> </p> と入れて見ても変わりません。入れる場所が違うのか何が間違っているのかわかりません。どなたか教えてください。

  • テーブルのｈｔｍｌで、文章のサイズと行間を指定したいのですが、

    テーブルのｈｔｍｌで、文章のサイズと行間を指定したいのですが、 サイズの設定は、下記のようにできました。 <span style=font-size:14px> それで、これに、行間が狭いので、広くしたいのですが、 line-hight:130%といれても、広がりません。また、２つを同時にいれる書き方が わかりません。 CSSは、使わないで書きたいのですが、書き方を教えてください。 よろしくお願いします。

  • （再度）行間を詰める方法

    申し訳ございませんが、現在下記のタグで行間が詰めれなくて困っています。 同じものを左右に並べる予定です。 　<div id="sidebar1_new"> 　<tr class="boxleft"> 　<table width="440" height="90" border="1" cellpadding="0" cellspacing="0" frame="hsides" bordercolor="#999999"> 　<td><p><a href="リンク先1" target="_blank">&nbsp;&nbsp;タイトル1</a> 　<p><a href="リンク先2" target="_blank">&nbsp;&nbsp;タイトル2</a> 　　</td> 　</table> 　</tr><!-- end boxleft --> 　</div><!--sidebar1 new --> CSSは、#sidebar1 new.boxleft{ line-height:●●pt; ｝ という感じです。 　タイトル1とタイトル2の間を調整したいのです。また、できればテーブル内の上と下（ここではタイトル1の上、タイトル2の下）も調整できれば最高です。 このテーブルは左右で同じものを作りたいと思っています。一応、テーブルは出来ていますので行間だけです。 兎に角、テーブル内の行間を調整したいのです！ 説明がうまくないですがご教授よろしくお願いします。 このCSSに色指定をするとそれは機能します。

  • CSS行間設定について困っています

    gooブログのCSS編集で、エントリー本文の行間を広くさせようと思い、 line-height:200%;で広く設定していて、今までうまくいっていました。 最近また少し背景画像や文字色など編集しようと思い、色々編集していたのですが、（この時に行間については何も変更していない）、この編集が終わった後に、自分のブログを見てみると、Firefoxでは正常なのですが、IEではなぜか行間がちゃんとCSSでの設定どおりになっているところとそうでないところとで、まばらなかんじになってしまって・・・。 想定される原因や解決法がお分かりの方がいらっしゃいましたら教えていただけないでしょうか。よろしくお願いいたします。

  • 行間

    ｃｓｓで行間を指定しているのですが、ある部分だけ行間を詰めたいのです。どうすれば良いでしょうか？

    • ベストアンサー
    • HTML
  • ＩＥとfirefox、行間の表示が異なってしまう

    ulタグをline-heightで行間指定した場合、firefoxとIEでは表示が異なってしまいます。 firefoxでちょうど良い行間にするとIEでは詰まりすぎて文字がつぶれてしまったり。 解消方法を教えていただけないでしょうか？

    • ベストアンサー
    • HTML
  • 行間があかない

    PHPでプログラムを組んでいます。 Firefoxでは行間（line-height）があくのですが、IEではあきません。 行間があかない、つまり指定なしの行間となってしまいます。 $tag_new .= $i . ".<a href =./index.php?mode=diary&id=' . $row[id] . '>" . $title . "</a><img src = ./images/new.gif><br />\n"; とプログラムを組んで、 <div class="new">新着コラム<br /> {$tag_new}</div> と表示しています。 ふしぎなことに、新着コラムとつぎの行だけ行間があきます。 Firefoxではすべてあきます。 Cssでは .new { width:210px; text-align: left; line-height: 24px; float:left; margin: 10 10 10 0; padding: 5; border:1px solid #800000; clear : left; } としています。 解消法あれば教えてください。

    • ベストアンサー
    • HTML
  • CSS－フォントサイズと行間を設定するとフォント指定が無効になっちゃう－

    CSSでフォントサイズとpxで指定し、行間をhigh-lineで指定すると行間は生きるんですが、フォント指定が無効になります。どのように設定したら、両者行きますか。IEでもFirefoxでもためしてみました。

  • HPの行間を広げる line-height が効かないのです。

    お願いします。 ｃｓｓで行間を変化させるために　line-height を書き込んでも、行間がぜんぜん動かないのです。 次のように書きました。 *************************** <style type="text/css"> p{_line-height:_1.7em;_} </style> </head> <body> <p> 行間が変わらない<br> 全然変わらない </p>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する