アプリ版：「スタンプのみでお礼する」機能のリリースについて

全体に色を付けたいのに、<hr>で区切ると色が取れ

解決済

  • 質問者：NWXOTGQHH
  • 質問日時：
  • 回答数：3件

全体に色を付けたいのに、<hr>で区切ると色が取れちゃう
*****************************
<html>
<body>
<p style="color:DeepPink">
あああ
<hr>
いいい
</p>
</body>
</html>
*****************************
を実行すると、「あああ」だけに色が付き、
<hr>
から下は、元の色に戻ってしまいます。

<hr>は、<p style="color:DeepPink">と</p>
の間にあるのに、なぜ、<hr>を境目に色が取れてしまうのでしょうか？

*****************************
<html>
<body>
<p style="color:DeepPink">
あああ
</p>
<hr>
<p style="color:DeepPink">
いいい
</p>
</body>
</html>
*****************************
と、
するしかないですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

もっとも基本的な部分で間違っています。


　仕様書だけは一度目を通して必要なとき、調べられるようにしておきましょう。
・HTMLにはブロック要素と行内要素があります。
　　→7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　　pもhrもブロック要素です。
　それぞれの要素には内部にどの要素をおけるか決まっています。
　　→<!ELEMENT P - O (%inline;)* -- paragraph --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　　- 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-html4 … )』のものですから、それがメモ書きのようなものでしたら
<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色'
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/10/17 20:04

No.3

  • 回答者： ORUKA1951
  • 回答日時：

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_ … )
で検証済みの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">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:70%;margin:0 auto;background-color:silver;}
h1,h2,h3,p{margin:0 auto;}
/* 初期値のcolorを指定 */
body{color:green;background-color:gray;}

/* hrの指定 */
hr{border-color:blue;}
/* div.section中「半角スペース」のpについて */
div.section p{color:fuchsia;}
/* sectionの次のsectionに上線を引く */
div.section+div.section{border-top:4px double purple;}
-->
＿</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/10/17 20:04

No.2

  • 回答者： usami33
  • 回答日時：

＃１さんが詳しい回答をしてくれてますので、別回答を一つ



「p」を「span」に変えてみてください、範囲指定での色指定ができます
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/10/17 20:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報