なぜ文字がでかくなってしまうのでしょうか？

2023/10/24 07:17

このQ&Aのポイント

H1 { color:red; } の宣言で文字が大きくなる理由を教えてください。
http://masaboo.cside.com/new_css1/cs_11.htmを見てるのですが、サンプルの意味がよくわからないです。
フォントサイズに関する記述がないのに、赤文字が大きくなる理由を教えてください。

ベストアンサー

なぜ文字がでかくなってしまうのでしょうか？

2012/09/07 20:48

http://masaboo.cside.com/new_css1/cs_11.htmを見てるのですが ************************************** <HTML> <HEAD> <TITLE>サンプル</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <H1>レベル1の見出しは赤色です。</H1> <P>段落は、緑色です。</P> </BODY> </HTML> ************************************** のサンプルの意味がよくわからないのですが、なぜ、 H1 { color:red; } を宣言するだけで、文字がでかくなってしまうのでしょうか？フォントサイズに関する記述がないのに、赤文字が大きくなる理由を教えてください。

CVMNDLS
お礼率100% (13/13)

HTML
回答数6
ありがとう数6

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

質問者が選んだベストアンサー

ベストアンサー

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

2012/09/10 18:56 回答No.6

No.3です。少しだけ補足しておきます。 CSS2から採用された全称セレクタ(詳細度0)で、すべての要素のスタイル指定をリセットできますが、　仕様書に『しかし一般的に言って、著者はHTML要素の慣習的解釈を上書きするようなことはしないよう求められる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )』　とあるように、リセットは最低限必要なもののみにとどめるべきです。リセットしてしまうと、すべての要素に対してスタイルシートで再設定しなければならなくなり、スタイルシートが肥大化してしまいます。　*{margin:0;padding:0;}なんてのは、オーサリングツールで使われ始めた手法でしょう。　私は html,body{margin:0;padding:0;} だけしか行いません。その場その場で必要に応じて設定しましょう。

質問者

お礼 2012/10/17 00:35

ありがとうございました。

その他の回答 (5)

SakuraiMisato
ベストアンサー率17% (42/235)

2012/09/10 01:56 回答No.5

http://blog.livedoor.jp/seo666/archives/50183799.html http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1391937413 http://www.seotemplate.biz/free-seo/2048/ http://okwave.jp/qa/q5608027.html 是等のURLへも、注目をなさってみて下さいませ。

質問者

お礼 2012/10/17 00:35

ありがとうございました。

tkmojo
ベストアンサー率50% (105/207)

2012/09/08 18:02 回答No.4

赤文字だから大きいのではなく、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○が大きくなるのを防ぐことが出来ます。

質問者

お礼 2012/10/17 00:35

ありがとうございました。

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

2012/09/08 10:01 回答No.3

　スタイルシートのプロパティを説明しているサイトのようですが、スタイルシートを学ぶときは、それ以前に学ぶべきことがあります。ということは、より重要なことと言う意味です。　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 )］より　　

質問者

お礼 2012/10/17 00:35

ありがとうございました。

jjon-com
ベストアンサー率61% (1599/2592)

2012/09/07 21:02 回答No.2

H1タグ（Header1，見出しレベル1）に対しては多くのWebブラウザが既定でそのような表示をおこなうから。次のHTMLファイルをWebブラウザで表示してみてください。 ************************************** <HTML> <HEAD> <TITLE>サンプル</TITLE> </HEAD> <BODY> <H1>レベル1の見出しは赤色です。</H1> <P>段落は、緑色です。</P> </BODY> </HTML> **************************************

質問者

お礼 2012/10/17 00:35

ありがとうございました。

めとろいと（@naktak）
ベストアンサー率36% (785/2139)

2012/09/07 20:59 回答No.1

<h1>要素のデフォルト動作です。太字になるのもです。 font-size:16px; font-weight:normal; とかすると普通と同じになります。

質問者

お礼 2012/10/17 00:35

ありがとうございました。

関連するQ&A

