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

CSSのh1,h2,h3で色付けをしたい

解決済

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

CSSを使用しての質問です。h1,h2,h3などで、色付けをしたいのと、途中で文章に色付けをすることはできますか？使用しているCSSは以下です。宜しくお願い致します。
<?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.dt …
<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" />
<title>CSS learning（スタイルシートを適用しない場合の表示）</title>
</head>
<body>
<div id="pagebody">

<!-- ヘッダ -->
<div id="header"><h1><a href="index.html">CSS learning</a></h1></div>

<!-- メインメニュー -->
<ul id="menu">
<li id="menu01"><a href="xxx.html">Home</a></li>
<li id="menu02"><a href="xxx.html">Overview</a></li>
<li id="menu03"><a href="xxx.html">Property</a></li>
<li id="menu04"><a href="xxx.html">Tips</a></li>
<li id="menu05"><a href="xxx.html">Contact</a></li>
</ul>

<!-- サブメニュー（左カラム） -->
<div id="submenu">
<div id="submenu_header">目的で探す</div>
<ul id="submenu_body">
<li><a href="xxx.html">CSSの適用</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">テキスト（IE独自）</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>ニュース</h2>
<h3>かえるさんのサイトがオープン！！</h3>
<p>
けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。
けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。
けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。
けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。
けろけろ、けろけろ、けろけーろ。けろけろ、けろけろ、けろけーろ。・・と、それはもう大変な喜びようだとか。
</p>
<p><img src="images/ss01.gif" alt="かえるサイトの画面" width="200" height="155" /></p>
<hr />
</div>
<!-- ピックアップ（右カラム） -->
<div id="pickup">
<h2>ピックアップ</h2>
<ul>
<li><a href="xxx.html">CSSのメリット</a></li>
<li><a href="xxx.html">Web標準とは</a></li>
<li><a href="xxx.html">CSSのバージョン</a></li>
<li><a href="xxx.html">HTML/XHTMLの基礎</a></li>
<li><a href="xxx.html">CSSの書き方</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">CSSでの長さの指定</a></li>
<li><a href="xxx.html">ボックス</a></li>
<li><a href="xxx.html">DOCTYPE宣言</a></li>
</ul>
</div>
</div>

<!-- フッタ -->
<div id="footer"><address>Copyright (c) HTMQ All Rights Reserved.</address></div>

</div>
</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

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

＞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-html4 … )ができるのです。
　せっかく「」のためにプレゼンテーションはスタイルシートで行うのですから、そんな酷い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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： outbrave
  • 回答日時：

>sample.cssがどこかに消えてしまいました。



そのCSSファイルの中に色を指定している部分があるはずなので、なくなってしまったら作り直すしかないでしょう。
どこかにバックアップとか取っていないのでしょうか。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： outbrave
  • 回答日時：

>使用している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.dt …
<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>

補足日時：2014/03/12 15:48
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報