七鍵＠楽天

Ｗｅｂページを作る際に何かの大きさを指定することが多々ありますよね。
例えば線の幅であったり、画像の高さであったり、文字の大きさであったり・・・
今回はそれらの大きさを指定するための単位について話をしましょう(〃⌒▽⌒)

まず、ＨＴＭＬタグで使用できる長さの単位についてです。
「width="50"」のように、何も単位をつけずに記述すればピクセル指定となります。
このピクセルと言う単位ですが、ディスプレイで表示することができる最小値を「1px」としています。
パソコンで何かを表示する際は、点の集合としてその何かを表示します。
文字も点の集合で表されていますし、写真のような画像も点の集合で表されています。
早い話が、その点の大きさを「１ピクセル」と呼んでいるのです(￣▽￣人)

ここで注意が必要なのですが、この「１ピクセル」は万人共通の単位ではありません(´･ω･`)
表示することができる最小の単位と言うものは
ディスプレイのサイズによっても変わりますし、ディスプレイの解像度にもよります。
つまり、ピクセルという単位は見る人の環境によって見た目の長さが変わってしまうので、注意が必要です。
ただ、このピクセルという単位はスタイルシートでも使用することができますし、
ディスプレイの表示単位がそもそもピクセルですから、画面表示優先でＷｅｂページをデザインする場合には非常に便利です。
特徴をしっかりつかみ使いこなしましょう。

次に「％」ですが、これはサイズを100分比で指定するものとなっています。
何に対する比率かは使いどころによって違ってきます。
例えば、「今の文字のサイズに対して120%の大きさで表示」とか、
「今の画面サイズの半分の大きさで画像を表示」とか・・・
こちらもピクセルと同様、ＨＴＭＬでもスタイルシートでも使うことができます。
使い方によっては重宝するのではないでしょうか(〃⌒▽⌒)

ＨＴＭＬで主に指定できる長さや大きさの単位は以上の２つです。
これらは二つともディスプレイに対しての相対値になっているのが特徴といえます。
ここから以降はスタイルシート（CSS）にて使用できる単位を紹介していきますが、
スタイルシートはＷｅｂページの見栄えを記述するという役割がありますので、
ＨＴＭＬに比べ何かの大きさや長さを指定する機会が多いですよね(￣▽￣人)
そのため使用できる単位も増え、ＨＴＭＬには無かった環境に依存しない大きさも設定できるようになっています。
具体的には次の表をごらんください。

	in	cm	mm	pt	pc
in	-	2.45cm	24.5mm	72pt	6pc
cm	0.39in	-	10mm	28.1pt	2.34pc
mm	0.039in	0.1cm	-	0.281pt	0.234pc
pt	0.0139in	0.0353cm	0.353mm	-	0.0833pc
pc	0.167in	0.424	4.24mm	12pt	-

やはり日本人がなじみ易いのは「cm」や「mm」ですよね(￣▽￣人)
この二つは小学校でも習う単位ですので大丈夫ですよね(〃⌒▽⌒)

「in」はインチの略で、ヤード-ポンド法の長さの単位となっています。
アメリカやイギリスで広く使用されているらしいですね。

「pt」はポイントの略で活字サイズに使用される単位となっています。
Microsoft-ExcelやMicrosoft-Word、Adobe-Fotoshopなどなど。
アプリケーションソフトにて文字のサイズを指定する際に見かけるあの単位です。
「pc」はパイカの略で印刷レイアウトに使用される単位となっています。
これらの単位にて長さや大きさを指定した際には閲覧者の環境に依存せず、
Ｗｅｂページの作成者が意図した大きさで表示することができる、ということになっています。

そして、スタイルシートにはピクセルとパーセントの他にも相対的に大きさを指定できる単位が用意されています。
一つ目は「em」という単位でエムと発音します。
この単位は、その時点で使用されている文字の大きさを１とした比率になり、考え方自体はパーセントと同じです。
そのため、「1em」の大きさはとても流動的です。

例）
フォントサイズ「12px」の際の「1.5em」は「18px」と同じ大きさになります。
フォントサイズ「20px」の際の「1.5em」は「30px」と同じ大きさになります。

更に「ex」という単位もあります。
こちらはエックスハイトと発音し、
その時点で使用されているフォントのアルファベット小文字「x」の高さを基準とした大きさとなっています。
そのため、同じ文字サイズであっても、使われている文字の種類によって大きさが異なるという特徴を持っています。

あまり普段聞きなれない単位もたくさんでてきました。
適材適所と言いますか・・・
知ってて損はないですよね(〃⌒▽⌒)
しっかり覚えておきましょう(￣▽￣人)

ではまた明日ー(ﾟ▽^*)ﾉ⌒☆