こうした見栄えに関する指定は全てCSSの領分なんです。
ここはmarginを使います。
HR{ margin: … ;}
としてもいいですし、クラス定義したり
タグの中で style=”margin: … ;” というように使ったりしても構いません。
これで自由に上下(もちろん左右も)の感覚が調整できます。
と、ここまでは普通の答えなんですが、
実は<HR>って、ブラウザによって、ちょっと見え方が変わるんですよね。
物によると、色を指定したりした時に思い通りになってくれなかったりするんです。
灰色のままとか。
そういうのが嫌な時、邪道ですけど、テーブルを使っちゃうという方法があります。
たとえばこんな感じ。
<TABLE width=”80%” cellpadding=”0” cellspacing=”0” border=”0”>
<TR>
<TD height=”4”><IMG src=”1x1.gif” width=”1” height=”1” border=”0”></TD>
</TR>
<TR>
<TD height=”1” bgcolor=”#ff6600”><IMG src=”1x1.gif” width=”1” height=”1” border=”0”></TD>
</TR>
<TR>
<TD height=”4”><IMG src=”1x1.gif” width=”1” height=”1” border=”0”></TD>
</TR>
</TABLE>
<IMG src=”1x1.gif” …>はネスケ4対策で入れる1x1ドットの透明gifです。
ネスケ4を対象としないなら省いてしまって構いません。
すっごい邪道ですけどね。人にはソース見せらんないですけどね。
でも、こちらで期待した通りの横線が引けます。
2行目セルの bgcolor を background にすると背景画像の線も引けます。
上下のmargin相当分は1・3行目のセルで調節します。
ほんとに邪道ですけど、素材屋さんからCGの罫線をもらってくるような感覚の
ちょっとしたお遊びに使ってください。
邪道な分、自由度は高いです。横3分割して3色のトリコロール横線にしたり、
色々応用が効きます。
すっごい邪道ですけど・・・・(^-^;
こんな方法もご参考にどうぞ(^-^;
<IMG src=”1x1.gif” …>は代替案としては良案だと思いますし、人に見せられないということもないと思いますよ。
ただ、質問は「hrの高さを変えることが可能か」なのですが、「HR{ margin: … ;}」は質問する前にすでに試したのですが成功していません。バージョンはIE6でしか確認していないのですが、masaomixさんが確認されたのはバージョンいくつですか?
人力検索はてな - 質問一覧
URLはダミーです。
夏季のような感じで如何でしょうか。
--
<HTML>
<body>
top
<hr style=”margin-top: 1.5em; margin-bottom: 2.5em;”>
bottom
</body>
</HTML>
なるほど。高くすることは可能ということですね。でも希望は、「1行分以下にしたい」のです。margin値を負の値にすると…やってみるとわかりますが、いろいろやればいけそうな気がするんですよね…
Cascading Style Sheets, level 1
<hr>自体は1行になるので、行の高さを調節するのが良いと思います。行の高さは、スタイルを変更することになります。
例)
<div style=”line-height: 0”>改行
hogehoge改行
<hr>改行
hogehoge改行
</div>
おぉ。いけましたね。でも…前後行のデータのスタイル属性含めて変更しなければならないのは実用的ではないですよね…。hr単独のスタイルを変更して、もしくはhrの直前直後にタグをいれたりで、できないもんでしょうか?
動物愛護同人「ねこの事務所」
2度目なのでURLはダミーです。私のサイト(^-^;
おや、IE5でmarginが効きませんか?
IE3以降ならできると思うんですが・・・・。
もしかしたらCSSの記述方法に誤りがあるのかもしれません。
一般にブラウザはCSSの文法上の間違いを無かったことにして処理します。
一度タグの中で<HR style=”margin:上 下 右 左;”>
の形式で試してみてください。
上下左右の指定には 10px や 25% など、好みの数値が指定可能です。
ちなみにHTMLの仕様では<HR>の上下の間隔を調整できるパラメータは存在しません。
こうしたことが可能になったのはブラウザがCSSをサポートするようになったからで、
それがIEではVer3からなんです。
IE3ではずいぶん不十分なものでしたが、
5ではほとんど問題ない状態で対応しているはずです。
もしもIEのバージョンによるとお考えなら、
ためしに他の種類のブラウザで表示の様子を見てください。
CSSの記述が正しければ、少なくとも他のブラウザでは
横線の上下間隔が変化しているはずです。
しかし、仮に最新のネスケやオペラで見ても相変わらず効いていないようなら、
CSSの記述の問題ということになり、これで原因の判断が付くと思います。
繰り返しになりますが確認したIEのバージョンは6です。5ではありません。それからこれは3回目になりますが、希望はhrの高さを低くすることです。margin:0で試していますが、ネスケ7.1では変わらず、opera7.21では狭まりました。CCSの文法は間違ってはいないでしょう。
再度書きますが希望はIEの5以降で、hrの高さを低くすることです。(できれば)前後のデータを巻き込まずに。
URLはダミーです。
邪道かもしれませんが、CSSを使った方法です。
<DIV Style=”height:0.5em”><HR Style=”position:absolute;width:100%”></DIV>
HRタグの高さが設定できないようなので、外に枠をつけてみました。
0.5emは適宜に直して使えると思います。
一応、IE6とOpera7.11で確認しました。
ただしこの方法ですと、センタリングされたとき不自然になるのを確認しました。
他にも不具合があるかもしれません。
!!!。できてますね、完全に。でも「position:absolute」ですか…position指定は邪道だと思っているのでちょっと採用しにくいのですが…もう少し様子をみてみます
http://www.hatena.ne.jp/1067586333#
html要素のhrで高さを変更する方法はありますか?hrを記述したときにその要素が確保する領域の上端から下端までの高さを調節する方法です。ほぼ1行分を確保してしまうので.. - 人力検索はてな
URLはダミーです。
既に同内容の回答があったらすみません。
<div style=”line-height: 0”><hr></div>
で良いのではないかと思うのですが・・・
見た目の希望をyasuokaさんとwobyさんの回答で達成できるのですが、実質的には、「高さを変えることはできない」ので「無理やり重ねてしまう」という代替案です。
非常にいいところまで回答をしていただいたこのお二人にはポイントを差し上げたいところなのですが、質問は「hr要素が確保する領域の高さを低くする方法」でした。結果、それに対する直接的な解決法が提示されなかったので、失礼ながらキャンセルさせていただきます。
それは知っています。