- ベストアンサー
CSSでh1とその下の文字との行間を詰めたい
- みんなの回答 （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」あたりをおすすめしておきます。
関連するQ&A
- <h1>タグの後の行間を詰めたい。
検索にかかって欲しいので、H1タグは絶対ですが、このタグを使うと、文字が自動的にでかくなりますね。 こちらはcssでなんとかできますが、下にひろく行間が開いてしまうのはなんともならないのでしょうか？ わかるかたいらっしゃいましたらよろしくお願いいます。
- ベストアンサー
- CSS
- H1 タグの行間
いつもお世話になっています。 早速ですが、H1 H2 タグを使用したときなどにテキストの下に行間ができてしまいます（見出しタグだから仕方ないかもしれませんが）。 この行間を調整するタグなどあるのでしょうか？ また補足として、見出しタグはあまり文字の大きさなどは検索エンジン対策上加工しないほうがよいのでしょうか？ 宜しくお願いします。
- 締切済み
- ホームページ作成ソフト
- cssで文字間、行間設定。
cssで文字間、行間設定。 dreamweaverｃｓ４でサイトを作っています。 本で勉強しただけの素人です。 文字について質問です。 サイズ、行間と文字間を設定したのですが、 たとえば、文字10pt、行間11pt、文字間０ptとすると、文字間(横)はあまり詰まりません。 さらに試しに、文字10pt、行間12pt、文字間0ptにすると、行の間(縦)だけがひらくと思ったら、文字間もあきます。 ptで設定しないほうがいいでしょうか？ 文字と文字の間はやや詰めた感じで、行間を少し開けたいのですが、うまくいきません。 行間を設定すると、文字の間もあいてしまうのは、なぜなんでしょうか？？ いまいちよくわかりません。 担当のかたから、いつも、サイトの文字が読みにくい、といわれているのですが、微妙な設定がうまくいきません。 http://www.disney.co.jp/character/winnie_the_pooh/ プーさんの説明文のような、文字間隔にしたいです。(cssがみれませんでした。) どなたか、よろしくお願いします。
- ベストアンサー
- HTML
- 下付き文字による行間の幅について
お世話になります。 <SUB>タグ、CSSだと、Vertical-align:sub; を使用して 下付き文字をHTMLで表示させると行間幅がおかしくなってしまいます。 例えば、 ABCDEFGHI JKLM<SUB>N</SUB>OPQ RSTUVWXYZ のように記述すると、下付き文字の"N"のおかげで２行目と３行目の 行間幅が他よりも広くなってしまうのです。 元々行間幅を大きくとれば解消されると思いますが、 そんなことはしたくないのです。 どなたかご存じでしたらご教授いただければ幸いです。
- ベストアンサー
- HTML
- h1とh4の行間をせばめたい
h1とh4の行間をせばめたい web初心者です。教えていただけますと助かります。 今htmlで <h1>ENGLISH<br /> 日本語</h1> <h4>日本語の文章<br /> English texts are here</h4> cssで h1 { font-size: 8.5pt; line-height: 120%; margin-top: 0px; color: #333; } h4 { font-size:7pt; line-height: 115%; color: #333; } と設定しているのですが、 日本語</h1> <h4>日本語の文章 の間の行間がとても大きいのでせまくしたいと思っています。 どうしたらよいでしょうか。 また</h1>と<h4>に</br>がなくても 改行されるのはなぜなのでしょうか・・・ 今はh1の一行分くらい空いているように見えるのですが 半分くらいにしたいと思っています。 よろしくお願いします。
- ベストアンサー
- HTML
- h1をCSSでサイズ指定→文字間隔がブラウザで違う
h1をCSSでサイズ指定（px指定）しているのですが、 文字幅というか、文字間隔がブラウザごとにびっみょうに違います。 （行間や余白についてはCSSで解決済） クロームと火狐では望みどおりの表示なんですけども、 IE8だとちょっと横に広がる傾向があるんです。 長年無視しつづけてデザインしていたのですが、 この度、デザイン上無視できない状況になりまして…。 希望は、IEでもクロームでも火狐でも、 横幅が同一になるようにしたいんです。 文字間隔をCSSで指定しても解決しないんですよね…。 これ、どうにかする方法をご存知でしたらご教授下さい！ ググッたんですが、解決しませんでした…。
- 締切済み
- CSS
- イラレの行間：指定した文字の上を調整したい
イラストレーターの行間のことです。 例えば下のような文章があった場合 AAAAAA BBBBBB AAAAAAとBBBBBBの行間を広くしたいと思ったら、 現在はAAAAAAの文字を選択して、文字ボックスで行間を広げて間隔を調整するようになると思います。（VersionCS以降） Version10以前は、BBBBBBの行間を指定することでツメたり広げたりできていました。 【質問】CSで、旧バージョンでの操作方法に設定する方法はないのでしょうか？ （設定した文字の上の行間を編集したい） 文字の下の行間を指定するやり方にCSにバージョンアップして数年経ちますが全く慣れません。 現在の、選択文字の下の行間を設定する方式って面倒が多いと私は思っていますが、これって何か、以前の文字の上の行間を指定する方式より利点があるのでしょうか？ 例えば、B行をコピペして別にも利用したい場合など、いちいちコピペ先の上の行を設定しなおさなければなりませんし、A行が改行されようものなら、A行同士の行間も広がってしまいます。 全く面倒になっただけだと思いますが… ※旧Versionでは、Macを使用していましたが、現在はWinを使っています。Win版だけって事はないですよね…
- ベストアンサー
- グラフィックソフト
- CSS行間設定について困っています
gooブログのCSS編集で、エントリー本文の行間を広くさせようと思い、 line-height:200%;で広く設定していて、今までうまくいっていました。 最近また少し背景画像や文字色など編集しようと思い、色々編集していたのですが、（この時に行間については何も変更していない）、この編集が終わった後に、自分のブログを見てみると、Firefoxでは正常なのですが、IEではなぜか行間がちゃんとCSSでの設定どおりになっているところとそうでないところとで、まばらなかんじになってしまって・・・。 想定される原因や解決法がお分かりの方がいらっしゃいましたら教えていただけないでしょうか。よろしくお願いいたします。
- ベストアンサー
- ブログ
- スタイルシートでh1の属性行間のを高さを17ピクセルにしたい場合
スタイルシートでh1の文字の大きさを変えていますが、表示すると本来の行送りと同じ分の高さが出て、デザイン的に高さがありすぎる行間になっています。 この場合、行高さの設定をするのですか。line-height:17px;で指定しても直らないようなんですが。 この指定で合ってますか。
- ベストアンサー
- HTML
お礼
ご回答をいただきありがとうございました。 きれいに表示することができました。 参考URLも確認をいたしました。 これを機にスタイルシートをちゃんと勉強したいと思います。 ありがとうございました。