しかし、Mozilla Firefoxで見てみたら、<HR>がすべて、ただの黒い線になっていました。
<HR>をCSSを外部ファイル化して、そこで色や太さを調整していたのですが、この方法だと、Firefoxでは上手く見れないのでしょうか？
最近、Firefoxブラウザのシェアが高まっていると聞き、できれば対応させたいです。
ちなみに、CSSは、例えば、
HR.1{
color: #cccccc;
height: 1px;
border-style: solid;
}
などとしています。
IEだと、ちゃんと#cccccc通り、灰色に見れるのに、Firefoxだと黒くなってしまいます。
WEB制作にお詳しい方、ご指導いただけないでしょうか？
No.1
255
15
16pt
<style type="text/css">
hr{
color:#cccccc;
border-style:solid 1px;
background:#cccccc;
}
</style>
-------------------------------
<body>
<hr noshade color="#cccccc" />
</body>
どうも、タグ側で色指定してやらないと不可能であるようです。
予防策のために、CSS側とタグ側（hr側）どちらも指定した方が良いでしょう。
No.2
3344440
16pt
http://www.tagindex.com/stylesheet/page/hr_color.html
試してはいないのですが、background-color も同色で指定してみてはどうでしょうか？
なるほど。
明日、起きたらやってみます！
まだまだご意見を募集しております。
よろしくご指導ください。
追加：
試してみましたが、結局、変わりませんでした。
No.3
90
16pt
罫線は文字ではありませんから、colorではなく、border-colorのプロパティを使えばよかったように思います。
hr{
border-color:#cccccc;
border:solid 1px;
}
とするか、以下のようにまとめて指定することも出来ますね。
hr{
border:solid 1px #cccccc;
}
やはりborder-colorですか。
追加：
試してみましたが、結局、変わりませんでした。
No.4
25515
16pt
少々疑問が沸きましたので回答させてください。
<style type="text/css">
hr{
color:#cccccc;
border-style:solid 1px;
background:#cccccc;
}
</style>
---------------------------------------------------------
<body>
<hr noshade color="#cccccc" />
</body>
この件に関してですが、２番目の回答者さんがお答えのように、このコード内にも“既に最初から”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」が無視されてしまうことも始めて知りました。
ありがとうございました。
No.5
533
16pt
borderプロパティだけで意図通りの表示になりますよ。
外部CSSファイル
199
199
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プロパティですか。試してみます。
追加：
試してみましたが、結局、変わりませんでした。
No.6
14215
15pt
そもそもhrタグは見栄えをコントロールするためのものではありません。webページをブラウザが理解するための文書構造表現として、１つの区切りを入れたい時に、内容を持たない空要素としてマークアップするためのものです。
なので、見栄えを求めての水平線使用であればhrタグの使用を止め、borderタグを使用しなければなりません。
また、IEは市場で幅広いシェアを獲得するためか、html言語記述に関しては規則が緩くなっている上、勝手にW3Cには推奨されていない独自解釈を追加させたりもしています。ちなみに、hrタグに対して、align、noshade、size、widthを指定することは、W3Cは推奨していません。colorに関しては、IEとSafariのみがブラウザ独自で対応している値です。FireFoxだけでなく、NetscapeNavigaterでもOperaでも表示されません。ここをご存知なかったのが、質問者さまの混乱の原因の一つではないでしょうか？
私はMacOS使用者でずっとIEを入れていない（現在はSafariとFireFox）せいか、表示の崩れるWebページには度々出会います（苦笑）なので、ご質問者のように、表示崩れを発見して、すぐに対応しようとされる方に出会えると、とても嬉しいです。なんだか、ありがとうございます、って感じです（笑）
とても手間暇が掛かって大変だとは思いますが、ぜひ、hrタグを止め、borderタグを使用することを検討してみてくださいね。
なるほど。
そもそもHRタグでデザインをしようとしている時点でいけないということですね。
ご意見ありがとうございます！
No.7
533
15pt
> 試してみましたが、結局、変わりませんでした。
おかしいですね。
前述のソースを WinIE6、Firefox1.0.8、Opera8.54 で検証済みですが。
尤も、6の回答者さんの
見栄えを求めての水平線使用であればhrタグの使用を止め、
これには同感です。
ただ、閲覧者全員がグラフィカルブラウザで見ているとは限りませんので、
hr要素を適宜(あくまでも区切りとして)使い、
CSSには
hr {
display : none;
}
としておいて、
各ブロックごとにborderプロパティで指定してあげればよいと思います。
・HTML覚書とCSS2リファレンス http://hp.vector.co.jp/authors/VA022006/index.html
余談ですが、
4の回答者さんのところの返信コメントで
Firefoxでは「cellapse」が無視されてしまうことも始めて知りました。
と書かれていますが、
「border-collapse : collapse;」は認識してくれますよ。
(おそらくTypoだと思いますが、border-collapseプロパティに「cellapse」という値はありません。)
・テーブル - CSS2リファレンス http://hp.vector.co.jp/authors/VA022006/css/tables.html#bord...
あらら。そうですか。もう一度試してみます。ご親切にありがとうございます。
No.8
20
15pt
4.の回答に対して：
Firefoxでは「cellapse」が無視されてしまいます。
cellapseはtypo。collapseが正しい。これはFirefox 1.0から既に対応している。
嘘を教えないで欲しい。むしろMSIEが 'border-spacing' に対応していないのが問題。
6.の回答に対して：
そもそもhrタグは見栄えをコントロールするためのものではありません。webページをブラウザが理解するための文書構造表現として、１つの区切りを入れたい時に、内容を持たない空要素としてマークアップするためのものです。
HTML 4仕様では、hr要素を「文書構造表現」として扱っていない。
仕様書では「視覚的整形に用いる要素」として分類されている。
hr要素をマークアップした所で何かの構造を表した事にはならない。
単に人間が「見た目」によって、何かの区切りを識別できるだけ。
hr要素をどのような整形モデルで実装するかは、W3C仕様の範疇ではなく、
ウェブブラウザに依存する。したがって統一的なスタイルは期待できない。
7.の回答のとおり、
区切りに必然性があるなる、その範囲をdiv要素などでマークアップすべきだ。
それに対して 'border-bottom: solid 1px #ccc' などと指定すれば解決する。
ありがとうございます。
自分はもっと勉強しなければいけないなと思いました。
ご親切に、とても参考になりました！
No.9
20
15pt
"HR.1" というセレクタは不正。クラス名は数字やハイフンで始まってはならない。
MSIE 6の「後方互換モード」では何事もなく、解析されて仕舞うがそれは間違い。
この場合、"HR.\31" のようにすればエスケープできない事もないが、あまり奨めない。
ありがとうございます。
自分はもっと勉強しなければいけないなと思いました。
ご親切に、とても参考になりました！
ElekiBrain
2006/08/19 02:22:34
1
2
2
2
2
katsu-s
html側でも指定すれば、確かにそうですね。
でも、それだとCSSの意味がないように思うのですが、どうでしょう？