人気マンガがだれでも無料♪電子コミック読み放題!!

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

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

A 回答 (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」あたりをおすすめしておきます。

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

<P>以外は、スタイルシートで指定する事で可能です。


<H1 style="margin-bottom:0">test</H1>
などでも可能です。
    • good
    • 0

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

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

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

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

Aベストアンサー

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

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

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

Aベストアンサー

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

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

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方の隙間が開く。

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テーブル内の文字サイズを変更したい。

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で文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む


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

人気Q&Aランキング