はじめての親子ハイキングに挑戦!! >>

スタイルシートでh1の文字の大きさを変えていますが、表示すると本来の行送りと同じ分の高さが出て、デザイン的に高さがありすぎる行間になっています。
この場合、行高さの設定をするのですか。line-height:17px;で指定しても直らないようなんですが。

この指定で合ってますか。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

line-heightは行間を開けるタグで減らす為のタグではない。



line-height:17px;
の値17からh1の縦幅値を引いた数字が行間になる。
h1は元々幅が大きいので・・・

margin指定
---------------------------------
<style type="text/css"><!--

h1 { font-size: 18px; }

--></style>
---------------------------------
<h1>BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 1px 0;">BBBBB</h1>
<h1 style="margin: 2px 0;">BBBBB</h1>
<h1 style="margin: 3px 0;">BBBBB</h1>
<h1 style="margin: 6px 0;">BBBBB</h1>
<h1 style="margin: 10px 0;">BBBBB</h1>
<h1 style="margin: 15px 0;">BBBBB</h1>
---------------------------------
    • good
    • 0
この回答へのお礼

<style type="text/css">
<!--
.h1{
margin-top:0px;
margin-bottom:0px;
}
-->
</style>

でできました。ありがとうございます。

お礼日時:2006/10/10 14:59

いまいち質問が理解できないのは私の理解力不足でしょうか……。



line-heightは行間を指定するというより、行の高さを指定するものです。
ところで、line-heightプロパティには単位のない数値を指定することを推奨します。CSSでは殆どの場合、必ず単位をつけなければなりませんが、このプロパティでは、単位無しの数字はemとほぼ同じ働きをします。異なる点は、例えばfont-size:20pxでline-height:1.3emと指定された要素があり、その子要素にfont-size:40pxと指定されていると、子要素の文字列は他の行と被ります。line-heightの値が26pxとして継承されているからです。
一方、先の例で1.3emの代わりに1.3と記述すると、子要素が他の行とは被りません。
意外と知られていませんが。

それと、1氏の他、割と多くの人が間違えていますが、line-heightはCSS「プロパティ」です。
何でもかんでも「タグ」と呼ぶのは無用な混乱を招く原因です。よく判らなければ「もの」とでもして曖昧にするのが無難。
    • good
    • 0
この回答へのお礼

単位を必ずつけたほうがいいですね、ありがとうございます。

お礼日時:2006/10/10 15:03

.h1 {


margin:0;
padding:0;
font-size:12px;
}

こんなんで出来ませんかね?
動作未確認。
    • good
    • 0
この回答へのお礼

今回はmargin-top:0px;とmargin-bottom:0px;で対応できました。ありがとうございます。

お礼日時:2006/10/10 15:01

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでh1とその下の文字との行間を詰めたい

h1~h6を指定した場合、そのすぐ下の文字との行間が1文字分空きますよね。
見栄えが良いように、h*のすぐ下の文字との行間を調整したい場合、CSSでは、どのように指定すれば良いでしょうか?
よろしくお願いします。

Aベストアンサー

 おそらく,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:http://www.tg.rim.or.jp/~hexane/ach/

 おそらく,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 を使わなければどちらでもかま...続きを読む

Q

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

Aベストアンサー

 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/

 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>

これでこれらの要素が...続きを読む

Q

タグの後の行間を詰めたい。

検索にかかって欲しいので、H1タグは絶対ですが、このタグを使うと、文字が自動的にでかくなりますね。
こちらはcssでなんとかできますが、下にひろく行間が開いてしまうのはなんともならないのでしょうか?
わかるかたいらっしゃいましたらよろしくお願いいます。

Aベストアンサー

詳細なCSSの仕様がわからないので、何とも言えませんが、
<h1 style="margin-bottom: 0;">
としてはいかがでしょうか?
(さらにその下の行のスタイルもstyle="margin-top: 0;"となります。)

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q

現在、CSSでホームページを作っているのですが、IEではうまくセンター表示できるのですが、firefoxなどでは左によってしまいます。

bodyに<div align="center">を記載せずにCSSだけでセンターに表示させることは出来ないものでしょうか?ちなみにIEでセンターによってしまうのはバグだと聞いたことがあるのですが、本当でしょうか?

