以下のようなHTMLとCSSを記述したとします。
<p>タグに囲まれた「test」という文字に対して、Bodyタグから
font-size:10emと、PタグからFontChangeクラスを指定して、
font-size:0.1emを適用しています。
一見、優先順位の高いFontChangeクラスの0.1emが「test」に対して適用されそうに見えますが、
実際には両方のスタイルが適用され、中途半端なフォントサイズになります。
優先順位を無視してスタイルが2重適用されるのは何故でしょうか?
ご教授下さい。
宜しくお願いします。
<html>
<head>
<style type="text/css">
<!--
body {
font-size:10em;
}
.FontChange{
font-size:0.1em;
}
-->
</style>
</head>
<body>
<p class="FontChange" >test</p>
</body>
</html>
No.1ベストアンサー
- 回答日時:
こんにちは
font-sizeのemは親要素に対して比較されます
http://www.tohoho-web.com/css/basic.htm#Unit
http://www.hajimeteno.ne.jp/stylesheet/css1/p-fo …
ですのでbodyにfont-sizeを設定していなければデフォルトで1emなのでそのまま1/10の0.1emになります
今回は親となるbodyに10emを設定していますのでその1/10となるわけですので1emとなります
<style type="text/css">
<!--
body {
font-size:10em;
}
.fontbase{
font-size:0.1em;
}
.FontChange{
font-size:0.1em;
}
-->
</style>
</head>
<body>
<div class="fontbase">
<p class="FontChange" >test</p>
</div>
なので↑のようにしてやるとbodyは10em、その子要素となる<div class="fontbase">は1/10の1emに、孫要素となる<p class="FontChange">は親(<div class="fontbase">)が1emですのでその1/10の0.1emとなります(0.1emが表示できるブラウザによりますが)
No.2
- 回答日時:
CSSの仕様ではem指定は絶対値ではなく相対値であると決められています。
またfont-sizeの仕様には、相対値では親要素のフォントサイズを参照すると明記されています。継承される以上、親要素BODYで指定された相対サイズを継承したP要素は、その場で絶対値指定をしない限りは親要素の影響を受けます。
優先順位を無視しているのではなく、継承のルールに則り正しく処理しているに過ぎないわけです。
http://www.y-adagio.com/public/standards/tr_css2 …
http://www.y-adagio.com/public/standards/tr_css2 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
指定の文字だけ色を変える
-
リストの前後の行間をなくす方...
-
Excel VBA メール作成について ...
-
FireFoxで"display = none"を指...
-
fontサイズ指定の ”-(マイナ...
-
テキストファイルの行を指定し...
-
API Sleep関数について
-
HPで全てのフォントを小さくす...
-
特定の文字のみcssを適用するに...
-
リンク文字
-
CSSで14px/1.4の部分の記述は正...
-
IE6とFireFoxで表示が異なる。
-
テキストエリア内の文字の装飾
-
Format 関数 表示書式指定文字...
-
jquery.validationEngine.jsカ...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
入力規則のリストの文字の大き...
-
EXCEL VBA 印刷プレビューダイ...
-
cssファイルの名称付け
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSについて教えてください。 ...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
Format 関数 表示書式指定文字...
-
HTMLで特定の文字だけ色を変え...
-
全角半角含めて等幅で表示したい
-
特定の文字のみcssを適用するに...
-
ホームページビルダー作成HPがi...
-
テキストファイルの行を指定し...
-
リンク文字
-
アコーディオンメニューが思う...
-
テキストエリア内の文字の装飾
-
API Sleep関数について
-
Excel VBA メール作成について ...
-
上付き文字と下付き文字を同時...
-
background-color: #ddd;の意味...
-
<pre>のフォントサイズを指定す...
-
指定の文字だけ色を変える
-
CSSを一部無効にしたい
-
fontサイズ指定の ”-(マイナ...
おすすめ情報