- ベストアンサー
なぜ文字がでかくなってしまうのでしょうか？
- H1 { color:red; } の宣言で文字が大きくなる理由を教えてください。
- http://masaboo.cside.com/new_css1/cs_11.htmを見てるのですが、サンプルの意味がよくわからないです。
- フォントサイズに関する記述がないのに、赤文字が大きくなる理由を教えてください。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- SakuraiMisato
- ベストアンサー率17% (42/235)
- tkmojo
- ベストアンサー率50% (105/207)
赤文字だから大きいのではなく、h1だから大きいのです。 ほぼすべてのブラウザが、h○の見出しタグは、無指定の場合大きく表示するように作られています。 「何も指定をしていない時には、ブラウザの基準に従う」というわけです。 隙間に関しても、h○やpタグなどは勝手に行間を開けるのが普通のブラウザの挙動ですので、 そういうのが嫌なら、cssで一度指定をリセットするしかないですね。 リセット方法は人によって好みがありますが、 簡単な例だと、こういう感じですかね。 （*は全てのタグに対する指定です。） *{ margin:0; padding:0; font-weight: normal; font-style: normal; } h1,h2,h3,h4,h5,h6{ font-size:100%; } これで、勝手に隙間が空いたり h○が大きくなるのを防ぐことが出来ます。
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートのプロパティを説明しているサイトのようですが、スタイルシートを学ぶときは、それ以前に学ぶべきことがあります。ということは、より重要なことと言う意味です。 HTMLで、一般的に使用されているスタイルシートはカスケーディングスタイルシートＣＳＳと呼ばれるものですが、それが使われるのはカスケーディングと言う仕組みがあるからなのです。 カスケーディングとは、直訳すると「流れ落ちる--次々に影響を及ぼす」というような意味なのですが、スタイルの指定がその出所や指定方法によって指定されていく仕組みを示しています。 ブラウザでどのように見栄えを指定するかは。 1)ブラウザ自身が持つスタイルシート →HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html ) 2)HTMLの要素の属性による指定 <body text="green"> 3)<head></head>内のスタイル要素によって指定 <style type="text/css">body{color:red;} 4)外部スタイルシートによる指定 <link rel=*** 5) HTML要素のstyle属性による指定 <h1 style="color:blue"> そして、 最重要宣言 color:yellow!important ブラウザは、まず最重要宣言でソートします。 [ユーザー指定の最重要宣言]＞著者の最重要宣言＞著者指定のスタイル＞ユーザーのスタイル＞ブラウザの持つスタイル ※ユーザーのスタイルはブラウザで指定するもの ついで、詳細度ですべての宣言を比較します。 HTMLの属性で指定したものtext="red"は詳細度0です。 最後に、同じ詳細度だったら、あとから登場したもので上書きします。 詳しくは →6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade ) ★もし、カスケーディングの仕組みを説明していないサイトでしたら、見なくて良いです。CSSのもっとも重要な根幹に関わる部分です。 これを理解していないと、スタイルシートは使いこなせません。 この場合、なぜ、h1の文字が大きくなるかは、一般的には h1に対して h1{ font-size:2em; font-weight:bolder; margin:.67em 0; unicode-bidi: embed; } が一般的なブラウザの指定だからです。 すなわち、これに対して h1{ font-size:1em; font-weight:normal; margin:0; } と指定するとpと同じになるはずです。 unicode-bidi: embed;はpも同じだから書かなくて良い。 ★そして何よりも大事なこと HTMLは文書構造をマークアップするものです。 <h1>は見出し(レベル１)を示しますし<p>は段落(paragraph)を示します。h1は文字を大きくするためではありませんし、brは段落が変わったことを示すものではありません。brは段落中での強制改行で通常は登場しないはずです。 スタイルシートを期待通り適用させるためには、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より
お礼
ありがとうございました。
- jjon-com
- ベストアンサー率61% (1599/2592)
H1タグ（Header1，見出しレベル1）に対しては 多くのWebブラウザが既定でそのような表示をおこなうから。 次のHTMLファイルをWebブラウザで表示してみてください。 ************************************** <HTML> <HEAD> <TITLE>サンプル</TITLE> </HEAD> <BODY> <H1>レベル1の見出しは赤色です。</H1> <P>段落は、緑色です。</P> </BODY> </HTML> **************************************
お礼
ありがとうございました。
- めとろいと（@naktak）
- ベストアンサー率36% (785/2139)
<h1>要素のデフォルト動作です。太字になるのもです。 font-size:16px; font-weight:normal; とかすると普通と同じになります。
お礼
ありがとうございました。
お礼
ありがとうございました。