締切済み

CSSでフォントの色で困っています

2011/12/07 16:50

CSSを覚えようと使い始めたばかりの初心者ですつまずいてしまったのでおしえていただければありがたいです。見出しにh1を指定して続けてテキストを書く ○ソースは <h1><p class="ttl">日記の書き方</p></h1> <p>まずは思いついたことを箇条書きにする</p> ○スタイルシートは・h1、pにはノーマル、フォントサイズ1emを指定・ttlにはフォントカラーで青、太字、サイズ110％を指定こうしたところ2文ともttlのスタイルシートが効いた状態になってしまいました。私の意図としては、1文目は青の太字でやや目立たせて 2文目は黒の普通の文字にしたかったのですが… どうすればよかったのでしょうか。それから、初心者向けのCSSの本をちょっと見たところでは理解できたのですが、実際やってみるとすぐにこのようにつまづいてしまいます。初心者がつまづきやすい事例を紹介・説明しているおすすめサイトなどありましたら教えてください。

hoihoi20ho
お礼率78% (25/32)

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

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

みんなの回答

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

2011/12/08 11:49 回答No.3

まず正しいHTMLを学んだほうが良いです。「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )」 <!ELEMENT (%heading;) - - (%inline;)* -- heading --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-H1 ) 　とは、inline要素しか見出し(<H1>～<h6>)内には持てないということです。いちいち仕様書を見るのはなんなので・・　HTMLを書いたら Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　でチェックしてみるのが良いです。一番早道　本題ですが、質問の文意から、この場合HTMLは <body> 　<div class="header"> 　　<h1>日記の書き方</h1> 　　<p>まずは思いついたことを箇条書きにする。</p> 　　<p>いきなり、結論から書き始めずにきちんと起承転結を考えて書くと良い。たとえば次のような箇条書きできたとしてます。</p> 　　<div class="sample"> 　　　<ol> 　　　　<li>朝起きたとき、寒く感じた</li> 　　　　<li>・・・</li> 　　　</ol> 　　</div> 　</div> などとなるはずです。　　また、transitinalは将来廃止される要素・属性を含んでいますので、srictで作成することをお勧めします。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4 適合条件: 必須事項と推奨事項/4.1定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より　近々、HTML5が登場しますが、これはHTML4.01strictの改訂版です。XHTMLは、XHTML2(HTML1.1は勧告ですがstrictしかない)以降、開発中止になりHTML5と統合されます。　スタイルシートですが、この場合見出しの色を変えたいのですから div.header h1{color:blue;font-size:1.1em;} /* 詳細度は[0,0,1,2]--12--になりますから、たとえそれより後で h1{color:red}/* 詳細度 [0,0,0,1] --1-- */ と指定しても、上書きはされません。　CSSとはカスケーディングスタイルシートの略で、カスケーディングが最大の特徴です。それぞれのプロパティより先に、カスケーディングの仕組みについてしっかり身につけてください。変なclass名やidをつける必要はなくなります。　目立たせたいのが段落の一行目でしたら div.header p{color:blue;font-size:1.1em;} div.header p+p{color:black;font-size:1em;} ★"カスケード"について - CSS Dencitie ( http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm ) [サンプル]HTML4.01strict、タブは＿に置換してあるので戻すこと。 <!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> <body> ＿<div class="header"> ＿＿<h1>日記の書き方</h1> ＿＿<p>まずは思いついたことを箇条書きにする。</p> ＿＿<p>いきなり、結論から書き始めずにきちんと起承転結を考えて書くと良い。たとえば次のような箇条書きができたとしてます。</p> ＿＿<div class="sample"> ＿＿＿<ol> ＿＿＿＿<li>朝起きたとき、寒く感じた</li> ＿＿＿＿<li>・・・</li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h1>見出し<h1> ＿</div> </body> </html>

質問者

お礼 2011/12/16 15:15

ご回答ありがとうございます。体調をくずしてしまいお礼が大変遅くなりすみません。丁寧に基礎学習をご説明いただきありがとうございます。基本をしっかりつかまないと確かにちょっとしたことで壁にぶつかってしまいますね。コツコツと覚えていこうと思います。

yambejp
ベストアンサー率51% (3827/7415)

2011/12/07 19:14 回答No.2

大まかにこんな感じなのでしょうけど、そのほかにごちゃごちゃ設定してます？ <style> h1,p {font-weight:normal;font-size:1em;} h1.ttl {color:blue;font-weight:bold;font-size:1.1em;} </style> <h1 class="ttl">日記の書き方</h1> <p>まずは思いついたことを箇条書きにする</p> まぁh1なんて一つしかないんでしょうから、あえてクラスで処理しなくても良い気がしますが

質問者

お礼 2011/12/16 15:17

ご回答ありがとうございます。体調をくずしてしまいお礼が大変遅くなりすみません。スタイル設定の記述はそんな感じです。 h1はクラスじゃなくて、というのはもっともですね。基本が身についていないためおかしな記述になっているんでしょうね。もっと勉強します。

Tacosan
ベストアンサー率23% (3656/15482)

2011/12/07 17:21 回答No.1

まず, そもそもこの「ソース」は間違っています. H1要素の中に P要素を入れることはできません. また, スタイルシートで正確にどう指定したのかがわかりません. 従って, この文章では「どうして期待通りにならないのか」は判断できません. たとえば・スタイルシートの記述があなたの期待する結果をもたらすものではない・スタイルシートの記述は正しいが HTMLソースがおかしいためユーザエージェントが混乱してこうなったなどの理由が考えられます (もちろんほかにもあるかもしれません).

質問者

お礼 2011/12/16 15:19

ご回答ありがとうございます。体調をくずしてしまいお礼が大変遅くなりすみません。基本ができていないため、わかっているひとからするとめちゃくちゃなことを言っているようにおもうのかもしれませんね。＞H1要素の中に P要素を入れることはできませんそうでしたか。勉強になりました。

CSSでフォントの色で困っています