重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

標題<h1>に、網掛けはできますか？

解決済

  • 質問者：penichi
  • 質問日時：
  • 回答数：1件

標題に網掛けをしたいのですが、

スタイルシートに
h1 {
font-family: 'HGS創英角ポップ体';
color: #0000800;
background-color: "#ffa500";
}
を貼り付けても、うまくいきません。



このようなコードを書いたのですが、やはりうまくいきません。
<h1><p style="background-color:#ffa500;"><h1>◯◯◯◯◯</p></h1>


方法を教えていただけると、助かります。
よろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

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

仕様書をご覧になったことも、などで自身が書かれたHTMLをチェックされたこともないようです。


根本からきちんと手順を踏んで学びなおしましょう。
<h1><p style="background-color:#ffa500;"><h1>◯◯◯◯◯</p></h1>
は入れ子になっていません。完全なエーですから、ブラウザは、仕様書に従ってなんとか・・
<h1>
</h1>　★ブロック要素pが現れたので</h1>が漏れていると判断
<p style="background-color:#ffa500;">
</p>　★ブロック要素h1が現れたので</p>が省略されていると判断
<h1>
　　◯◯◯◯◯
</h1>　★ブロック要素pが現れたので</h1>が漏れていると判断
<p>　★</p>が現れたのであるべき<p>を補完
</p>
<h1>　★</h1>が現れたのであるべき<h1>を補完
</h1>
と解釈するでしょう。これ以外解釈のしようがないのです。なぜなら

以下仕様書から・・
H1,H2,H3,H4,H5,H6 <!ELEMENT (%heading;) - - (%inline;)* -- heading -->
!ELEMENT　要素
(%heading;)　h1,h2,h3,h4,h5,h6
- - 開始タグ省略不可　終了タグ省略不可
(%inline;)*　行内要素が０個以上(*)
heading 意味は見出し(heading)
( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

P　　<!ELEMENT P - O (%inline;)* -- paragraph -->
ELEMENT
P
- O 開始タグ省略不可　終了タグ省略可
(%inline;)*　行内要素が０個以上(*)
-- paragraph --　段落(paragrph)を示す
( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )

『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
　は伊達じゃありません。上記の解析結果に、あなたの書かれたスタイルシートは適用できませんよね。

＞標題<h1>に、網掛けはできますか？
　この意味が分かりません。
　網掛けとはXXXXXXXXのような透明背景の模様を上に乗せることを言います。
　あなたの書かれたものから類推すると、単に背景色を変えているようにはかみえません。

＞<p style="background-color:#ffa500;">
　style属性の記述は、詳細度[1,0,0,0]になることは御存知ですよね。
　⇒（HTMLでは、要素の"style"属性値は、スタイルシート規則である。これらの規則はセレクタを持たないので、a=1、b=0、c=0、かつd=0。）( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　詳細度が最も高いため、他所で指定しても上書きできません。!importantをつければ、適用されます。
h1{color:red!important;}
<h1 style="color:blue">見出し</h1>
　この場合は赤くなる。

アドバイス
1)HTMLをデザインを一切無視して文書構造だけ書けるようになりましょう。これは簡単です。
2)HTMLは簡単なHTML4.01strictを推奨します。(transitinalやflamesetは無用!!)
　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
3)必ず文法チェックをしましょう。
　　Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
4)最後にスタイルシートを文書構造に基づいて書きましょう。

[サンプル]本文中のh2要素内の文字だけに網掛けをする。
使用する画像は、添付されているようなものを透明GIFで作成してみて、HTMLと同じ場所においてください。
★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">
<!--
div.section h2{
line-height:2em;
background-color:yellow;
padding:0 1em;
}
div.section h2 span{
position:relative;padding:4px;
}
div.section h2 span:after{
display:block;
position:absolute;
top:0;left:0;
content:"";
width:100%;
height:100%;
background:url(area_fill.gif);
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>本文の<span>見出し</span>だよ!!</h2>
＿＿<p>・・・</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>
「標題<h1>に、網掛けはできますか？」の回答画像1
    • good
    • 0
    • 件
通報する
この回答へのお礼

難しい表現もありますが、とにかく助かりました。
私の示したコード例は記入ミスでした。
とにかくも、
とても参考になりました。

とても詳しいご回答を、どうもありがとうございました。

通報する
お礼日時：2013/12/02 14:20

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報