cssを使って文字を装飾しても改行させたくない場合
cssを使って文字を装飾しても改行させたくない場合、どのような方法がありますか？ <html> <head> <title>test</title> <style type="text/css"> p.red { color: red; } </style> </head> <body> 黒<p class="red">赤</p>黒 </body> </html> これだと黒赤黒になってしまいますが黒赤黒にしたい場合どうすればよいでしょうか？よろしくお願いします。
- ベストアンサー
- HTML
ＣＳＳが反映されません
勉強不足は承知ですが、もうどうにもお手上げ状態です。質問させてください。ＣＳＳを勉強しているのですが、反映されません（本や、サイトのサンプルとおり記述しても、です）（タグ、スペルの間違いがないかは１０回以上確かめています）（ＣＳＳサイトのサンプルをクリックすると、それは表示されます） ●ヘッダー内に指定すると、反映されない ○例　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css">  </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ブラウザには標準フォント（色、サイズ）で ”「絵本」の色は赤色です” と表示される文字色は font-color:red font-color:#rbg番号などしてみても、黒のまま文字サイズも３０ｐｘ、５０ｐｘ、１００ｐｘとしてみているが、結果は同じ文字サイズ（標準）になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css">  </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ブラウザになにも表示されない ●ＢＯＤＹ内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ブラウザに何も表示されませんでした ○２回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・フォントサイズそれなりの大きさに。文字色は赤で表示されました ○３回目全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。こんなところで足止めされているのが悲しいです・・・
- ベストアンサー
- その他（インターネット・Webサービス）
html で文字の色が出てこない。
はじめてhtmlを勉強していて、わからないことがありました。文字の色、背景色などを指定しているのですが、実際にIEで見ても、色が出てきません。下記が内容です。どこが間違ってるのでしょうか？ --の所は、- -です。タブは実際はコードにはあります。 <html> <head> <title>背景色とは</title> <style type="text/css">  </style> </head> <body> <h1>ようこそ</H1> <hr> <p><span>私の</span>ホームページへ<br> このページでは<br> 私の好きな作家の作品について</br> 感想をつづっています。 </p> <a href="http://www.yahoo.co.jp">ヤフージャパン</a> </body> </html>
- ベストアンサー
- その他（ビジネス・キャリア）
スタイルシートで文字色を指定した時、改行させたくな
スタイルシートで文字色を指定した時、改行させたくないです。 <html> <head> <title>test</title> <style type="text/css"> p.red { color: red; } </style> </head> <body> a<p class="red">bcd</p> </body> </html> これをすると a bcd になってしまいます。実際は、 abcd にしたいです。 pタグは改行もされてしまうとのことですが、色を付けつつ改行しない方法はありますか？そもそもフォントに色を付けるだけで改行する機能も付いちゃうのが不思議です。
- ベストアンサー
- HTML
HTMLのブラウザでの表示
メモ帳でHTMLを書き、ブラウザで表示したとき、文字が表示できるとき（XX．html）とできないとき（XX01．html）があります。比較した添付ファイルがありますが、どこに問題があるのでしょうか。教えてください。プログラムは下記のようになっています。 <HTML> <HEAD> <TITLE>STAY</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <CENTER> <H1>STAY</H1> <H2>-〇◎の紹介ページ-<?/H2> <HR> ようこそ、〇◎へ </CENTER> </BODY> </HTML>
- ベストアンサー
- その他(ソフトウェア)
DreamWeaverMXでスタイルシートを使わない方法
DreamWeaverMXを使用しています。文字に色をつけたり大きさを変えたりするときに、自動的にスタイルシートでタグが入力されてしまいます。例えば赤文字にしたときに <font color="red">赤い文字</font> こうしたいのに <head> <style type="text/css">  </style> </head> <body> <span class="style1">赤い文字</span> </body> こういうタグが入ってしまいます。これをHTMLだけのタグがはいるようにしたいのですが、そういう設定方法はないでしょうか？ご存知の方がいましたらよろしくお願いします。
- ベストアンサー
- グラフィックソフト
文字の色をスタイルシートで設定した時、ハイパーリンクの文字の色を変えたいのですが
スタイルシートの定義で質問です。文字の色をスタイルシートで設定したとき、ハイパーリンクの文字の色を変えたいのですがやり方が分かりません。よろしくお願いします。 htmlは次の様に書いてます。これだと、ハイパーリンク文字にマウスをおいても白文字のままです。この時、赤色にかえたいのですが。 <head> <style type="text/css"> .style1 { color: #FFFFFF; font-size: small; } a:hover { color: red; text-decoration: none; } </style> </head> <body> <a href="xxxx.htm"> <span class="style1">ハイパーリンク文字</span></a> ・・ </body>
- 締切済み
- HTML
HTML CSS で文字を点滅させたい
HTMLにCSSを含める学習中です。以下のようにHTMLを書き、edgeで表示してみましたが点滅してくれません。どこが違うのか教えてもらえませんでしょうか。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html;charset=SHIFT_JIS"> <TITLE>テスト　ホームページ</TITLE> <style type="text/css"> p { color: orange; font-size: 20px; animation: blinkEffect 1s ease infinite; } </style> </HEAD> <BODY> □□□□□□□□□□□　<BR> <p class="p">この部分の文字を点滅</p> ■■■■■■■■■■■　<BR> <BR> <p>これは例文です。</p> <BR> </BODY> </HTML>
- ベストアンサー
- ブラウザ
特定の画像リンクだけhover時の文字色を変更
特定の画像リンクにだけスタイルを適用したいと思っています。特定の画像リンクにクラス名“diet”と付けて、そのリンクにだけ hover 時の文字の色を赤色にしようと考えています。その場合の記述の仕方を教えてください。次のように記述しているのですが、うまくいきません。 HTMLに直接書き込む方法にしています。 <head> <style type=”text/css”> <!- a.diet :hover {color: red;} -> </style> </head> <body> <a href="アドレス"><img src=画像のアドレス></a> </body> （必要なところだけ抜粋しています）どこが間違っているのでしょうか？何度やってもうまくいません。クラスの書き方がよくないのでしょうか？できれば、HTMLに直接書き込む場合と、CSSを利用する場合の、２つの書き方を教えてください。どうぞよろしくお願いします。
- ベストアンサー
- HTML
背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。画像のように色をつけたいのですが、うまくいきません。上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS