【CSS入門】 文字や領域の大きさと単位
文字や領域には、大きさを指定できます。大きさにはpxや%といった単位を利用します。
ここでは、実際に大きさを指定する方法と単位を紹介します。
目次
文字サイズを変更する
font-sizeプロパティを用います。
See the Pen css font-size by Totori (@souki202) on CodePen.
高さや幅を変更する
widthとheightプロパティを用います。
See the Pen css width height by Totori (@souki202) on CodePen.
単位の種類
これらの単位は、pt以外いずれも利用することがあるため、把握しておくと便利です。ここで紹介するもの以外にもいくつか単位が存在しますが、ほぼ使いません。
特に重要なのはpxと%です。まずはこの2つだけ把握して、慣れてきたら他も使いこなす、という方向でも良いと思います。
モバイル環境など、環境によっては最小フォントサイズが指定されている場合があるため、一定より小さくならない場合があります。そのため、極端に小さい文字を使うと、環境によっては表示崩れの原因になる可能性があります。
0にしたい場合は単位が不要で、単に0だけで良いです。例えば、width: 0;のようにします。
ピクセル (px)
ピクセルは、画面のドット数です。100pxなら、PC画面100ドット分の大きさです。
See the Pen css px by Totori (@souki202) on CodePen.
パーセント (%)
パーセントは、要素の領域のサイズに指定する際は親要素の幅や高さに対する割合になるのですが、意外と複雑で、思ったとおりのサイズにならないなどが頻繁に発生します。しかし、使いこなせれば強力です。
うまく行かない場合が多いのは、親要素のサイズが子要素のサイズに依存しており、定まらない場合があるためです。
文字サイズの場合、親要素の文字サイズに対する割合になります。
See the Pen css percent by Totori (@souki202) on CodePen.
上のように、80%の内側に更に80%のfont-sizeを指定すると、親よりも小さくなっていることがわかります。
親要素など、HTMLの構造についてはこちら
em
文字サイズの場合は実質パーセントと同じで、1em = 100% です。つまり、親要素のフォントサイズに依存します。
ブロック要素の大きさ指定の場合、文字サイズに依存したサイズを指定できることになります。
現実的には行や文字間には隙間があるため、ピッタリ文字数分とはなりません。5emなら入るのは3行程度です。
See the Pen css em by Totori (@souki202) on CodePen.
rem
ルートの文字サイズに依存させたemです。emは親要素のサイズ依存でしたが、remはルートのサイズ依存です。そのため、親要素のフォントサイズに関係なく指定できます。
See the Pen css rem by Totori (@souki202) on CodePen.
vw, vh
vwは、ブラウザ画面の幅依存のパーセント、vhは画面の高さ依存のパーセントになります。
つまり、100vwならちょうどブラウザの画面の幅と同じになります。
初期状態だとbodyには隙間があるため、100vwを指定すると微妙に横スクロールがでます。body { margin: 0; padding: 0}を設定することで画面いっぱいに出力できます。
See the Pen css vwvh by Totori (@souki202) on CodePen.
pt
1pt = 1.33…px です。本来、ポイントは現実のサイズに合わせられた単位のため、印刷物などに利用する際はしばしば登場します。しかし、Webサイトは印刷するためのものではないため、ほとんど利用しません。しかも通常はdpiは考慮されないため、モバイルデバイスなどでも1pt=1.33…pxになります。pxで良いです。
width, heightプロパティの注意点
widthとheightプロパティは、ブロック要素にしか適用できません。つまり、div, header, footer, p, ul, li, section…等々です。
bやstrongなど、文字を修飾するタグ (インライン要素) には反映されません。
もし反映したい場合、display: inline-block;を指定します。
まとめ
大きさには様々な単位があり、それぞれ使い分けが重要です。pxはよく利用しますが、文字であればemやrem、ブロック要素のサイズであればvwや%もよく利用されます。
利用頻度が非常に高いため、触っているうちに自然と覚えることも多いと思います。様々な設定を試してみましょう!
