「よし、この部分のフォントのサイズは 2 にしよう!」 他の人からこのように頼まれた場合、あなたはどうしますか?単位について知っておかないと、 「いや、2ptは小さすぎるだろ…、どうすれいいんだろう…」などと考え、要求に答えることができませんね。
そこで今回は単位について記していきたいと思います。
Webページには多数の文字があり、強調したい部分には大きい文字、ついでの部分には小さい文字など、レイアウトが考えられると思います。
PCの画面に表示されるということは、単位もPCの画面が基準となります。
それが 「px(ピクセル)」 です。みなさんのPCにも解像度があると思いますが、それはpxあたりで表現します。
1920×1080や、1280×720 ,1024×768など、Webページはいろいろな人が見るものだから、それを想定して考えることが必要ですね。自分のPCの解像度も確認しておきましょう。
font-sizeプロパティを念の為に書いておきましょう。 font-size: (サイズ指定部) ; でした。このサイズ指定部に記入する方法は、以下の4種類です。 「単位付きの実数で指定する方法」「パーセンテージで指定する方法」「キーワードで指定する方法」「親要素のフォントサイズからの相対で指定する方法」です。
font-size: 16px; font-size: 1.5em;
px(ピクセル)はPC画面の表示できる基本単位です。
em(エム)とは ~倍 です。1.5emは1.5倍、となります。基本的には、
親要素のサイズから1.5倍、ということになるのですが、親要素がない場合、「medium」というブラウザごとに設定されたサイズが基準となります。
冒頭の2というのはemのことだったんですね。
font-size: 180% ;
% 表示も前述したとおり、親要素のサイズからの相対となります。同様にして、「midium」からの相対になることもあります。
font-size: xx-small: font-size: x-small: font-size: small: font-size: midium; font-size: large: font-size: x-largel: font-size: xx-large:
の合計7種類があります。これらの指定方法は、「miduim」と同じで、ブラウザに設定されている大きさ、として表示されます。要するに、ブラウザによって異なることもある、のです。
font-size: smaller: font-size: larger:
親要素に対して、一段階小さく(smaller)したり、一段階大きく(larger)したりできます。
他にも、line-heightプロパティを筆頭に、領域の確保やその他さまざまな場面で「単位」が出てきます。その時々での使用する単位の良い選択は変わってきますので、積極的に分かりやすい単位を使っていきましょう。
px(ピクセル)…画面を構成する最小単位です。 pt(ポイント)…主にワープロ系のソフト等で使われてきた単位。1/72インチが1ptなります。 cm…これは印刷用にたまに用いられることがあります。 mm… 同上 em(エム)… ~倍、と考えましょう。親要素から継承、なければブラウザごとの「midium」に対して、です。 %…これも、親要素から継承、なければブラウザごとの「midium」に対して、です。