Q&A
一括してフォントサイズを20pxにしようとdivタグで囲み以下のコードを書きましたが、h1要素が40pxになりました。
一括して指定する方法があれば教えて頂きたいです。
よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 9 <link rel="stylesheet" href="../css/style.css" /> 10 </head> 11 <body> 12 <div> 13 <h1>タイトルタイトル</h1> 14 <p>テキストテキスト</p> 15 </div> 16 </body> 17</html>
css
1html { 2 font-size: 62.5%; 3} 4 5div{ 6 font-size: 2rem; 7}
回答2件
0
ベストアンサー
各サイズの定義を簡単にいうと、
- px サイズを絶対値指定する
- % サイズを相対値値指定する(親要素基準)
- em サイズを相対値値指定する(親要素基準)
- rem サイズを相対値値指定する(ルート要素基準)となります。
主なブラウザのデフォルトのfont-sizeは
- html要素 16px
- h1要素 2em
となってます。
まずは、これが基本知識。つまはこれを理解して、そのうえで、
css
1html { 2 font-size: 62.5%; 3}
これでやっていることは、html要素のデフォルトの16pxの62.5%、つまり10pxに設定しているということです。
css
1div{ 2 font-size: 2rem; 3}
remはルート要素(=html要素)基準なので、10pxの2倍の20pxに設定しています。
その子要素のh1は、デフォルトが 2em なので親要素の2倍、つまり40pxとなります。
もし、h1要素も2em(20px)にしたいのなら、
css
1div, h1 { 2 font-size: 2rem; 3}
div要素の子要素すべてをブラウザのデフォルトを無視して2emに設定したいなら、
css
1div, div * { 2 font-size: 2rem; 3}
ブラウザの設定で基準のフォントサイズを変更できたりするので、また、複雑になりますが、その辺ははしょってます。興味があればご自身で調べてみてください。
投稿2022/01/03 03:26
総合スコア33795
0
一括してフォントサイズを20pxにしようと
どこにも20pxという指定はありません。
各単位の効果の確認を：ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い
投稿2022/01/03 00:14
総合スコア80861
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/03 10:37