p { margin-top: 0; margin-bottom: 0; } /* Footer */ footer { padding: 15px 0; background-color: rgba(255, 255, 255, 1); } footer p { font-size: 11px; text-align: center; } Copyright © 2022 Sample 上記 footer p 内の文字サイズ 11px にしてるのですが、 Chrome で見ると footer p が 16px になってます。 footer p も 11px になって欲しいのですが。わかる方、教えてください。

詳しい人求む！

P タグについての質問です

解決済

質問者：i-d-a-i
質問日時：2022/02/14 16:07
回答数：4件

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./layouts/statics/styles/style.css">
</head>

<style>
p {
margin-top: 0;
margin-bottom: 0;
}

/*
Footer
*/
footer {
padding: 15px 0;
background-color: rgba(255, 255, 255, 1);
}
footer p {
font-size: 11px;
text-align: center;
}
</style>

<body>
<footer>
<p>Copyright © 2022 Sample</p>
</footer>
</body>
</html>

上記 footer p 内の文字サイズ 11px にしてるのですが、
Chrome で見ると footer p が 16px になってます。
footer p も 11px になって欲しいのですが。

わかる方、教えてください。

div の高さは 24px になりました。
疑問です・

No.1の回答に寄せられた補足コメントです。補足日時：2022/02/14 16:53
通報する
ブラウザの表示は 100% です。

No.3の回答に寄せられた補足コメントです。補足日時：2022/02/14 17:14
通報する
windows chrome でしたが、macOS でも同じ現象になりました

補足日時：2022/02/14 17:20
通報する
画面をキャプチャしてみました。

補足日時：2022/02/14 17:21
通報する
勉強になりました。

No.4の回答に寄せられた補足コメントです。補足日時：2022/02/14 17:49
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： sukitaro
回答日時：2022/02/14 17:24

おそらく、フォントじたいは11pxなのだと思います。

line-height:1em;

を追記するのが良いと思います。

開発ツールの表示は、line-heightの高さなのだと思います。

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます。
試してみます。

通報する

お礼日時：2022/02/14 17:33

No.3

回答者： fujillin
回答日時：2022/02/14 16:59

No2です。

＞div の高さは 24px になりました。
＞疑問です・
フォントサイズをどのようにして確認なさっているのか不明ですけれど、画面の見た目で確認しているのでは？

単に、ブラウザの表示が150％表示になっているだけのような気がしますけれど・・・

- 1
- 件

通報する

この回答へのお礼

開発ツールの一番下にボックスのイメージが出ていますよね。
そのボックスイメージで数値を確認しています。

通報する

お礼日時：2022/02/14 17:12

No.2

回答者： fujillin
回答日時：2022/02/14 16:55

No1です

連投失礼。

ブラウザの開発ツール（F12で表示されます）で、該当するｐ要素を見てみれば、適用されているスタイルを確認することができます。
そこで、「16px」などになっているってことでしょうか？

「16px」になっている場合は、その指定元を見ればどこで指定されているのかを確認できると思いますけれど・・？

- 0
- 件

通報する

この回答へのお礼

連投ありがとうございます。

開発ツールで見ているのですが、p は
margin: 0;
font-size: 11px;
を指定していますが、
p は 16px のままです。

通報する

お礼日時：2022/02/14 17:02

参考程度に

No.1

回答者： fujillin
回答日時：2022/02/14 16:25

こんにちは

外部から読み込んでいる style.css の内容が不明ですけれど、ご提示のソースの範囲では11pxになっていると思いますけれど？
（Chromeで確認）

body部分に16pxのものを付け加えて、比べてみても同じに見えるってことでしょうか？
例えば、以下にしても同じ文字サイズでしょうか？

<body>
<div style="font-size:16px;text-align:center;">Copyright</div>
<footer>
<p>Copyright © 2022 Sample</p>
</footer>
</body>

同じサイズになる場合は、一旦 style.css を外してみるか、内容を再確認してみてください。