「HTMLとCSSで使う数字の単位の関係」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
フォントのサイズを決めているもの
「よし、この部分のフォントのサイズは 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倍、となります。基本的には、&color(red){親要素のサイズから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」に対して、です。
*フォントのサイズを決めているもの
「よし、この部分のフォントのサイズは 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倍、となります。基本的には、&color(red){親要素のサイズから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」に対して、です。
