- ベストアンサー
<h1>、<h2>と<p><div>の行間を狭くする方法
お世話になります。 ホームページを作成する場合、見出し<h1>または<h2>の下に<p><div>で本文を記述すると、見出しと本文の間が空いてしまいます。 この間を狭く調整する方法を探しています。 よろしくお願いします。
- top990
- お礼率29% (18/62)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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」あたりをおすすめしておきます。
その他の回答 (1)
- めとろいと（@naktak）
- ベストアンサー率36% (785/2139)
<P>以外は、スタイルシートで指定する事で可能です。 <H1 style="margin-bottom:0">test</H1> などでも可能です。
