人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: mady
●カテゴリ:コンピュータ
✍キーワード:hr HTML ポイント 仕様 存在
○ 状態 :キャンセル
└ 回答数 : 7/7件

▽最新の回答へ

1 ● igatoxin

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

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

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

◎質問者からの返答

それは知っています。


2 ● masaomix

http://tohoho.wakusei.ne.jp/css/reference.htm#margin

こうした見栄えに関する指定は全て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さんが確認されたのはバージョンいくつですか?


3 ● sasada

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

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

URLはダミーです。

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

--

<HTML>

<body>

top

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

bottom

</body>

</HTML>

◎質問者からの返答

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


4 ● yasuoka

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

Cascading Style Sheets, level 1

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

例)

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

hogehoge改行

<hr>改行

hogehoge改行

</div>

◎質問者からの返答

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


5 ● masaomix

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の記述の問題ということになり、これで原因の判断が付くと思います。

◎質問者からの返答

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

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


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