あなたの映画力を試せる!POPLETA映画検定(無料) >>

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

A 回答 (1件)

詳細なCSSの仕様がわからないので、何とも言えませんが、


<h1 style="margin-bottom: 0;">
としてはいかがでしょうか?
(さらにその下の行のスタイルもstyle="margin-top: 0;"となります。)
    • good
    • 1
この回答へのお礼

できました。すごいです!
ずっと行間だと思い、line-heightしか思いつきまでんでした。
ありがとうございました。

お礼日時:2007/03/23 15:40

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

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>

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

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改行したときの幅を狭くする方法

HTMLで文章を打っていると、改行なしの単純な折り返しの場合に比べて、改行したときに行間があいてしまいます。表を作成しても、表の中で改行すると同じことが起こります。
これを防ぐにはどうしたらよいでしょうか。
編集ソフトにファイルメーカーのHomepage Pro3.0 v1を使用していますが、HTMLを直接修正する方法でも結構です。

Aベストアンサー

たぶん、タグが<P>となっていると思われますので、
これを<BR>に変更すれば、行間の空かない改行になります。

また、ファイルメーカーのHomepage の場合の方法はわかりませんが、
DreamWeaverでは、Shiftを押しながら、改行すると、<BR>となります。
もしかしたら、同じ操作ができるかもしれません。

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画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

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>使って下さい。

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に指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

Qリストの前後の行間をなくす方法を教えてください。

<LI>を使ってリストを作ると、その前後に行間ができてしまいます。この空白を狭くしたり、なくしたりする方法があれば教えていただきたいのです。よろしくお願いします。

Aベストアンサー

 既定では,多くのブラウザで,li 要素の前後には空きはできないはずですが……。
 おそらく,ul,ol,dl 要素の前後にできる空きを詰めたいのであれば,スタイルシートをお使いください。
 具体的には,ヘッダ(<head>...</head>)に次のように記述します。

<style type="text/css">
ul, ol, dl { margin-top: 0; margin-bottom: 0; }
</style>

数値「0」が前後にできる空きの量の指定です。これを,1em にすると(単位をつけてください)1 行分,0.5em にすると 0.5 行分,のように空きます。
 また,ものによっては,

<style type="text/css">
<!--
ul, ol, dl { margin-top: 0; margin-bottom: 0; }
-->
</style>

と書いてありますが,今となってはたいした違いではありません(むしろ,前の書き方が今後主流になります)。

 スタイルシートについてもっとお知りになりたければ,参考 URL の「Let's begin CSS」あたりが参考になるでしょうか。

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

 既定では,多くのブラウザで,li 要素の前後には空きはできないはずですが……。
 おそらく,ul,ol,dl 要素の前後にできる空きを詰めたいのであれば,スタイルシートをお使いください。
 具体的には,ヘッダ(<head>...</head>)に次のように記述します。

<style type="text/css">
ul, ol, dl { margin-top: 0; margin-bottom: 0; }
</style>

数値「0」が前後にできる空きの量の指定です。これを,1em にすると(単位をつけてください)1 行分,0.5em にすると 0.5 行分,のように空きます。
 ま...続きを読む

Qスタイルシートでh1の属性行間のを高さを17ピクセルにしたい場合

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

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

Aベストアンサー

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>
---------------------------------

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>
...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング