行間隔の開け方

質問

・スタイルシート
#line1 { line-height: 150%; }

・本文
<table width=200><tr><td><p id="line1">
あ<br>
い<br>
う<br>
</p></td></table>

<table width=200><tr><td><p id="line1">
な<br>
<center>に</center>
ぬ<br>
</p></td></table>

以上を実行してみたら、「な・に・ぬ」のテーブルのほうでは、<p id="line1">の命令が実行されていないようです。
何でか分からなかったので、直接行間隔を変えてみようと思い

<table width=200><tr><td>
<p id="line1">な</p><br>
<p id="line1"><center>に</center></p>
<p id="line1">ぬ</p><br>
</td></table>

と書き換えてみたら、今度は物凄く間隔が開いてしまいました。
上のコマンドと「あ・い・う」のコマンドは、テーブルタグの中の行間隔を１５０％にする。という同じ意味合いだと思ったのですが、なんでこんなに結果が変わってしまったのでしょうか。

また、「あ・い・う」と「な・に・ぬ」の行間隔を同じにする方法を教えてください。
（cellpadding　とか、原因とは関係なさそうなコマンドは、簡略化のため割愛させていただきました）

回答No.3

abril · ベストアンサー

> ・スタイルシート
> #line1 { line-height: 150%; }

これは既に他の回答者の方達がご指摘の通りidセレクタであり、id属性に対するスタイル定義となってしまいますので、同一ファイルの複数箇所に渡って適用したいのであれば、classセレクタかある特定のタグに対するセレクタを使用されるのが適切です。
前者の記述の仕方は他の方が書かれていますので省略しますが、後者の場合について。例えばこの行間を<p>内の全てのテキストに適用したいのであれば、
----------------------------------------------------------------------
p { line-height: 150%; }
----------------------------------------------------------------------
という定義をCSSで設定しておけば、HTML側は単に
----------------------------------------------------------------------
（省略）
<p>あ<br>い<br>う<br></p>
（省略）
<p>な<br>に<br>ぬ<br></p>
----------------------------------------------------------------------
とマークアップするだけでどちらにもスタイルが適用されます。

ただ、CSSもそうですがそれ以前にHTMLのマークアップがかなり滅茶苦茶です。

<p id="line1">
な<br>
<center>に</center>←<p>の中にはインライン要素しか入れ子にできません。<center>はブロック要素ですので不可です。
ぬ<br>
</p>

<p id="line1">な</p><br>←「<p>（パラグラフ）段落」の後に「<br>（ブレーク）改行」というマークアップもかなり妙です。
パラグラフとパラグラフの間を空けたいのなら、上下方向のmarginプロパティで設定するのが妥当です。

とりあえず、CSSは勿論ですが、まずHTMLの正しいマークアップの仕方をきちんと学ばれるところから初めて下さい。CSS関連の質問では実はHTMLのマークアップの方にも問題がある、というケースがどうも少なくない様ですので…。
それから、「コマンド」という言葉を乱用されていますが、この場合妥当な言い回しではありませんのでご注意を。

お礼

回答ありがとうございます。

marginに変更してみました。
確かにこっちのほうがいいですね。
HTMLを正しく学ぶべきという指摘はごもっともなんですが、なにぶんもう雛形は完成し運営も開始していて、少し手直しを入れている段階です。
今から１から学び直すというのは少し難しいのが実情でして。

回答No.2

_ranco_

いろんなものに名前を付けるときは、idじゃなくてclass。
‘に’に関しては<CENTER class="line1">とする。
classは#じゃなくて.で参照する。

お礼

回答ありがとうございます。

おかげさまでうまくできました。

回答No.1

DrFell

基本を大きく逸脱しているからでない？

つまみぐいの限界ってやつ。ｃｓｓの基本を学んだ方がいいよ。