このページでは、【ホームページ制作入門講座】として、制作する際のサイズ単位の解説をしています。
ホームページ制作においての、サイズの単位の説明をしていきます。大事な知識になりますので、しっかりと理解して使いこなせるようにしておきましょう。
この記事は、動画バージョンでも解説しておりますので、動画で学習されたい方は以下のリンクより閲覧下さい。
pxとは
ホームページ制作においてのサイズの単位は、基本的にはpx（ピクセル）になります。ピクセルとは1つの小さな正四角形の事をさします。一般的にはドットとも言いますが、ドットは点、すなわち「丸」ですので、その表現は少しおかしいかもしれません。
余談
ちなみに印刷業界では、網点という点の集まりを印刷することで印刷物が出来上がります。この際は紛れもない点の集まりですので、ドットと言えるでしょう。
解像度とは
pxの話をすると必ず出てくるのが解像度です。
解像度はdpi（dot per inch）と呼ばれ、1インチ（25.4mm）の中にドットすなわちピクセルが何個入っているかの事になります。ですので、解像度が高いほど細かい表現が可能になります。
mm（ミリメートル）とpxの違い
皆さんご存知のように、現実世界でサイズを表す際は「mm」「cm」「m」などを使用します。これは絶対的な数値であり、見た目でも変わることはありません。
しかしpxは、解像度により1インチあたりの最小の四角形の大きさが変わります。
ですので、実際の大きさを確認したい場合は、[ px × 25.4mm ÷ dpi]の計算式で求める事ができます。
例えば、解像度が1であるのなら1pxは25.4mmになるし、解像度が100であるなら1pxは0.254mmになります。
ですので、pxとは絶対的なサイズではありません。あくまで相対的な大きさであり、表示するデバイスの解像度により変わるという訳です。
その他の単位「em」
その他、ホームページ上でサイズを表す表記方法として、em（エム）があります。emもまた、相対的なサイズ表現になります。
HTMLを制作する際、初期段階で基準値というものを基本的には決めているはずです。決めた覚えがない場合は、何らかの数値が割り当てられています。
その基準値を前提に、emの場合は「基準値×emの係数」で算出されます。
例えば基準値が10pxで、1emという表記であれば、「10px×1em」で10px、1.5emであれば「10px×1.5em」で15pxという大きさが割り当てられる事になります。
emの由来
emの由来は大文字のMからきています。なぜ、emという表記になったかというと、英語のMはラテン語でemにあたりますので、そこからの由来になります。
emの使用例
emは大きさを相対的に表す単位になり、フォントサイズやline-heightを調整する際によく使われます。
例えば、この文字の大きさは基準サイズより少し大きくしたい、というような時に「 p{font-size: 1.1em;} 」としておくと、フォントサイズは基準値の1.1倍になり、実数ではなく感覚的に操作できるようになります。
レスポンシブ仕様にする際など、大きさ比率を保ちたい時にも便利です。
もちろん、ドンピシャで数字を入力しても問題ありませんが、emで表記しておく方が何かと便利なことも多々あります。
例えば、基準値が27pxの場合なら、わざわざ計算して、40pxとドンピシャの数字を出さないといけません。
しかしemを利用すると、わざわざ計算しなくても、「 p{font-size: 1.5em;} 」と入れるだけで、感覚的イメージの大きさになってくれます。
その他の単位「%」
％も同様に、基準値に対しての相対的な値になります。
基準値が100pxで（ div{width: 120%;} ）なら、「100px×1.2」で、横幅は120pxという具合になります。
％の使用例
％も大きさを相対的に表す単位になりますが、主に面積などの割合を指定する際に使います。
具体的には、width、height、tableの各列幅指定などに重宝します。
特にレスポンシブ仕様にする際に、ドンピシャの数字を入力すると、デバイスがいくつもある現在では、必ずどれかのデバイスでサイズのズレが生じますので、理想的なレイアウトになりません。
％の活用は、現在のモバイルファースト思考を考えると、とても大事なテクニックになります。
また、画像（imgタグ）の大きさを調整するのにも便利です。
％は、基本的にはどんなものに対しても使用できますが、font-sizeやline-heightに積極的に使用する事はありません。
まとめ
いかがでしたでしょうか？
ホームページ制作において基本となるのは、デバイスの最小の正方形の大きさであるpxという単位になります。
また、px以外でも大きさを指定する表記方法があり、font-sizeやline-heightには、基準値に対する相対的な数値を出すemや、面積を指定するwidth、height、tableの各列幅指定などに利用する「％」などがあります。
どれをメインに使うという事ではなく、臨機応変に使い分けていく事が非常に大事ですので、しっかりと理解して、使いこなせるようにしましょう。
