- ベストアンサー
CSSのh1,h2,h3で色付けをしたい
- CSSを使用して、h1,h2,h3などのタイトルに色を付ける方法を知りたいです。
- また、文章の途中で色付けをすることは可能ですか？
- 提供されたCSSを使用して、色付けを実装しています。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞h1,h2,h3などで、色付けをしたいのと、途中で文章に色付けをすること HTMLの文書構造に従って、その見出しを選択してスタイルを指定します。(下記サンプル参照) よく間違われるのですが、デザインのためにclass名やidを指定するのではありません。 『id属性及び class属性と併用することで、文書に構造を付加』し、その文書構造に基づいてスタイルを指定するのです。 例えば、 div.section div.section h3{color:red;} 本文(section)中の本文(section)なかのh2要素と言う意味です。 この選択手段をセレクタといいCSSで最も重要な部分です。それがあるから 【重要】構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )ができるのです。 せっかく「」のためにプレゼンテーションはスタイルシートで行うのですから、そんな酷いHTML書いたらダメです。 下記サンプル・・・HTMLはどこに何が書いてあるか誰(検索エンジン)でもわかる。 ★HTML5を目前にしていますからサンプルはHTML4.01strictです。XHTML面倒なので ★タブは＿に置換してあるので戻す。 ★スタイルは<head></head>内に書いてます。 ・・・最初はこっちのほうが楽です。 まずセレクタやそれを使ったカスケーディングの書き方を覚えましょう。 まっとうな参考書なら最初に書かれているはず。だってカスケーディングはCSS(カスケーディングスタイルシート)の根幹を成すもっと重要なことです。 <!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;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} div.header div.nav ul{list-style:none;text-align:center;font-size:0;line-height:30px;} div.header div.nav ul li{display:inline-block;font-size:16px;width:8em;position:relative;} div.header div.nav ul li a{ display:block;width:100%;height:100%; border:outset 3px silver;background-color:yellow; text-decoration:none; } div.header div.nav ul li a[href="EFG.html"]{background-color:red;} div.section{position:relative;min-height:300px;} div.section div.section{width:auto;min-height:0;min-width:0;} div.section div.section,div.section h2,div.section p{margin:0 180px;} div.section div.section div.section, div.section div p{margin:0;} div.section div.aside,div.section div.nav{position:absolute;top:0;width:170px;height:100%;} div.section div.aside{left:0;} div.section div.nav{right:0;} /* 特定の見出しに色をつける。 */ div.header h1 a{color:red;} div.section h3{background-color:yellow;color:green;} div.section div.aside h3{color:blue;} body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:silver;} div.section div.section{background-color:white;} div.footer{background-color:yellow;} div.section div.nav{background-color:fuchsia;} div.section div.aside{background-color:lime;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><a href="index.html">○○○○</a></h1> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="index.html">ホーム</a></li> ＿＿＿＿<li><a href="shaken.html">○○</a></li> ＿＿＿＿<li><a href="bankin.html">○○○○</a></li> ＿＿＿＿<li><a href="mentenansu.html">○○○○○○</a></li> ＿＿＿＿<li><a href="syoukai.html">○○○○</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>（有）○○○○○ TEL;○○○-○○-○○○○○○</h2> ＿＿<p>FAX;○○○-○○○-○○○○</p> ＿＿<p>○○○○のホームページサイトにご訪問くださり誠に有難うございます。</p> ＿＿<p></p><p></p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>○○○○</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="index.html">○○○</a></li> ＿＿＿＿<li><a href="tosoukouba.html">○○○</a></li> ＿＿＿＿<li><a href="syuurikouba.html">○○○</a></li> ＿＿＿＿<li><a href="ABC.html">ABC</a></li> ＿＿＿＿<li><a href="EFG.html">EFG</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>ピックアップ</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="NOP.html">NOP</a></li> ＿＿＿＿<li><a href="QRS.html">QRS</a></li> ＿＿＿＿<li><a href="TUV.html">TUV</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿＿<address>Copyright (c) ○○○○ All Rights Reserved.</address> ＿</div> </body> </html>
その他の回答 (2)
- outbrave
- ベストアンサー率60% (231/380)
>sample.cssがどこかに消えてしまいました。 そのCSSファイルの中に色を指定している部分があるはずなので、なくなってしまったら作り直すしかないでしょう。 どこかにバックアップとか取っていないのでしょうか。
- outbrave
- ベストアンサー率60% (231/380)
>使用しているCSSは以下です。 CSSは使用されていないようですが。 >h1,h2,h3などで、色付けをしたい 色付けは文字色ですか、背景色や罫線などもありますが。 h1 { color: #RGB; } h2 { color: #RGB; bakcground-color: #RGB; } h3 { color: #RGB; bakcground-color: #RGB; border: solid 1px #RGB; } >途中で文章に色付けをする 文章の途中ということでしたら HTML あいう<span class="CLASS名">えおか</span>きこけ CSS .CLASS名 { color: #RGB; }
補足
間違えました。public_htmlの中にsample.cssがどこかに消えてしまいました。以下が見本のものです。上の質問は index_nocssとなっていました。以下の見本を見ながら作成していましたが、色が付きません。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" type="text/css" href="sample.css" /> <meta name="generator" content="●●●"> <meta neme="robots" content="index"> <meta name="description" content="○○○"> <meta name="keywords" content="○○○○,○○"> <title>○○○○</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"><h1><a href="index.html">○○○○</a></h1></div> <!-- メインメニュー --> <ul id="menu"> <li id="menu01"><a href="index.html">ホーム</a></li> <li id="menu02"><a href="shaken.html">○○</a></li> <li id="menu03"><a href="bankin.html">○○○○</a></li> <li id="menu04"><a href="mentenansu.html">○○○○○○</a></li> <li id="menu05"><a href="syoukai.html">○○○○</a></li> </ul> <!-- サブメニュー（左カラム） --> <div id="submenu"> <div id="submenu_header">○○○○</div> <ul id="submenu_body"> <li><a href="index.html">○○○</a></li> <li><a href="tosoukouba.html">○○○</a></li> <li><a href="syuurikouba.html">○○○</a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> </ul> </div> <!-- コンテンツ（中央と右の2カラム） --> <div id="content"> <!-- ニュース（中央カラム） --> <div id="news"> <h2>（有）○○○○○ TEL;○○○-○○-○○○○○○<br> FAX;○○○-○○○-○○○○</h2> ○○○○のホームページサイトにご訪問くださり誠に有難うございます。<br><br> <h3>○○○○○</h3> <p></p><p></p> <p><br> <br> <br> <p></p> <hr /> </div> <!-- ピックアップ（右カラム） --> <div id="pickup"> <h2>ピックアップ</h2> <ul> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> <li><a href="xxx.html"></a></li> </ul> </div> </div> <!-- フッタ --> <div id="footer"><address>Copyright (c) ○○○○ All Rights Reserved.</address></div> </div> </body> </html>