- ベストアンサー
CSSでh1とその下の文字との行間を詰めたい
h1～h6を指定した場合、そのすぐ下の文字との行間が1文字分空きますよね。 見栄えが良いように、h*のすぐ下の文字との行間を調整したい場合、CSSでは、どのように指定すれば良いでしょうか？ よろしくお願いします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
おそらく，h1，h2，……，h6，p の前後には，既定で 1 行分程度の空きができているはずです。そこで，それらの間の空きをすべて詰めてしまう記述を考えます。 次の記述を <head>...</head> に加えてみてください。 <style type="text/css"> h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0 } p { margin-top: 0; margin-bottom: 0 } </style> これでこれらの要素が隣接しても，ぴったりくっついて出てきます（<!-- ... --> でくくる場合もありますが，XHTML を使わなければどちらでもかまいません）。 詰めすぎ，と思われるなら，上記の数値をいじります。およそ 1 行分を「1em」として，数値を書き換えてください（「em」をつけることが必要です）。これで，間隔を好きなように調整できます。ほかの要素でも同様ですので，例にならって書いてみてください。 具体的には，たとえば見出しの直後に p が来る場合，その間にできる空きだけをつぶしたい場合は，hn の下マージンと p の上マージンを狭めます。 <style type="text/css"> h1, h2, h3, h4, h5, h6 { margin-bottom: 0 } p { margin-top: 0 } </style> このときは，hn の上マージンと p の下マージンはそのままです。ご質問の最低限のご要望を満たすのは上記の記述になります（ぴったりくっつくのがお嫌ならば，適切な間隔を指定してください）。 hn の直後に来る要素に応じて，上マージンができる場合はそれを詰めてください。 あとは，ご自分で応用なされるとよいでしょう。これを機にスタイルシート（CSS）をはじめてみたいと思われれば，参考 URL の「Let's begin CSS」あたりをおすすめしておきます。
お礼
ご回答をいただきありがとうございました。 きれいに表示することができました。 参考URLも確認をいたしました。 これを機にスタイルシートをちゃんと勉強したいと思います。 ありがとうございました。