よろしくお願いします。

Aベストアンサー

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされます。

ブロック要素の中のテキストやインライン要素をセンタリングするにはtext-alignを使います。
<div style="width:100px; text-align:center;">まんなかです</div>

それと、注意したいのは、一行目の文頭に<!DOCTYPE~>を書かないとIEは互換モードでレンダリングしだしますので、CSS解釈も(ますます)変になりますのでご注意を。

こんな感じで。

No.1の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされ...続きを読む

QH1タグを画像にしたい

有名なサイトなど見てみると、H1タグを画像で置き換えたりしていますが、あれってどうやってるんですか?私もH1タグを、ロゴにしたいんです。

Aベストアンサー

H1 "タグ" を云々というのは意味が分かりません。
「h1 要素として表示されうる内容」として捉えます。

まず、h1 要素はブロック要素です。
<h1>教えて!goo</h1>
のように記述されるのが一般的です。

ロゴ画像自体が h1 要素の内容になる場合は、
<h1><img src="goo_logo.gif" alt="教えて!goo" width="200" height="100"></h1>
とすれば、h1 要素の内容として画像が表示されることが期待できます。

そうでなく、テキストを h1 要素の内容としてロゴに置き換えるような場合は、
<h1>教えて!goo</h1>
とした上で、

h1 {
width:200px;
height:100px;
padding:0;
background:url("goo_logo.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
}

などと指定すれば、
text-indent プロパティによって h1 要素の内容であるテキストがブラウザの表示領域外に行くことが期待されるため、テキストを不可視にできます。
ここで、テキストを span 要素で括って display:none としたり、h1要素に対して visibility:hidden とする方が妥当であると思われますが、
そうしてしまうと音声認識ブラウザまでもが内容を無視してしまいます。
この件については議論がありますが、現在の状況では text-indent プロパティが最も妥当であると考えられています。

テキストが不可視になったところで、h1 要素の内容領域を確保します。
その領域内に背景として画像を表示させるという考えを用いて実現しています。

background プロパティの position にあたる部分は、確保した領域が画像の幅と等しければ、
50%(center) 50%(center) でも、100%(right) 100%(bottom) でも同じです。
ただし、padding 値を考慮する必要があります。padding:0 であれば問題ありません。

背景画像としてロゴを表示させている場合に、ロゴの部分をリンクにしたいのであれば、
a 要素を display:block として a 要素に対して同様の指定を行うことで実現できます。

h1 要素に対して margin, border, padding を指定すると、h1 要素のボックスサイズは width 及び height で指定した値にそれらの値を加算した幅となります。

H1 "タグ" を云々というのは意味が分かりません。
「h1 要素として表示されうる内容」として捉えます。

まず、h1 要素はブロック要素です。
<h1>教えて!goo</h1>
のように記述されるのが一般的です。

ロゴ画像自体が h1 要素の内容になる場合は、
<h1><img src="goo_logo.gif" alt="教えて!goo" width="200" height="100"></h1>
とすれば、h1 要素の内容として画像が表示されることが期待できます。

そうでなく、テキストを h1 要素の内容としてロゴに置き換えるような場合は、
<h1>教えて!goo<...続きを読む

Q

を使っても無改行にするには

<h1>あいうえお</h1>かきくけこ
とした場合、
あいうえお
かきくけこ
と改行されてしまいますが、これを改行せずに書き込む方法はないでしょうか?スタイルシートを使った方法でも構いませんので、宜しくお願いします。

Aベストアンサー

#3です。
失礼スペルミスです。
<style>
<!--
h1 {display:inline;}
-->
</style>

http://www.tohoho-web.com/css/index.htm

> SEO対策にと、重要なキーワード順に<h1>~<h3>を使いわけたい
下手にやって逆効果にならないように。
デザイン上の問題で、
タイトル:概要(数十文字程度)
とする程度なら問題ないとは思いますが、
ここは<h2>強調</h2>したい、ここも<h1>もっと強調</h>したい……
なんて構文を無視して<h○>乱用するとサーチエンジンスパムだと思われますよ。
見る側も不便だし。
スタイルシート適用しないで見ればわかりますが。
文章中で強調したいなら<em>や<strong>使って下さい。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング