HTMLタグで色を付けたいが<hr>で色が取れる理由は？

2012/09/05 19:28

このQ&Aのポイント

HTMLの<hr>タグを使用すると、色が取れてしまう現象が起こる。
色を付けたい要素と色を取る要素が、<hr>タグによって分けられてしまうため、色が取れる。
<p>タグと<hr>タグは別々の要素として扱われ、それぞれに色が設定されるため、色が取れる。

NWXOTGQHH
お礼率100% (45/45)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/05 19:59 回答No.1

もっとも基本的な部分で間違っています。　仕様書だけは一度目を通して必要なとき、調べられるようにしておきましょう。・HTMLにはブロック要素と行内要素があります。　　→7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 ) 　　pもhrもブロック要素です。　それぞれの要素には内部にどの要素をおけるか決まっています。　　→<!ELEMENT P - O (%inline;)* -- paragraph --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-P ) 　　- 0 意味はp要素は終了タグを省略できる。二つ目の0は省略可能と言う意味　　(%inline)は行内要素しかもてない。 ★すなわち <p style="color:DeepPink"> あああ <hr> いいい </p> 　のソースの場合、Pは行内要素しか含まれないので、ブラウザは</p>が省略されているとみなして、また開始タグは必須ですから <p style="color:DeepPink"> あああ </p> <hr> <仮想ブロック>いいい</仮想ブロック> <p></p> などと解釈します。ブラウザによって解釈が違う。　当然、</p>でその段落は終了していますから、スタイルも適用されませんん。　この場合、 <div style="color:fuchsia;"> 　<p> 　　あああ　</p> 　<hr> 　<p> 　　いいい　</p> </div> としなければなりません。その場合borderの色はcolorで指定された色を引き継ぎますから、 <div style="color:fuchsia;"> 　<p> 　　あああ　</p> 　<hr style="color:black;"> 　<p> 　　いいい　</p> </div> とHRで別の色を指定する必要があるでしょう。 DIVは本来『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』のものですから、それがメモ書きのようなものでしたら <div class="memo"> 　<p> 　　あああ　</p> 　<hr> 　<p> 　　いいい　</p> </div> としておいて、<HEAD><?HEAD>内などのスタイルシートで div.memo p{color:fuchsia;margin:0 auto;text-indent:1em;} のように指定するほうがないです。 ★DeepPinkというcolorは指定できません。スタイルシート/HTMLで使用可能な色名は、 aqua(#00FFFF)、black(#000000)、blue(#0000FF)、fuchsia(#FF00FF)、gray(#808080)、green(#008000)、lime(#00FF00)、maroon(#800000)、navy(#000080)、olive(#808000)、orange #ffA500、purple(#800080)、red(#FF0000)、silver(#C0C0C0)、teal(#008080)、white(#FFFFFF)、yellow(#FFFF00) の１７色だけです。'CSS2では16色'

質問者

お礼 2012/10/17 20:04

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/06 11:27 回答No.3

No.2さんに、まことに申し訳ないのですが・・ <span>は行内要素ですから、<body>直下には置けませんから、<span>でマークアップするにしても、やはり <p><span>・・ <div><span> しかないです。この場合、spanが<p>をまたぐことはできませんが、ブラウザによると適当に解釈してまたぐように見える場合がありますが、本来はまたいではなりません。--ブラウザの仕様によります。　また、<body><span>であっても動作するかもしれませんが、その場合に期待通りに動作するか否かはブラウザによって差があります。　基本的には、下記サンプルのようにきちんとHTMLを書いてスタイルシートでデザインするべきでしょう。　また、hrではなく、sectionで括って、二番目以降のsectionには上線を引くというほうが、スマートで色々と応用が利いてよいです。 ★Another HTML-lint 5 ( http://www.htmllint.net/ ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みのHTML4.01strict+CSS2.1[ウェブ標準]です。 ※タブは＿に置換してあります。戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>ここはfuchsia</p> ＿＿<hr> ＿＿<p>ここもfuchsia</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>ここはfuchsia</p> ＿＿<hr> ＿＿<p>ここもfuchsia</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者