賢威ではあらかじめ文字サイズ(フォントサイズ)を調整するための、汎用のクラスを数多く用意しています。
「small」や「big」で調整する
特に細かな数値を意識せずにフォントサイズを変えたい場合は、以下のように「small」や「big」を使います。
文字を小さくするには「small」を使います。
文字を大きくする場合、「big」「big2」「big3」を利用できます。
1 2 |
<p>文字を小さくするには<span class="small">「small」</span>を使います。 文字を大きくする場合、<span class="big">「big」</span><span class="big2">「big2」</span><span class="big3">「big3」</span>を利用できます。</p> |
「em」で指定する
そのテキストの通常のサイズを「1」として計算する指定方法です。
かつてはこれが主流でしたので、今でも「em」で指定する人は多いです。
たとえば、賢威のメインのフォントサイズは16pxなので、「1.2em」を指定すれば1.2倍の「19.2px」になります。
※反対に「18px」を指定したい場合などは、「EmChart」などを参考にCSSで「1.125em」と指定する必要があります。
テキストを1.2倍にします。
1 |
<p class="f12em">テキストを1.2倍にします。</p> |
賢威のCSSであらかじめ用意している「em」のクラスは次のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.f08em{ font-size: 0.8em!important; } .f09em{ font-size: 0.9em!important; } .f10em{ font-size: 1.0em!important; } .f11em{ font-size: 1.1em!important; } .f12em{ font-size: 1.2em!important; } .f13em{ font-size: 1.3em!important; } .f14em{ font-size: 1.4em!important; } .f15em{ font-size: 1.5em!important; } .f16em{ font-size: 1.6em!important; } .f17em{ font-size: 1.7em!important; } .f18em{ font-size: 1.8em!important; } .f19em{ font-size: 1.9em!important; } .f20em{ font-size: 2.0em!important; } .f21em{ font-size: 2.1em!important; } .f22em{ font-size: 2.2em!important; } .f23em{ font-size: 2.3em!important; } .f24em{ font-size: 2.4em!important; } .f25em{ font-size: 2.5em!important; } .f26em{ font-size: 2.6em!important; } .f27em{ font-size: 2.7em!important; } .f28em{ font-size: 2.8em!important; } .f29em{ font-size: 2.9em!important; } .f30em{ font-size: 3.0em!important; } |
「rem」で指定する
「rem」は最近利用する人が増えている単位です。
html要素(ルート)のフォントサイズを「1」として、指定するものです。
賢威8では、html要素のフォントサイズを「10px」に指定しているので、16pxに指定したい場合は「1.6rem」とすれば良く、「em」のように複雑な計算をする必要はありません。
反対にhtml要素の数値を変更すれば、全体的に文字サイズを変えることもできるので便利です。
テキストを20pxにします。
1 |
<p class="f20rem">テキストを20pxにします。</p> |
あらかじめ用意しているサイズは以下のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.f08rem{ font-size: 0.8rem!important; } .f09rem{ font-size: 0.9rem!important; } .f10rem{ font-size: 1.0rem!important; } .f11rem{ font-size: 1.1rem!important; } .f12rem{ font-size: 1.2rem!important; } .f13rem{ font-size: 1.3rem!important; } .f14rem{ font-size: 1.4rem!important; } .f15rem{ font-size: 1.5rem!important; } .f16rem{ font-size: 1.6rem!important; } .f17rem{ font-size: 1.7rem!important; } .f18rem{ font-size: 1.8rem!important; } .f19rem{ font-size: 1.9rem!important; } .f20rem{ font-size: 2.0rem!important; } .f21rem{ font-size: 2.1rem!important; } .f22rem{ font-size: 2.2rem!important; } .f23rem{ font-size: 2.3rem!important; } .f24rem{ font-size: 2.4rem!important; } .f25rem{ font-size: 2.5rem!important; } .f26rem{ font-size: 2.6rem!important; } .f27rem{ font-size: 2.7rem!important; } .f28rem{ font-size: 2.8rem!important; } .f29rem{ font-size: 2.9rem!important; } .f30rem{ font-size: 3.0rem!important; } |
「px」で指定する
数値を直接入力でき、非常に分かりやすいのが「px」です。
ただし、「em」や「rem」と違って相対的なサイズではないので、一括でフォントサイズを大きくする、といったことはできません。
テキストを20pxにします。
1 |
<p class="f20px">テキストを20pxにします。</p> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.f10px{ font-size: 10px!important; } .f11px{ font-size: 11px!important; } .f12px{ font-size: 12px!important; } .f13px{ font-size: 13px!important; } .f14px{ font-size: 14px!important; } .f15px{ font-size: 15px!important; } .f16px{ font-size: 16px!important; } .f17px{ font-size: 17px!important; } .f18px{ font-size: 18px!important; } .f19px{ font-size: 19px!important; } .f20px{ font-size: 20px!important; } .f21px{ font-size: 21px!important; } .f22px{ font-size: 22px!important; } .f23px{ font-size: 23px!important; } .f24px{ font-size: 24px!important; } |
※なお、最近利用されることの多い「vw」「vh」については、扱いが非常に複雑になるため賢威では利用しないようにしています。