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


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

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

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

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

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

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

回答の条件
  • 1人3回まで
  • 登録:2006/08/12 01:52:46
  • 終了:2006/08/19 01:55:03

回答(9件)

id:ElekiBrain No.1

ElekiBrain回答回数255ベストアンサー獲得回数152006/08/12 02:04:56

ポイント16pt

<style type="text/css">

hr{

color:#cccccc;

border-style:solid 1px;

background:#cccccc;

}

</style>

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

<body>

<hr noshade color="#cccccc" />

</body>


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

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

id:kkk-kkk

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

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

2006/08/12 02:24:18
id:b-wind No.2

b-wind回答回数3344ベストアンサー獲得回数4402006/08/12 02:06:13

ポイント16pt

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

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

id:kkk-kkk

なるほど。

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

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

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

追加:

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

2006/08/12 10:20:05
id:cosmo_sophy No.3

cosmo_sophy回答回数9ベストアンサー獲得回数02006/08/12 02:36:44

ポイント16pt

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

hr{

border-color:#cccccc;

border:solid 1px;

}

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

hr{

border:solid 1px #cccccc;

}

id:kkk-kkk

やはりborder-colorですか。

追加:

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

2006/08/12 10:20:34
id:ElekiBrain No.4

ElekiBrain回答回数255ベストアンサー獲得回数152006/08/12 03:17:55

ポイント16pt

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


<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の意味がないように思うのですが、どうでしょう?

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

id:kkk-kkk

ありがとうございます。

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

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

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

2006/08/12 09:35:54
id:chankaz No.5

chankaz回答回数53ベストアンサー獲得回数32006/08/12 04:22:57

ポイント16pt

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>
id:kkk-kkk

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

追加:

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

2006/08/12 10:20:55
id:blanccasse No.6

blanccasse回答回数142ベストアンサー獲得回数152006/08/12 13:39:17

ポイント15pt

そもそもhrタグは見栄えをコントロールするためのものではありません。webページをブラウザが理解するための文書構造表現として、1つの区切りを入れたい時に、内容を持たない空要素としてマークアップするためのものです。


なので、見栄えを求めての水平線使用であればhrタグの使用を止め、borderタグを使用しなければなりません。


また、IEは市場で幅広いシェアを獲得するためか、html言語記述に関しては規則が緩くなっている上、勝手にW3Cには推奨されていない独自解釈を追加させたりもしています。ちなみに、hrタグに対して、align、noshade、size、widthを指定することは、W3Cは推奨していません。colorに関しては、IEとSafariのみがブラウザ独自で対応している値です。FireFoxだけでなく、NetscapeNavigaterでもOperaでも表示されません。ここをご存知なかったのが、質問者さまの混乱の原因の一つではないでしょうか?


私はMacOS使用者でずっとIEを入れていない(現在はSafariとFireFox)せいか、表示の崩れるWebページには度々出会います(苦笑)なので、ご質問者のように、表示崩れを発見して、すぐに対応しようとされる方に出会えると、とても嬉しいです。なんだか、ありがとうございます、って感じです(笑)

とても手間暇が掛かって大変だとは思いますが、ぜひ、hrタグを止め、borderタグを使用することを検討してみてくださいね。

id:kkk-kkk

なるほど。

そもそもHRタグでデザインをしようとしている時点でいけないということですね。

ご意見ありがとうございます!

2006/08/12 16:20:21
id:chankaz No.7

chankaz回答回数53ベストアンサー獲得回数32006/08/13 02:44:29

ポイント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...

id:kkk-kkk

あらら。そうですか。もう一度試してみます。ご親切にありがとうございます。

2006/08/13 12:56:58
id:katsu-s No.8

katsu-s回答回数2ベストアンサー獲得回数02006/08/13 16:38:43

ポイント15pt

4.の回答に対して:

Firefoxでは「cellapse」が無視されてしまいます。

cellapseはtypo。collapseが正しい。これはFirefox 1.0から既に対応している。

嘘を教えないで欲しい。むしろMSIEが 'border-spacing' に対応していないのが問題。


