html要素のhrで高さを変更する方法はありますか?hrを記述したときにその要素が確保する領域の上端から下端までの高さを調節する方法です。ほぼ1行分を確保してしまうのではなく、半行程度の領域で、表示したいのです。IE5以降で表示できれば可。線を太くする方法でも線の幅を狭める方法でもありません。現行の仕様では存在しない気がするのですが…「できない」との回答はいりません。変更できる情報を提供していただいた場合のみポイント付与します。もし方法が存在し、それをご存知の方がおられればよろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2003/10/31 16:45:33
  • 終了:--

回答(7件)

id:igatoxin No.1

igatoxin回答回数12ベストアンサー獲得回数02003/10/31 17:12:16

http://www.realint.com/tagmanual.html

使用可能タグ&属性一覧表

幅や色を変更したり、影をなくしたりできるようですね。

id:mady

それは知っています。

2003/10/31 21:50:55
id:masaomix No.2

masaomix回答回数1023ベストアンサー獲得回数12003/10/31 17:47:02

こうした見栄えに関する指定は全て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色のトリコロール横線にしたり、

色々応用が効きます。

すっごい邪道ですけど・・・・(^-^;

こんな方法もご参考にどうぞ(^-^;

id:mady

<IMG src=”1x1.gif” …>は代替案としては良案だと思いますし、人に見せられないということもないと思いますよ。

ただ、質問は「hrの高さを変えることが可能か」なのですが、「HR{ margin: … ;}」は質問する前にすでに試したのですが成功していません。バージョンはIE6でしか確認していないのですが、masaomixさんが確認されたのはバージョンいくつですか?

2003/10/31 21:59:51
id:sasada No.3

sasada回答回数1482ベストアンサー獲得回数1332003/10/31 17:54:05

http://www.hatena.ne.jp/list

人力検索はてな - 質問一覧

 URLはダミーです。

 夏季のような感じで如何でしょうか。

--

<HTML>

<body>

top

<hr style=”margin-top: 1.5em; margin-bottom: 2.5em;”>

bottom

</body>

</HTML>

id:mady

なるほど。高くすることは可能ということですね。でも希望は、「1行分以下にしたい」のです。margin値を負の値にすると…やってみるとわかりますが、いろいろやればいけそうな気がするんですよね…

2003/10/31 22:10:10
id:yasuoka No.4

yasuoka回答回数1ベストアンサー獲得回数02003/10/31 20:46:06

http://www.w3.org/TR/CSS1

Cascading Style Sheets, level 1

<hr>自体は1行になるので、行の高さを調節するのが良いと思います。行の高さは、スタイルを変更することになります。

例)

<div style=”line-height: 0”>改行

hogehoge改行

<hr>改行

hogehoge改行

</div>

id:mady

おぉ。いけましたね。でも…前後行のデータのスタイル属性含めて変更しなければならないのは実用的ではないですよね…。hr単独のスタイルを変更して、もしくはhrの直前直後にタグをいれたりで、できないもんでしょうか?

2003/10/31 22:42:21
id:masaomix No.5

masaomix回答回数1023ベストアンサー獲得回数12003/10/31 22:31:29

http://www.officecats.net/

動物愛護同人「ねこの事務所」

2度目なのでURLはダミーです。私のサイト(^-^;

おや、IE5でmarginが効きませんか?

IE3以降ならできると思うんですが・・・・。

もしかしたらCSSの記述方法に誤りがあるのかもしれません。

一般にブラウザはCSSの文法上の間違いを無かったことにして処理します。

一度タグの中で<HR style=”margin:上 下 右 左;”>

の形式で試してみてください。

上下左右の指定には 10px や 25% など、好みの数値が指定可能です。

ちなみにHTMLの仕様では<HR>の上下の間隔を調整できるパラメータは存在しません。

こうしたことが可能になったのはブラウザがCSSをサポートするようになったからで、

それがIEではVer3からなんです。

IE3ではずいぶん不十分なものでしたが、

5ではほとんど問題ない状態で対応しているはずです。

もしもIEのバージョンによるとお考えなら、

ためしに他の種類のブラウザで表示の様子を見てください。

CSSの記述が正しければ、少なくとも他のブラウザでは

横線の上下間隔が変化しているはずです。

しかし、仮に最新のネスケやオペラで見ても相変わらず効いていないようなら、

CSSの記述の問題ということになり、これで原因の判断が付くと思います。

id:mady

繰り返しになりますが確認したIEのバージョンは6です。5ではありません。それからこれは3回目になりますが、希望はhrの高さを低くすることです。margin:0で試していますが、ネスケ7.1では変わらず、opera7.21では狭まりました。CCSの文法は間違ってはいないでしょう。

再度書きますが希望はIEの5以降で、hrの高さを低くすることです。(できれば)前後のデータを巻き込まずに。

2003/10/31 23:27:58
id:woby No.6

woby回答回数8ベストアンサー獲得回数02003/11/01 00:03:21

URLはダミーです。

邪道かもしれませんが、CSSを使った方法です。

<DIV Style=”height:0.5em”><HR Style=”position:absolute;width:100%”></DIV>

HRタグの高さが設定できないようなので、外に枠をつけてみました。

0.5emは適宜に直して使えると思います。

一応、IE6とOpera7.11で確認しました。

ただしこの方法ですと、センタリングされたとき不自然になるのを確認しました。

他にも不具合があるかもしれません。

id:mady

!!!。できてますね、完全に。でも「position:absolute」ですか…position指定は邪道だと思っているのでちょっと採用しにくいのですが…もう少し様子をみてみます

2003/11/01 11:22:19
id:fujimi No.7

fujimi回答回数48ベストアンサー獲得回数22003/11/01 09:00:36

http://www.hatena.ne.jp/1067586333#

html要素のhrで高さを変更する方法はありますか?hrを記述したときにその要素が確保する領域の上端から下端までの高さを調節する方法です。ほぼ1行分を確保してしまうので.. - 人力検索はてな

URLはダミーです。

既に同内容の回答があったらすみません。

<div style=”line-height: 0”><hr></div>

で良いのではないかと思うのですが・・・

id:mady

見た目の希望をyasuokaさんとwobyさんの回答で達成できるのですが、実質的には、「高さを変えることはできない」ので「無理やり重ねてしまう」という代替案です。

非常にいいところまで回答をしていただいたこのお二人にはポイントを差し上げたいところなのですが、質問は「hr要素が確保する領域の高さを低くする方法」でした。結果、それに対する直接的な解決法が提示されなかったので、失礼ながらキャンセルさせていただきます。

2003/11/02 01:01:42
  • id:web345jp
    この質問者って、すごく自分勝手ですね。
    実際にできる方法を提示しているのだから、「邪道」とか自分の主観で切り捨てないでちゃんとポイントあげればいいのに。
    ひどい人間もいるもんだ。
  • id:Knoa
    態度は謙虚じゃないけど、ポイントゼロ自体はアリかなと思うな。
    まあ、ポイントあげたほうが好感持てるという点では、謙虚さが求められるのと同じかもしれないけど。

この質問への反応(ブックマークコメント)

トラックバック

  • IEでのhrの高さ IE6にてhrを使う場合、いくらCSSで hr { margin: 0px; padding: 0px; height: 1px; } としたところで、1行分の高さをとってしまう。ググってみたら、 http://support.microsoft.com/kb/883631/ja にある
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません