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

今まで、Internet Explorerを使用していて、それでホームページを見たときは、<HR>タグはいろいろな色や太さで見れました。

しかし、Mozilla Firefoxで見てみたら、<HR>がすべて、ただの黒い線になっていました。

<HR>をCSSを外部ファイル化して、そこで色や太さを調整していたのですが、この方法だと、Firefoxでは上手く見れないのでしょうか?

最近、Firefoxブラウザのシェアが高まっていると聞き、できれば対応させたいです。

ちなみに、CSSは、例えば、
HR.1{
color: #cccccc;
height: 1px;
border-style: solid;
}
などとしています。

IEだと、ちゃんと#cccccc通り、灰色に見れるのに、Firefoxだと黒くなってしまいます。

WEB制作にお詳しい方、ご指導いただけないでしょうか?

●質問者: kkk-kkk
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:border color CSS firefox hr
○ 状態 :終了
└ 回答数 : 9/9件

▽最新の回答へ

1 ● ElekiBrain
●16ポイント

<style type="text/css">

hr{

color:#cccccc;

border-style:solid 1px;

background:#cccccc;

}

</style>

-------------------------------

<body>

<hr noshade color="#cccccc" />

</body>


どうも、タグ側で色指定してやらないと不可能であるようです。

予防策のために、CSS側とタグ側(hr側)どちらも指定した方が良いでしょう。

◎質問者からの返答

html側でも指定すれば、確かにそうですね。

でも、それだとCSSの意味がないように思うのですが、どうでしょう?


2 ● b-wind
●16ポイント

http://www.tagindex.com/stylesheet/page/hr_color.html

試してはいないのですが、background-color も同色で指定してみてはどうでしょうか?

◎質問者からの返答

なるほど。

明日、起きたらやってみます!

まだまだご意見を募集しております。

よろしくご指導ください。

追加:

試してみましたが、結局、変わりませんでした。


3 ● cosmo_sophy
●16ポイント

罫線は文字ではありませんから、colorではなく、border-colorのプロパティを使えばよかったように思います。

hr{

border-color:#cccccc;

border:solid 1px;

}

とするか、以下のようにまとめて指定することも出来ますね。

hr{

border:solid 1px #cccccc;

}

◎質問者からの返答

やはりborder-colorですか。

追加:

試してみましたが、結局、変わりませんでした。


4 ● ElekiBrain
●16ポイント

少々疑問が沸きましたので回答させてください。


<style type="text/css">

hr{

color:#cccccc;

border-style:solid 1px;

background:#cccccc;

}

</style>

---------------------------------------------------------

<body>

<hr noshade color="#cccccc" />

</body>


この件に関してですが、2番目の回答者さんがお答えのように、このコード内にも“既に最初から”background:#cccccc;と同色を指定していますし、黒い線になってしまうため気になる、というご質問でしたので、そのためにタグ側に「noshade」の属性を加えてあります。

影をなくすことによって、黒く見えにくくする効果も入っています。よくコードをご覧になられましたでしょうか? 非常に疑問に思いました。


>html側でも指定すれば、確かにそうですね。でも、それだとCSSの意味がないように思うのですが、どうでしょう?


そもそも、全てのブラウザがCSS2に対応しているかというと、そうではありません。例えばテーブルで

<table cellpadding="0" cellspacing="0">xxxx</table>

としたとしましょう。この効果をCSS側で表現する場合


table{

border-collapse: cellapse;

border-spacing: 0px;

}


td,th{

border-collapse: cellapse;

border-spacing: 0px;

}


このような指定になりますよね? ところが、この方法だとFirefoxでは「cellapse」が無視されてしまいます。

本来ならば、kkk-kkkさんの仰る通り、全てCSSで見栄えを決めてしまいたいところです。しかし、実際にはそうは行きません。

W3C云々の問題にしても、全ブラウザが正確にW3C対応をしているならば問題がありませんが、実際にはそうではありません。

予防策も必要です。クロスブラウザ対策を練るのに全てCSSでやるコーダーはプロでもいないと思います。


なお、これは単なる苦情ですので0ポイントで結構です。

>html側でも指定すれば、確かにそうですね。でも、それだとCSSの意味がないように思うのですが、どうでしょう?

↑私はそんなにクソ回答しましたかね。ちょっと言い方にカチンときましたよ。

◎質問者からの返答

ありがとうございます。

私の方が知識レベルが低いので、理解できなかったのかもしれません。そこまで悪意を持った回答ではなく、純粋に疑問に思っただけなのですが、失礼があったのなら謝ります。

Firefoxでは「cellapse」が無視されてしまうことも始めて知りました。

ありがとうございました。


5 ● chankaz
●16ポイント

borderプロパティだけで意図通りの表示になりますよ。

外部CSSファイル

hr.rule1 {
border : 1px solid #ccc;
}

hr.rule2 {
border : 3px groove #800000;
}

hr.rule3 {
border : 5px dashed #00f;
}

HTMLファイル

<html>
<head>
<title>テストページ</title>
</head>
<body>
<hr class="rule1">
<hr class="rule2">
<hr class="rule3">
</body>
</html>
◎質問者からの返答

borderプロパティですか。試してみます。

追加:

試してみましたが、結局、変わりませんでした。


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


●質問をもっと探す●



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