お世話になります。ホームページを作成する場合、見出しまたはの下にで本文を記述すると、見出しと本文の間が空いてしまいます。この間を狭く調整する方法を探しています。よろしくお願いします。

以外は、スタイルシートで指定する事で可能です。 test などでも可能です。

<h1>、<h2>と<p><div>の行間を狭くする方法

解決済

質問者：top990
質問日時：2005/10/25 11:51
回答数：2件

お世話になります。
ホームページを作成する場合、見出し<h1>または<h2>の下に<p><div>で本文を記述すると、見出しと本文の間が空いてしまいます。
この間を狭く調整する方法を探しています。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： elttac
回答日時：2005/10/25 21:32

　No. 1 のご回答のように，これはスタイルシートの範疇ですが，もう少し根本的な方法で考えてみましょう。

おそらく，h1，h2，p の前後には，既定で 1 行分程度の空きができているはずです。そこで，それらの間の空きをすべて詰めてしまう記述を考えます。
　次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1 { margin-top: 0; margin-bottom: 0 }
h2 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が隣接しても，ぴったりくっついて出てきます（ でくくる場合もありますが，XHTML を使わなければどちらでもかまいません）。
　詰めすぎ，と思われるなら，上記の数値をいじります。およそ 1 行分を「1em」として，数値を書き換えてください（「em」をつけることが必要です）。これで，間隔を好きなように調整できます。ほかの要素でも同様ですので，例にならって書いてみてください。

　具体的には，h1 と p，h2 と p の間にできる空きだけをつぶしたい場合は，h1，h2 の下マージンと p の上マージンを狭めます。

<style type="text/css">
h1 { margin-bottom: 0 }
h2 { margin-bottom: 0 }
p { margin-top: 0 }
</style>

このときは，h1，h2 の上マージンと p の下マージンはそのままです。ご質問の最低限のご要望を満たすのは上記の記述になります（ぴったりくっつくのがお嫌ならば，適切な間隔を指定してください）。

　あとは，ご自分で応用なされるとよいでしょう。これを機にスタイルシート（CSS）をはじめてみたいと思われれば，参考 URL の「Let's begin CSS」あたりをおすすめしておきます。

参考URL：http://www.tg.rim.or.jp/~hexane/ach/