- 締切済み
CSSでフォントの色で困っています
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)
- yambejp
- ベストアンサー率51% (3827/7415)
大まかにこんな感じなのでしょうけど、そのほかにごちゃごちゃ設定してます？ <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なんて一つしかないんでしょうから、あえてクラスで処理しなくても 良い気がしますが
お礼
ご回答ありがとうございます。 体調をくずしてしまいお礼が大変遅くなりすみません。 スタイル設定の記述はそんな感じです。 h1はクラスじゃなくて、というのはもっともですね。 基本が身についていないためおかしな記述になっているんでしょうね。 もっと勉強します。
- Tacosan
- ベストアンサー率23% (3656/15482)
まず, そもそもこの「ソース」は間違っています. H1要素の中に P要素を入れることはできません. また, スタイルシートで正確にどう指定したのかがわかりません. 従って, この文章では「どうして期待通りにならないのか」は判断できません. たとえば ・スタイルシートの記述があなたの期待する結果をもたらすものではない ・スタイルシートの記述は正しいが HTMLソースがおかしいためユーザエージェントが混乱してこうなった などの理由が考えられます (もちろんほかにもあるかもしれません).
お礼
ご回答ありがとうございます。 体調をくずしてしまいお礼が大変遅くなりすみません。 基本ができていないため、わかっているひとからすると めちゃくちゃなことを言っているようにおもうのかもしれませんね。 ＞H1要素の中に P要素を入れることはできません そうでしたか。勉強になりました。
関連するQ&A
- CSS） emでのサイズ指定
CSS初心者です。 何のサイズをem単位で指定できるのか調べたくて、適当に h1,h2,h3,h4,p { font-size: 2em; margin: 1em; padding: 1em; margin-border: 1px; border-color: #000000; ligh-height: 1em; border-width: 1px; } としました。 すると、すべてのフォントサイズが同じになりました。 それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか？ また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか？
- ベストアンサー
- CSS
- CSSのフォントのタグについて教えてください。
前回はｈ１タグについて、みなさまにご親切にご指導いただき、理解する事ができました。ありがとうございました。今回はフォントの色について苦戦しています。自分でもネット等で調べてはいるのですが、どうしも判らない部分がありますので教えてください。 <body> <p>あああああ<em>いいい</em>ああああああ あああ<?>ううう</?>ああああああ ああああ<?>えええ</?>ああああ</p> </body> 例えば<em>いいい</em>を赤で指定しました。 <?>ううう</?>をグリーン <?>えええ</?>を青 と別の色で指定したいのですがた、<?>の指定するタグがわかりません。 宜しくお願いします。
- 締切済み
- ホームページ作成ソフト
- ＣＳＳで、わからないところがあります
ＣＳＳを独学で勉強していますがあるところでソースをもらったのですがこういうのがありました。 ＣＳＳのはフォルダを作っています。 default.css import.css style.css の3つです。 内容は下に書いています。 default.cssには @charset "UTF-8"; body { margin: 0; padding: 0; background-color:#FFFFFF; text-align:left; } import.cssには @charset "UTF-8"; /* CSS Document */ @import "default.css"; @import "style.css"; style.css これは他のＣＳＳと同じように沢山書いています。 @charset "UTF-8"; /* CSS Document */ * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } 以下続く 質問1 なぜ3つも必要のなのでしょうか？style.css1つにまとめてもいいのではないでしょうか？ 質問2 style.cssの * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } これはアスタリスク*に対して指定しているのでしょうか？ 質問3 ＨＴＭＬ側にはShift_JISとなっていますが、ＣＳＳは@charset "UTF-8";となっており、これって間違いではないのでしょうか？ ネットで調べたら、文字化けの要因になると書いていました。 これはあっているのでしょうか？ ＨＴＭＬ側 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 質問4 <div id="header" style="background-image:url(img/header.jpg);"> <div id="a"> <div id="b"> <h1 id="a">猫の気持ち</h1> <div id="c"> <span class="blue big3 b">猫の気持ち</span> </div> というソースがありました。 <span class="blue big3 b">猫の気持ち</span> の中の、blue big3 bというの指定が見当たりません。 blue big3 b という各自の指定はＣＳＳでされています。 3つを合わせて指定することができるのでしょうか？ それともこれってタグですか？ <span class="">って、 色、サイズ、太さをこのように指定するとこのようになるのでしょうか？ 確かに色は青で太字でしたbig3は不明ですが・・・ 初心者並の質問ですみません。 よろしくお願いします。 ＣＳＳの簡単なサイトを見てもやはりよく分からないのです。
- ベストアンサー
- HTML
- フォントサイズをemで指定すると太字になってしまう。
CSSで たとえば、 font-size:1.2em; と指定し、ブラウザ（ＩＥ６）で表示させます。 ブラウザの文字サイズが「中」のときは 問題ないのですが、「最大」にすると その文字が太字になっているのですがどうしてですか？太字にしたくないのです。 また、0.9emにして、「最小」表示させると ごま粒みたいな文字になってほとんど判読不可能です。 「最小」から「最大」まで変えても、きちんと読める ＨＰにしたいと思っていますが、 いまはしょうがないのでfont-sizeは指定していません。 emがうまく使いこなせません。 こんなことで悩んでいるのは自分だけでしょうか。
- ベストアンサー
- HTML
- ｈタグについて 色・サイズを同時に指定したい
スタイルシートでフォントのサイズと色を同時に設定したい時は、 ｈタグを使うしかないのでしょうか？ <html> <head> <title>test</title> <STYLE TYPE="text/css"> <!-- h1 { font-size:50%;color:green; } --> </STYLE> </head> <body> <h1>test</h1> </body> </html> このような場合です。 ｈタグは見出しに使うべきで6つしか指定できないとのことですが 見出しでもない文字に色とサイズを設定したい上、６つ以上パターンがある場合、 どうすればいいでしょうか？
- ベストアンサー
- HTML
- CSSとタグの関係
おはようございます。宜しくお願い致します。 HTMLに外部スタイルシート（CSS）を組み込み、更にHTML内にタグでスタイルシートと同じ内容のものを書き込んだ場合、そのタグを消さないとCSSは反映されませんよね？ 例えば、CSSでフォントサイズを指定したとして（tdにidで指定するとします）、HTML内にフォントサイズのタグを書き込んだ場合、どちらを優先されますか？ 例：CSSで、 td#word {font-size: 10pt;} と指定します。それに併せて、HTML内に、 <td id="word" colspan="1"><font size="-1">表示したい文字</font></td> とした場合、指定するものに一番近い指定（<font size="-1">）を優先される…と覚えていたのですが。そして、この場合CSSは効かないと…。 しかし、両方効くはずと言われたことがあるのです。 それと、外部スタイルシートを「外してみているユーザーが居る」と言われた事が有ります。 勉強不足で申し訳有りません。外部スタイルシートの外し方って、どうやるのでしょう？ 宜しくお願い致します。
- ベストアンサー
- CSS
- CSSでフォントが適用されない
CSSでレイアウトを作成しました。 フォントはMS Pゴシックを指定しています。 CSSを外部にしましたらフォントがMS Pゴシックではなく、明朝っぽくなっています。他のCSSは適用されているのにフォントだけが適用されていません。 ※外部CSSにする前はMS Pゴシックになっています。 html ------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="style/style.css" rel="stylesheet" type="text/css" media="all"> <title>無題ドキュメント</title> ------------------------------------------------- 外部CSS ------------------------------------------------- @charset "utf-8"; html { height: 100%; } body { font-family:"ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Osaka"; padding: 0px; margin: 0px; font-size: 0.8em; } ------------------------------------------------- どこが間違っておりますでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- CSS・フォントサイズ変更は どこをいじれば？
ホームページビルダー17で、以下のサイトのテンプレートをダウンロードして編集中です。 http://nikukyu-punch.com/template/giin1_pink/index.html 本文部分の文字が小さいのでもう少し大きくしたいのです。 これまではテーブルタグで作っており、CSSは初心者です。 文字部分を右クリックしてスタイルの設定を見ると 本文や見出し部分などのfont-sizeが100％だったり75％だったりします。 たぶんCSSのfont設定が細かく分かれているのでしょうが… あまり細かく分類せず、右のサイドメニューと本文の文字の大きさを font-size : 14px line-height : 150% にしたいというのが希望です。 このようなスタイルの設定の変更はどうすればいいのでしょうか。 スタイルシートマネージャーから変更すればいいのでしょうか？ 一度スタイルを削除すると戻せないようなので、なかなか試行錯誤に踏み出せません。 画像などは変更できたのですが。 ご教授願えませんでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- IE7で印刷するとmargin-bottomが効かなくなります
こんにちは。お世話になります。 見出し1～6にマージンを設定しているのですが、IE7で印刷するとmargin-bottomが効かなくなり、見出しと文字の間が詰まってしまいます。 ----------------------------------------- <style type="text/css"> <!-- h1 { font-size:170%; color:#333; letter-spacing: 0.1em; line-height:120%; padding:3px 0 0 10px; margin:0 0 12px 0; } --> </style> <h1>見出し1</h1> <p>文字文字文字文字文字</p> ----------------------------------------- 念のため、<h1 style="margin-bottom:12px;">と直接スタイルシートを書き込んでみたり、スタイルシートをmargin-bottom:12px;としてみましたが、やはり駄目でした。 なおtop・left・rightは効いています。 何か良い方法がありましたら教えて下さい。 お願いします。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 体調をくずしてしまいお礼が大変遅くなりすみません。 丁寧に基礎学習をご説明いただきありがとうございます。 基本をしっかりつかまないと確かにちょっとしたことで 壁にぶつかってしまいますね。 コツコツと覚えていこうと思います。