※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

フォントのサイズを決めているもの

「よし、この部分のフォントのサイズは 2 にしよう!」 他の人からこのように頼まれた場合、あなたはどうしますか?単位について知っておかないと、 「いや、2ptは小さすぎるだろ…、どうすれいいんだろう…」などと考え、要求に答えることができませんね。

そこで今回は単位について記していきたいと思います。 Webページには多数の文字があり、強調したい部分には大きい文字、ついでの部分には小さい文字など、レイアウトが考えられると思います。 PCの画面に表示されるということは、単位もPCの画面が基準となります。 それが 「px(ピクセル)」 です。みなさんのPCにも解像度があると思いますが、それはpxあたりで表現します。 1920×1080や、1280×720 ,1024×768など、Webページはいろいろな人が見るものだから、それを想定して考えることが必要ですね。自分のPCの解像度も確認しておきましょう。

font-sizeで使用する場合

font-sizeプロパティを念の為に書いておきましょう。 font-size: (サイズ指定部) ; でした。このサイズ指定部に記入する方法は、以下の4種類です。 「単位付きの実数で指定する方法」「パーセンテージで指定する方法」「キーワードで指定する方法」「親要素のフォントサイズからの相対で指定する方法」です。

1.単位付きの実数で指定する方法

font-size:  16px;
font-size:  1.5em;

px(ピクセル)はPC画面の表示できる基本単位です。 em(エム)とは ~倍 です。1.5emは1.5倍、となります。基本的には、 親要素のサイズから1.5倍、ということになるのですが、親要素がない場合、「medium」というブラウザごとに設定されたサイズが基準となります。 冒頭の2というのはemのことだったんですね。

2.パーセンテージで指定する方法

font-size:  180% ;

% 表示も前述したとおり、親要素のサイズからの相対となります。同様にして、「midium」からの相対になることもあります。

3.キーワードで指定する方法

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」と同じで、ブラウザに設定されている大きさ、として表示されます。要するに、ブラウザによって異なることもある、のです。

4.親要素のフォントサイズからの相対で指定する方法

font-size: smaller:
font-size: larger:

親要素に対して、一段階小さく(smaller)したり、一段階大きく(larger)したりできます。

その他、cssで使用される単位について

他にも、line-heightプロパティを筆頭に、領域の確保やその他さまざまな場面で「単位」が出てきます。その時々での使用する単位の良い選択は変わってきますので、積極的に分かりやすい単位を使っていきましょう。

px(ピクセル)…画面を構成する最小単位です。
pt(ポイント)…主にワープロ系のソフト等で使われてきた単位。1/72インチが1ptなります。
cm…これは印刷用にたまに用いられることがあります。
mm…   同上
em(エム)… ~倍、と考えましょう。親要素から継承、なければブラウザごとの「midium」に対して、です。
%…これも、親要素から継承、なければブラウザごとの「midium」に対して、です。