6.の回答に対して:

そもそもhrタグは見栄えをコントロールするためのものではありません。webページをブラウザが理解するための文書構造表現として、1つの区切りを入れたい時に、内容を持たない空要素としてマークアップするためのものです。

HTML 4仕様では、hr要素を「文書構造表現」として扱っていない。

仕様書では「視覚的整形に用いる要素」として分類されている。

hr要素をマークアップした所で何かの構造を表した事にはならない。

単に人間が「見た目」によって、何かの区切りを識別できるだけ。


hr要素をどのような整形モデルで実装するかは、W3C仕様の範疇ではなく、

ウェブブラウザに依存する。したがって統一的なスタイルは期待できない。

7.の回答のとおり、

区切りに必然性があるなる、その範囲をdiv要素などでマークアップすべきだ。

それに対して 'border-bottom: solid 1px #ccc' などと指定すれば解決する。

id:kkk-kkk

ありがとうございます。

自分はもっと勉強しなければいけないなと思いました。

ご親切に、とても参考になりました!

2006/08/14 00:30:55
id:katsu-s No.9

katsu-s回答回数2ベストアンサー獲得回数02006/08/13 17:20:50

ポイント15pt

"HR.1" というセレクタは不正。クラス名は数字やハイフンで始まってはならない。

MSIE 6の「後方互換モード」では何事もなく、解析されて仕舞うがそれは間違い。

この場合、"HR.\31" のようにすればエスケープできない事もないが、あまり奨めない。

レンダリングモード関連の情報

id:kkk-kkk

ありがとうございます。

自分はもっと勉強しなければいけないなと思いました。

ご親切に、とても参考になりました!

