htmlのブラウザごとの表示について

質問

<hr color="#FF0000" size="1" noshade>

というタグを使って赤いラインを一本引きたいのですが、
これをIE11で見ると綺麗に赤線が一本引かれているのですが
Chromeの最新版で見るとグレーの横線に変わってしまいます。
noshadeを外すとChromeでも赤いラインに変わります。

Chromeでも赤いラインに見えるようにしたいのですがこれは何がいけないのでしょうか。
セオリー通りに記述していると思うのですが何がいけないのか検討がつきません。

助言いただければ幸いでございます。

回答No.1

hitomura · ベストアンサー

> 何がいけないのでしょうか。
HTML タグの属性で色や形状を設定しようとしているところ。

以下の hr タグの解説を見れば解る通り、色や形状に関する属性はすべて非推奨になっています。色や形状は CSS で設定するべきものだからです。
https://w3g.jp/xhtml/dic/hr

また、HTML5 では hr は水平線を引くタグではなく文章の区切りを表すタグに意味が変更されています。
これは HTML に垂直線を引くタグがないことを考えると、本来は文章の区切りを表すための水平線を表すためのものとして用意されたものが誤解されて装飾に広く使われたことにたいして「いや、それ違うから」というツッコミが入ったと考えられます。

ですから、HTML5 でなくても hr タグは文章の区切りとしての水平線以外に使用するのはおかしいと私は思います。

お礼

回答頂きありがとうございます。
いろいろと勉強不足な面がありお恥ずかしい限りです。
これを機にしっかり勉強したいと思います。

回答No.4

神崎 渉瑠（@taloo）

<hr>の色の付け方
http://www.mozilla.gr.jp/standards/webtips0003.html

http://www.html5.jp/tag/elements/hr.html
<hr>を使っては行けないというわけではありません。

基本的にはセクション（章や節など）の区切りではなく段落の区切りに使う物です。

<section>
<p>文章</p>
<hr>
<p>文章</p>
</section>
（この部分には<hr>を使う必要はない。（『使っては行けない』ではない））
<section>
<p>文章</p>
<hr>
<p>文章</p>
</section>

「テーマの区切りに線を引く事」と「章の区切りに線を引く」ことは、HTMLにおいては違うのですが、
概ね、「見出しを付けるほどではないが、話題が変わる部分」に<hr>を書けば良いと思います。
（見出しを付ける程の区切りには新しい<section>にして、<section>にボーダーライン（border）を引くことで、<hr>を書く必要がなくなる。）

こういう言い方をする人がいるから、一覧表に<table>を使っては行けない、などと勘違いをする人が出てくると思うのですが。。。

お礼

回答頂きありがとうございます。
いろいろと勉強不足な面がありお恥ずかしい限りです。
一度これを機にしっかり勉強したいと思います。

回答No.3

noname#206842

文章構造と装飾の分離

html記述する部分
<hr>
のみ

CSSに記述する部分
.red{border:solid 1px #ff0000;}

<hr class="red">

参考URL：

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html

お礼

回答頂きありがとうございます。
CSSでの詳しい書き方ありがとうございます。
一度これを機にしっかり勉強したいと思います。

回答No.2

ORUKA1951

＞セオリー通りに記述していると思うのですが

どこでそのようなHTMLを学ばれたのかわかりませんが、
「タグを使って赤いラインを一本引きたいのですが、」
　は根本的に間違っています。

　15年も前、1999年のHTML4.01の勧告当時から
『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』
　---プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 ---
　が唱えられてきたはずです。
　当時から「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」です。

★ラインを引くために<hr>を使用すること
★属性 color="#FF0000" size="1" noshade
　を使用すること。セオリーからいずれも明白な誤りです。

　先日、他の質問で簡単なサンプル上げました。
透明divの下に長い余白ができてしまう - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8518974.html )
　のNo.2のソースにおいて、サブセクションの終わりに赤線を引きたければ
div.section div.section{
border-color:red;
border-width:0 0 2px 0;
}
とすればよい。

★一度仕様書
　HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
　に目を通されることを強くお勧めします。
　　最初にこのあたりをしっかり見につけておかないと将来なくことになります。

お礼

回答頂きありがとうございます。
いろいろと勉強不足な面がありお恥ずかしい限りです。
一度これを機にしっかり勉強したいと思います。