• ベストアンサー

水平線hrの位置 CSS

スタイルシートcssについて 大きい文字h2などの下に、水平線hrを表示させたいです。 しかし、水平線と上にある文字の間にある空白が大きすぎて不自然です。(h2のせいだと思います) どのようにすれば、空白を埋める事ができますか? よろしくお願いします。

noname#191253
noname#191253
  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

h2自体に空白が設定されているまたは無指定なら、そうなるね。 h2の設定の後に h2の「直後」のhr が詰める指定をしたら良いよ(セレクタ、という単語辺りで調べたら出てくると思う) http://www.google.com/search?hl=ja&q=css%20%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF

noname#191253
質問者

お礼

早速のご回答ありがとうございます。 セレクタについて勉強してみます。

その他の回答 (1)

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.2

最近の傾向として、hr は使用せず h2 に border を表示させていますね。 例) h2 { border-bottom : solid 1px #000; padding-bottom : .5em; }

関連するQ&A

  • CSSについて

    h3 { font-size: 120%; font-weight: bold; line-height: 1.0em; } という記述がスタイルシート内にあるのですが、 それを使って文字を書くと文字の下が大きく間が開いてしまいます。 何かつけ足せば間が開かなくなるのでしょうか? 例えば、 <H3>あいうえお</H3>かきくけこ というソースにすると、 ------------------------- あいうえお  (大きめの文字で太字)        (間が開いてしまう)  かきくけこ  (通常サイズの文字) --------------------------

    • ベストアンサー
    • HTML
  • 画像と水平線について

    すみません。 htmlで画像の下に水平線を引いたのですが、 画像と水平線の間に空白が空いてしまいます。 画像と水平線を重ねることは可能なのでしょうか。 <html> <head> <body> <img src="/image/test.gif"> <hr size="0.5" noshade color="#c7ecf9"> </body> </html> よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSを利用しているときに

    CSSを勉強しています。 leftとtopを利用して、好きな位置に画像や文章などを表示しているのですが、 スタイルシートを仕様してない時の表示分だけ、下に空白ができ、 スクロールバーを動かせてしまいます。 この空白を消すにはどうしたら良いでしょうか。

  • html5にて水平線の引き方は?

    こんにちは。 html5での水平線の引き方を調べていましたら<hr>を水平線として装飾目的で使用するのは非推奨という事が書いてありました。 そこでどうやって水平線を引くか調べてみましたが、とあるサイトでCSSにて下記のようなサンプルを見つけました。 hr { height: 3px; background-color: #ff0000; border: none; color: #ff0000; } 上記はhtml5に則った正しい表現なのでしょうか?もし正しくないなら水平線を引く方法をご教示願えないでしょうか? 以上、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • hr要素をCSSで一括指定する

    hr要素をCSSで一括指定しようと考えております。 手元のタグ辞典や、CSS関連のサイトを見ても利用できるプロパティの一覧が見つかりません。 下記のように指定する場合に、他に利用できるプロパティがありましたらご教授願います。 hr { color: #ffCCCC; background-color: #ffCCCC; height: 3px; border-style: dotted; } ※border-styleに関しては、dotted以外のもの(solid等)も把握しております。 特に、hr要素の上下に余白をとる(上下に一行分の余白)方法を探しています。 この記述でIE、NNでも問題なく表示されるのでしょうか…。

    • ベストアンサー
    • HTML
  • css のH1である文字を設定するには

    外部スタイルシートにH1,H2,H3...を定義したいのですが、たとえば、 ◎~~~ となるように、最初の◎をCSSに書き込んでおくにはどうすればいいのでしょうか?文字が無理なら画像でもかまいませんが、その場合はどのように書くのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • css、スタイルシートの読み込み順について

    head内に<link type="text/css……>でスタイルシートを3つ読み込んでいて ①reset.css ②style.css ③content.css の順で上から下に並べてるのですが②が後で読み込まれます。 !importantはどのスタイルシート内にもついてませんし、リンクの指定ミス等もありませんでした、メディアクエリのミスもありません。 一体なにが原因として考えられるでしょうか…お知恵を貸していただけますと嬉しいです。

    • 締切済み
    • CSS
  • CSSについて

    今までたくさんのCSSについてのサイトを見てきたのですが、イマイチ分かりませんでした。外部スタイルシートで最低限に書かなくてはいけないものや、文字の大きさを変えるぐらいので良いので、記述例みたいなものを教えてください。宜しくお願いします。

    • ベストアンサー
    • HTML
  • ホームページのヘッダー部分の水平線の書き方について

    素人ながらホームページを作っているのですが、ヘッダー部分の水平線の書き方がわからなくて困っております。 次のサイトのように表示したいと思っております。 http://employment.en-japan.com/ http://career.nikkei.co.jp/index.asp これらのサイトだと、一番上の水平線が隙間なく表示されております。 これを表示するためのタグは<hr>でよいのでしょうか? それとも別なタグを用いるのでしょうか? 私は試しに、<hr>を使い水平線を表示させましたが、一番上に隙間が空いてしまいました(><) すごく初歩的な質問だとは思いますが、わかる方がおりましたら、教えて下さい。

    • ベストアンサー
    • CSS
  • 全体に色を付けたいのに、<hr>で区切ると色が取れ

    全体に色を付けたいのに、<hr>で区切ると色が取れちゃう ***************************** <html> <body> <p style="color:DeepPink"> あああ <hr> いいい </p> </body> </html> ***************************** を実行すると、「あああ」だけに色が付き、 <hr> から下は、元の色に戻ってしまいます。 <hr>は、<p style="color:DeepPink">と</p> の間にあるのに、なぜ、<hr>を境目に色が取れてしまうのでしょうか? ***************************** <html> <body> <p style="color:DeepPink"> あああ </p> <hr> <p style="color:DeepPink"> いいい </p> </body> </html> ***************************** と、 するしかないですか?

    • ベストアンサー
    • HTML

専門家に質問してみよう