2006/08/14 00:30:57
  • id:ElekiBrain
    ElekiBrain 2006/08/19 02:22:34
    テーブルの事に関してですが、間違った入力のまま、入力支援アプリケーションに入れていたために気がつかずにそのまま使っていたようです。chankaz さん、ご指摘ありがとうございます。そしてkkk-kkk さん、故意に間違いを教えようとしたつもりはありませんが、結果的に間違いを押し付ける形になってしまったことをお詫びいたします。

    今回の事に関して、以前から思っていた疑問が再び沸き起こって参りました。それはW3C準拠のことです。例えばYahoo!などは殺人的にテーブルタグを使っています。これは、Yahoo!がCSS未対応のブラウザを考慮してのことだと思います。旧世代のブラウザに対応させるためにあえてテーブルを加えて書くことも一方では主流であると思います。私が第一に申し上げたかったのはそういった安全策のことです。ここで皆様のご意見を聞くことは質問者の方にも迷惑ですので控えます。その代わり後日W3C準拠派と臨機応変派に分かれて「いわし」にて議論して頂くことを考えております。別に今回の件があったからでなく、CSS至上主義・Strict至上主義はたまたxml完全準拠主義に前々から疑問を感じていたからです。
    この議論は他の掲示板などでも行われているようですが、「はてな」は「はてな」でまた違った展開があるかと思い、決意した次第でございます。宜しければご参加ください。
    なお、私はどちらの対策も「ほどほど」必要であると感じる人間です。
  • id:katsu-s
    ElekiBrainへ。

    >今回の事に関して、以前から思っていた疑問が再び沸き起こって参りました。それはW3C準拠のことです。例えばYahoo!などは殺人的にテーブルタグを使っています。これは、Yahoo!がCSS未対応のブラウザを考慮してのことだと思います。

    それはYahoo! Japanに先進性がなく、古臭い作りのままになっているだけ。
    米Yahoo!(http://www.yahoo.com/)は既にCSSによるレイアウトに移行している。

    >旧世代のブラウザに対応させるためにあえてテーブルを加えて書くことも一方では主流であると思います。私が第一に申し上げたかったのはそういった安全策のことです。

    もはやCSSのサポートが遅れている旧世代ブラウザのシェアは皆無に等しい。
    そういうユーザは自身が妥協すべき環境である事を自覚すべきなのである。
    旧来の方法でレイアウトが未だに使われているのは、保守的な対応に過ぎない。

    また、旧世代のブラウザにテーブルレイアウトを<strong>押し付ける</strong>必然性はない。
    CSSによる高度なレイアウトに対応しなければ、無効にするだけで済む。
    それを制作者側で無効にするか、ユーザ側で無効にするか、それだけの事。

    最も大事なのは文書の内容であって、どうレイアウトするかではない。
    たとえ線形的なレイアウトになっても、内容が読めるのであれば問題ない。

    テーブルレイアウトは、ソースを煩雑にし、種々の弊害が生じる。
    <ul>
    <li>まず編集するのがきわめて困難。</li>
    <li>文法上の間違いに気づきにくい。</li>
    <li>セルの出現順から独立できない。</li>
    <li>特定のメディアに依存しやすい。</li>
    </ul>
    たとえば、画面上と紙面上では、好ましいレイアウトが異なる。
    また、音声出力環境では、セルの二次元的関係は理解しづらい。

    >その代わり後日W3C準拠派と臨機応変派に分かれて「いわし」にて議論して頂くことを考えております。別に今回の件があったからでなく、CSS至上主義・Strict至上主義はたまたxml完全準拠主義に前々から疑問を感じていたからです。

    それでは、あなたがたの事を「視覚的効果およびレイアウト至上主義」とでも言いましょうか。
    HTMLの本質から逸脱した遣り方を誇示するために、旧式ブラウザを持ち出すのは止めて頂きたい。
    旧式ブラウザを対象として意識するなら、同様のマイノリティである障碍者の事も考えるべきだ。
  • id:ElekiBrain
    ElekiBrain 2006/08/19 18:31:30
    どうも、W3C信者katsu-s さん。まず、

    >ElekiBrainへ。

    これやめてくれませんか。私はあなたのツレではない。タメ口は「はてな」じゃ嫌悪されますよ。何様か知らないですけど。敬語を知らないんですかね。



    >もはやCSSのサポートが遅れている旧世代ブラウザのシェアは皆無に等しい。

    どこのデータなんですかね。客観的なデータの提示をお願いします。



    ><strong>押し付ける</strong>

    あらあら、コメント欄でタグが適用できると思い込んでのミス。これは痛いですね。信者さん。ちなみに、W3Cの考えを押し付けることはどうなんですかね。それはそれで議論を生んでいるようですが。



    >CSSによる高度なレイアウトに対応しなければ、無効にするだけで済む。

    どこの世界でこんな常識が通用するのか。ヘッダ・フッタやらがグチャグチャになっても文書構造が正しければ見栄えは関係ないとでも言いたげです。狂気ですね。



    >線形的なレイアウトになっても、内容が読めるのであれば問題ない。

    それならテーブルでも問題ないでしょ。私もテーブルはあんまり好きじゃないですけど、テーブルレイアウトを否定するところまでは行きません。ユーザービリティよりも文書構造ですか。



    >まず編集するのがきわめて困難。

    そのために各種フレームワークが提供されているはずです。WYSIWYGで大まかなところを作りこんでおいて、そこから編集、という形が現在は主流ですよ。それとも最初から手書きですか? ずいぶんと生産性の低い、現実を軽視した発言ですね。



    >特定のメディアに依存しやすい。

    携帯メディアを一切無視した発言。テーブルは携帯メディアではまだまだ全盛です。



    >HTMLの本質から逸脱した遣り方を誇示するために

    まさに信者。ブラウザ戦争はよろしくないことですが、各社が提供するブラウザが表示と構造を決定付けているのは間違いない。W3Cの宣伝に踊らされているだけです。



    ※※ご注意!※※
    一応返答しましたが、ここではkkk-kkk さんに迷惑がかかるため、新たに「いわし」を立てる、と書いたはずです。よく読んでください。kkk-kkk さんがメール通知するように設定されている場合、次々私とあなたのやりとりがメールに届くわけです。「いわし」が立つまで待てないんでしょうか?
    今日新たに立てました。以下で行われています。
    http://q.hatena.ne.jp/1155979753

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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