- ベストアンサー
<h1>、<h2>と<p><div>の行間を狭くする方法
お世話になります。 ホームページを作成する場合、見出し<h1>または<h2>の下に<p><div>で本文を記述すると、見出しと本文の間が空いてしまいます。 この間を狭く調整する方法を探しています。 よろしくお願いします。
- top990
- お礼率29% (18/62)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （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」あたりをおすすめしておきます。
その他の回答 (1)
- めとろいと（@naktak）
- ベストアンサー率36% (785/2139)
<P>以外は、スタイルシートで指定する事で可能です。 <H1 style="margin-bottom:0">test</H1> などでも可能です。
関連するQ&A
- <H>タグの見出しと<P>タグの本文の間隔について
初めてのホームページ作成に挑戦してます。 スタイルシートでデザインを調整しているのですが、 <H>タグの見出しと<P>タグの本文の間隔をＣＳＳで二つの要素のマージンを0、パディング0にしても文字一つ分の間隔が空きます。ある一定の間隔以上縮めることができません。 また<H>タグと<TABLE>タグの間隔も<P>タグ以上に大きく間隔が開いてしまいそれ以上縮めることができなくて困ってます。 こういうものなんでしょうか？ <DIV>タグなら間隔を好きなように調節でます。全て<DIV>タグで見出しも本文も書きたいくらいです。表は無理ですが・・・。
- ベストアンサー
- HTML
- <div>テキスト</div>
HTMLを記述する際に文書構造を明確に…と考えています。 見出しにはHタグ、本文にはPタグ、リストにはliなどなど。 ある書籍でbody直下にテキストを配置するのはいけない、と書いてありました。テキストに意味付けがなされていないから、というようなことが理由として書いてありました。 そこで思ったのですが、divはもともと意味をなさないブロック要素ですが、この直下にテキストを配置すると、このテキストは文書構造上意味を持たないものになって、文法上間違っているのでしょうか？ 今のところ、 <div><p>テキスト</p></div> のように、pで意味付けをするのが正しいのかな、と考えていますが、W3Cのホームページではdiv直下にテキストを配置しているものがありました。 皆さんのご意見を伺いたいです。 div直下のテキストは正しいのか、間違っているのか、どうでもいいのか？
- ベストアンサー
- HTML
- H1 タグの行間
いつもお世話になっています。 早速ですが、H1 H2 タグを使用したときなどにテキストの下に行間ができてしまいます（見出しタグだから仕方ないかもしれませんが）。 この行間を調整するタグなどあるのでしょうか？ また補足として、見出しタグはあまり文字の大きさなどは検索エンジン対策上加工しないほうがよいのでしょうか？ 宜しくお願いします。
- 締切済み
- ホームページ作成ソフト
- 画像はDIVタグとPタグの両方で囲むの？
クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか？ ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>～</div>に文章はありません。 同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2（見出しタグ？）で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか？ すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか？ 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。
- 締切済み
- HTML
- <H1>を使わずに<H2>以下を使用するのは邪道？
通常は、 <H1>見出し1</H1> <H2>見出し2</H2> <P>本文</P> <H2>小見出し2</H2> <P>本文</P> … こんな使い方が正しいのだと思いますが、<H1>に 該当する部分が、スライスした画像をテーブルで レイアウトしたもの等、上下に余白が入って欲しくない 場合、<H1>タグを使わないで<H2>タグを使っています。 でもやはり、この方法は邪道でしょうか。 それなら<H2>の部分を<H1>にした方がよいのでしょうか？
- 締切済み
- HTML
- hタグを使わずに小見出し
hタグは h1,h2,h3,h4 の順に書くべきだと分かってはおりますが、 例えば以下のように、大きいコンテンツの中でh2ブロック→h3ブロックと続き、 h2ブロックは、いわゆるコンテンツの中の序章です。 その際、序章の中の小見出し（<●●●>部分）のタグはどうするのが適当でしょうか。 <h2>の中にいきなり<h4>は変ですよね。 <h2>の中の見出しも<h3>でしょうか？ そうした場合、<h2>の中にある<h3>と後から出てくる<h3>ブロックが 同レベルだと認識されてしまいませんでしょうか。 それとも<p>、<strong>、<div>等が適当でしょうか？ -------------------------------------- <h1>第1の見出し</h1> <div id="contents"> <div class="section"> <h2>第2の見出し</h2> <●●●>第2に関連する小見出し</●●●> <p>テキストテキストテキスト</p> <●●●>第2に関連する小見出し</●●●> <p>テキストテキストテキスト</p> </div> <div class="section"> <h3>第3の見出し</h3> <p>テキストテキストテキスト</p> <h3>第3の見出し</h3> <p>テキストテキストテキスト</p> </div> </div> -------------------------------------- 検索してもみたのですが「hタグは順番通りに書くべし」といった記事ばかり引っかかり うまく見つけられませんでしたので、ここに質問させていただきます。 また、分かる方には基本なことかもしれませんが、 私も一応調べ、それでも分からなく質問しておりますので 「こんなこと基本的なこと」や「もっと勉強しろ」等の 攻撃的な文言は避けて頂きたくお願いします。
- ベストアンサー
- CSS
- divタグで位置を指定したい
お世話になります。 ホームページを作成しています。 写真がメインのページになりますので、基本的に文章は余りありませんが、 左下に少し更新用の文章があるようにしたいです。 この場合divタグを使用して下に持ってくる場合はどのようにすればよいのでしょうか？ マージンで調整したのですが、文字が増えてくると下に飛び出したりして不安定になって困っています。 お願いします。
- ベストアンサー
- CSS
- onclickを使わずにイベント処理をする方法について。
onclickを使わずにイベント処理をする方法について。 【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】 されるようにしたいのですが、IEで動作せず、困っています。 下記は現在のコードです。 -------------------------------------------------------------------------- var divs = document.getElementsByTagName('div'); var listener = function(ev){ if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){ var next = ev.target.nextSibling.nextSibling; if(next.style.display != "none"){ next.style.display = "none"; }else{ next.style.removeProperty("display"); } } }; if (document.addEventListener) { document.addEventListener('click', listener, false);// IE以外 } else { document.attachEvent("onclick", listener);// IE } -------------------------------------------------------------------------- <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> -------------------------------------------------------------------------- ev.target.classNameあたりが怪しく… window.event.srcElement.classNameに変更してみましたが動作しませんでした。 html側の制約があり、出来れば上記のようなclassのみのhtmlで、 更にわがままを言うと <div class="text"> <h1>見出し</h1> <p>本文</p> </div> のようにdivにclassを振った形で実現したいです。 なお、現在のコードは複数のサンプルコードを参考に試行錯誤したものですので 不要なコードが混ざっているかもしれません。 動作確認環境はIE7、IE8、Firefox、Safari（Windows）です。 納期が迫り大変困っています。アドバイスを頂けますと嬉しいです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- Dreamweaverのh1についておしえてください
Dreamweaverのh1についておしえてください。 Dreamweaverの付属のテンプレートを見たら、ヘッダーにh1を使い、コンテンツにもh1が使用されているのですが、h1は1ページ1回と認識していたのですが、ヘッダーとコンテンツなら大丈夫なのでしょうか？ CSSは、下記のようになっています。 <body class="thrColHybHdr"> <div id="container"> <div id="header"> <h1>見出し</h1> <!-- end #header --></div> <div id="sidebar1"> <h3>sidebar1 コンテンツ</h3> <p>省略。 </p> <p>省略 </p> <!-- end #sidebar1 --></div> <div id="sidebar2"> <h3>sidebar2 コンテンツ</h3> <p>省略 </p> <p>省略 </p> <!-- end #sidebar2 --></div> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>省略 </p> <p>省略 </p> <h2>H2 レベルの見出し </h2> よろしくご指導お願いします。
- 締切済み
- ホームページ作成ソフト
- pとdivのどちらが良いでしょうか？
pタグとspanタグとdivタグの使い分けがよくわからないので http://techmemo.biz/html/p%E8%A6%81%E7%B4%A0%E3%80%81div%E8%A6%81%E7%B4%A0%E3%80%81span %E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84/ を読んだのですが、それでもよくわかりません。 私がやりたい事はindexページにタイトルを表示したいのですが 文字の装飾はしたいです。 でも文字全部に色を付けてサイズを調整したいだけなので spanタグで文字の中の一部の装飾ではないです。 この場合 pとdivのどちらが良いでしょうか？ ページの上部に ～サイトの名前～ みたいにしたいです。
- 締切済み
- HTML
