目次一覧
状態:試行錯誤履歴
閲覧数:3,325
投稿日:2017-05-22
更新日:2019-11-10
「ルート要素フォントサイズ指定」5案 ／ ブラウザデフォルトの font-size は 16px
全体基準となるhtmlタグへのfont-size指定案
vw失敗する理由
font-size案
指定有無で異なる ／ その他
全体基準となるhtmlタグへのfont-size指定案
vw失敗する理由
font-size案
指定有無で異なる ／ その他
「ルート要素フォントサイズ指定」5案 ／ ブラウザデフォルトの font-size は 16px
「ルート要素フォントサイズ指定」5案
A.16px;
・ルート要素フォントサイズを「16px;」とする方式
B.100%;
・ルート要素フォントサイズを「100%;」とする方式
C.62.5%;
・ルート要素フォントサイズを「62.5%;」とする方式
D.calc(100vw / 32);
・ルート要素フォントサイズを「calc(100vw / 32);」とする方式
E.未指定
・ルート要素フォントサイズを指定しない方式
ブラウザデフォルトの font-size は 16px
100% = 1rem = 1em = 16px = 12pt
・100%=16px
・1em = 16px
・1rem = 16px
viewportの幅が1200px、高さが1000pxの場合
・100vwは1200px、100vhは1000px
・10vwは120px、10vhは100px
全体基準となるhtmlタグへのfont-size指定案
案A.16px;
絶対値による固定
・✕
案B.100%;
ルート要素フォントサイズを「100%;」とする方式
案C.62.5%;
ルート要素フォントサイズを「62.5%;」とする方式
・全体基準となるhtmlタグのfont-size指定を、62.5%へ設定
目的
・1em を 10px とするため
・「em」や「rem」を「切りの良い数値」で変換することで直感的に扱い易くする
62.5%=10px
100px=16px ✕ 62.5%
1em = 10px比較一覧表
| % | px | em |
|---|---|---|
| 100 | 16 | 1 |
| 62.5 | 10 | 1 |
/* フォントサイズ */
html {
font-size: 62.5%;
}
body {
font-size: 1.4em;
}
h1 {
font-size: 2.6rem;
}
h2 {
font-size: 2.1rem;
}
h3 {
font-size: 1.7rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}
案D.calc(100vw / 32);
ルート要素フォントサイズを「calc(100vw / 32);」とする方式
目的
・画面幅320pxのルート要素フォントサイズを10pxとするため
1remをビューポート幅の1/32に関連付ける
・幅が1remの要素は、常にビューポート幅の1/32になる
html {
font-size: calc(100vw / 32);
}その結果
・ルートのfont-sizeは画面幅に応じて変わる
・ルートより下はremを記述することでルート変更が適用される
html {
font-size: calc(100vw / 32);
}
p {
1.2rem;
}試してみたが、モバイル表示時の<h3>が意図せず小さくなる
・理由不明
・✕
・font-size
・font-sizeは%またはpxの何れで指定する方が良い？ 100%＝16pxは何に基づくのでしょうか？
vw失敗する理由
単純に、画面に対する比率で「文字の大きさ」を決定すると、何れかに違和感が生じる
・PCでは文字が大き過ぎる
・モバイルでは丁度良いかも
h1{
font-size: 6vw;
}
h2{
font-size: 5vw;
}
h3,h3 a{
font-size: 4vw;
}
h4{
font-size: 3vw;
}
h5{
font-size: 2vw;
}
h6{
font-size: 1vw;
}・PCでは若干文字が大き過ぎるかも
・モバイルでは文字が小さ過ぎる
h1{
font-size: 3.5vw;
}
h2{
font-size: 3vw;
}
h3,h3 a{
font-size: 2.5vw;
}
h4{
font-size: 2vw;
}
h5{
font-size: 1.5vw;
}
h6{
font-size: 1vw;
}font-size案
案1
迫力はあるが文字が大きいため、1表示エリアに対する情報量は少なくなる
h1{
font-size: 2.25rem;
}
h2{
font-size: 2rem;
}
h3{
font-size: 1.75rem;
}
h4{
font-size: 1.5rem;
}
h5{
font-size: 1.25rem;
}
h6{
font-size: 1rem;
}
案2
下記の方が無難かも
h1{
font-size: 2rem;
}
h2{
font-size: 1.8rem;
}
h3{
font-size: 1.6rem;
}
h4{
font-size: 1.4rem;
}
h5{
font-size: 1.2rem;
}
h6{
font-size: 1rem;
}案3
一般的な大きさかも
h1{
font-size: 1.5rem;
}
h2{
font-size: 1.4rem;
}
h3{
font-size: 1.3rem;
}
h4{
font-size: 1.2rem;
}
h5{
font-size: 1.1rem;
}
h6{
font-size: 1rem;
}結論
取り敢えず「案2」採用
・使用してみて厳しいようだったら「案3」へ変更
指定有無で異なる ／ その他
指定有無で異なる
前提
・rem使用
html {
font-size: 100%;
}指定
・固定
未指定
・ブラウザ大きさに応じて、フォントサイズが異なる
下記でもダメ
・要はルート要素にフォントサイズ指定していると、ブラウザ大きさに応じて、自動でフォントサイズは変更しない
html{
font-size: 0.9rem;
}・CSSでfont-weightを指定しても、font-weightを指定しないと書体が
CSSで、「html { font-size: 100%;}」指定している時と指定していない時の違い
下記を指定している時と、指定していない時で、挙動が異なるのですが、なぜですか？
html {
font-size: 100%;
}
------------------------------------------------------------
前提
・bodyタグには何も指定しない
・h1タグには下記を指定
h1 {
font-size: 1.5rem;
}
html {
font-size: 100%;
}
------------------------------------------------------------
前提
・bodyタグには何も指定しない
・h1タグには下記を指定
h1 {
font-size: 1.5rem;
}
その他
以前の指定例
何に基づきこの記述としたか思い出せないため、2019/11/10削除
html {
font-size: calc(10px + 1vmin);
}