
<hr color="#FF0000" size="1" noshade>
というタグを使って赤いラインを一本引きたいのですが、
これをIE11で見ると綺麗に赤線が一本引かれているのですが
Chromeの最新版で見るとグレーの横線に変わってしまいます。
noshadeを外すとChromeでも赤いラインに変わります。
Chromeでも赤いラインに見えるようにしたいのですがこれは何がいけないのでしょうか。
セオリー通りに記述していると思うのですが何がいけないのか検討がつきません。
助言いただければ幸いでございます。
No.1ベストアンサー
- 回答日時:
> 何がいけないのでしょうか。
HTML タグの属性で色や形状を設定しようとしているところ。
以下の hr タグの解説を見れば解る通り、色や形状に関する属性はすべて非推奨になっています。色や形状は CSS で設定するべきものだからです。
https://w3g.jp/xhtml/dic/hr
また、HTML5 では hr は水平線を引くタグではなく文章の区切りを表すタグに意味が変更されています。
これは HTML に垂直線を引くタグがないことを考えると、本来は文章の区切りを表すための水平線を表すためのものとして用意されたものが誤解されて装飾に広く使われたことにたいして「いや、それ違うから」というツッコミが入ったと考えられます。
ですから、HTML5 でなくても hr タグは文章の区切りとしての水平線以外に使用するのはおかしいと私は思います。
No.4
- 回答日時:
<hr>の色の付け方
http://www.mozilla.gr.jp/standards/webtips0003.h …
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
- 回答日時:
文章構造と装飾の分離
html記述する部分
<hr>
のみ
CSSに記述する部分
.red{border:solid 1px #ff0000;}
<hr class="red">
参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
No.2
- 回答日時:
>セオリー通りに記述していると思うのですが
どこでそのようなHTMLを学ばれたのかわかりませんが、
「タグを使って赤いラインを一本引きたいのですが、」
は根本的に間違っています。
15年も前、1999年のHTML4.01の勧告当時から
『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
---プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 ---
が唱えられてきたはずです。
当時から「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。
★ラインを引くために<hr>を使用すること
★属性 color="#FF0000" size="1" noshade
を使用すること。セオリーからいずれも明白な誤りです。
先日、他の質問で簡単なサンプル上げました。
透明divの下に長い余白ができてしまう - Webデザイン・CSS - 教えて!goo( http://oshiete.goo.ne.jp/qa/8518974.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-html4 … )
に目を通されることを強くお勧めします。
最初にこのあたりをしっかり見につけておかないと将来なくことになります。
回答頂きありがとうございます。
いろいろと勉強不足な面がありお恥ずかしい限りです。
一度これを機にしっかり勉強したいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) VBAにてメール作成した際、一部指定箇所のみ赤文字にしたいです。 下記の内容ですと作成されたメール本 1 2022/04/27 13:31
- Chrome(クローム) Chromeでgooglemap検索等結果が他国になってしまう 1 2022/10/05 12:18
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- Chrome(クローム) Chromeの履歴表示を改善したい 1 2023/01/19 22:06
- ホームページ作成・プログラミング chromeでhttpdを使うと 2 2022/03/23 10:54
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- 政治 沿線住民の利益を考えれば、赤字路線は切り捨てるのは当然ではないか? 4 2022/04/12 08:59
- その他(パソコン・周辺機器) パソコンでWindows Media Player で動画を見て 赤い×ボタンで動画画面を閉じると、 1 2023/01/10 05:42
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- その他(ブラウザ) グーグルクローム パソコン用のブラウザ 画面を大きくする拡張機能ズームがうまくいきません 新しいバー 1 2023/01/16 00:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
コンテナの上下左右を囲う線の...
-
name="description"が効きません
-
html の divとtable の役割
-
XHTMLでループ処理のやり方
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
ヘッダーを左右に二分割する方...
-
HTML属性での「""」 「''」違い
-
ヘッダーとフッターだけ背景を...
-
ホリエモンのブログは、なぜ両...
-
htmlの見出しタグ(<h1>)の次...
-
CSS。特定ID内の特定IDにだけ適...
-
divの中に外部のHTMLを埋め込む
-
セクションをdivで囲むと見出し...
-
1時間30分を簡単に表したいで...
-
ソースには表示、表には非表示...
-
グリッドレイアウトで"auto-fit...
-
html5でheaderの中にnav
-
幅を可変にし2段組をCSSで組む...
-
ホームページのSEO対策について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
グリッドレイアウトで"auto-fit...
-
divとpの使いわけ
-
セクションをdivで囲むと見出し...
-
スペースを使わず文字位置を揃...
-
divの中に外部のHTMLを埋め込む
-
body>div{}の意味を知りたい
-
要素間、要素内に隙間が空く
-
ヘッダーを左右に二分割する方...
-
html5でheaderの中にnav
-
hタグを使わずに小見出し
-
CSSを使って定型文を挿入できま...
おすすめ情報