HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415161718|  次へ>>

「激安ガーデン通販」では、只今期間限定セール開催中! [PR]

● 長さ(大きさ)の単位

HTMLで大きさを設定するには以下の三つの単位が与えられていました。

ピクセル(無単位):画面上に表示する際のピクセル数で、出力デバイス(モニター)とそれへの出力設定に依存
長さ(単位:%):画面上の利用可能な空間に対するパーセンテージ
複合長(単位:*に付記される比率):定められた空間を複数の要素で比率分配して割り当てられる
全体の大きさが300(ピクセル)だった場合それぞれの幅に『* / 2* / 3*』と設定された場合、 *(1*の意)には300の1/6である50が、2*には100、3*には150の幅が与えられます。

利用できるサイズが少ないようですが、フォントのサイズはH1要素やH6要素のように<FONT size="3">のように、 1〜7の数値(や、+/−を利用した相対サイズ)で設定しているなど、 この単位を利用して大きさを設定するのは、表や画像などの横幅、高さしかなかったのでこれで充分だったのでしょう。
これらすべてのサイズは、画面(モニター)に対しての相対値になっているのが特徴といえます。

CSSではHTMLに比べ、文字の大きさ、行間、マージンなど様々なところに大きさの設定が可能になります。 そのため、使用できる単位も増え、HTMLには無かった、環境に依存しない大きさを設定できるようになっています。
絶対的な大きさにはインチ[in]や、センチメートル[cm]、ミリメートル[mm]の一般的な単位や、 ポイント[pt]、パイカ[pc]の印刷分野で使用される単位もあります。 これらをプロパティの値に設定すれば、定規で測ったようにそのサイズになります(たぶん・・・)
相対的な長さとしては、HTMLでも利用するピクセル[px]、パーセント[%]に加え、 エム[em]、エックスハイト(エックス)[ex]があります。

CSSで使用できる長さ(大きさ)の単位
○絶対的な大きさ ○相対的な大きさ
[in]インチ
[cm]センチメートル
[mm]ミリメートル
[pt]ポイント(0.35mm)・・・1/72インチ
[pc]パイカ(4.3mm)・・・12pt
[em]エム(文字の倍率)
[ex]エックスハイト(英字の小文字「x」の大きさに対する比率。)
[px]ピクセル(画面を表示する点1個分で画面の解像度で変化します。)
[%]パーセント(各種要素に対する百分率)

これらの単位を使用してプロパティに値を設定するとき、 長さの値は、整数値だけでなく+/−を与えることが可能です。 数値の後ろには2文字で与えられている単位を置きます
途中にスペースを入れたり、0の時以外の単位のない数値は認識されません。
(※ 単位のない数値はIE5.5まではピクセルとして判断されます。)

使用する単位の選択

・・・と使用できる単位が色々ありますが、これらは利用できる選択肢が広がっているだけで、 すべてを利用しろってことではないので、大きさのとらえやすい単位を利用すればよいと思います。
ただ、これらの単位には『絶対的な単位』と『相対的な単位』、二つの特徴が与えられています。 (※ピクセル単位はその特徴から、絶対的なのか相対的なのか意見が分かれるところですが・・・。) それぞれの単位の特徴を知り、使い分ける必要があると思われます。

==単位の意味と特徴==

インチ[in]は、ヤード-ポンド法の長さの単位で、 主にアメリカやイギリスで広く使用されている。親指の幅が基準らしいです。1フィートの1/12。1[in]=25.4[mm]

センチメートル[cm]は、日常で一般的に使われる長さの単位で、光が真空中を1秒の1/299,792,458の時間に進む距離1メートルの1/100の大きさ。 (センチ[c]は単位に冠して1/100を表す)

ミリメートル[mm]は、日常、特に図面なでで基本として使われる長さの単位で、光が真空中を1秒の1/299,792,458の時間に進む距離1メートルの1/1000の大きさ。 (ミリ[m]は単位に冠して1/1000を表す)

ポイント[pt]は、活字サイズに使用される単位で1ptは約1/72inで写植やDTP、 一太郎(JUSTSYSTEM)やMicrosoft Word、Microsoft Excelなどのワープロや表計算ソフトでも使用されています。

パイカ[pc]は、印刷レイアウトに使用される単位のひとつで、1[pc]=12[pt]=1/6[in]です。

エム[em]は、その時点で使用されている文字の大きさを1とした比率になり、パーセントと同じ考えになります。
そのため、1emの大きさは流動的で、例えば、フォントサイズを12pxにした場合、1[em]=12[px]となります。 その時、もしP要素に1.5emが設定され、さらにインライン要素により0.5emが設定された場合は、 その時の大きさは、1.5×0.5×12[px]=9[px]となります。
本来の意味ではアルファベット大文字『M』の幅を表すようで、クワタ幅と呼ばれるらしいです。 この半分の単位にエン[en]ってのもあるのですが導入されてないようです。

エックスハイト[ex]は、その時点で使用されているフォントのアルファベット小文字『x』の高さを基準とした大きさです。 そのため、同じフォントサイズであっても,使われているフォントフェイスによって大きさが異なります。

ピクセル[px]は、相対サイズと言っても、出力デバイス(モニター)とそれへの出力設定に依存した相対サイズです。
パソコンの画像は、点(ドット)によって表示されおり、それをピクセルという名で表現しています。 このピクセル1つの大きさはモニターのサイズや、表示するピクセル数で変わってしまいます。
Windowsでは画面上に表示されるピクセル数を、『画面領域』という名で設定しています。 (『コントロールパネルの画面』、またはデスクトップ上で右クリックし、プロパティで表示される 『画面プロパティ』ウィンドウの『設定』タブの右下)
そのため、同じ大きさのピクセルでも、モニターのサイズが小さければ見かけ上小さくなり、 また、モニターのサイズが同じでも、画面に表示するピクセル数で大きさは変わります。

パーセント[%]は、そのまま比率を表します。ただし、基準となる値がプロパティによって違うので注意が必要です。

絶対的な大きさは環境に依存しないので、センチメートル[cm]なり、ミリメートル[mm]なり、 肌に合う単位を利用すればよいのですが、これは、逆に言えば変更させないということです。
IEの場合、文字サイズを変える方法が、[表示]メニューに[文字のサイズ]、 又は[Ctrl]キーを押しながらマウスのホイールを上下することで幾分変更できるようになっています。 絶対的な大きさとされている単位、又は、ピクセル[px]で設定された文字は、 この変更を受け付けなくなってしまいますので、見づらい大きさにならないように十分な注意が必要です。

==文字サイズサンプル==
5mmの文字。 0.5cmの文字。 0.2inの文字。
1pcの文字。 10.5pt(ワードのデフォルト)の文字。

固定された文字の大きさ

特に、ピクセル[px]は相対的な大きさで有りながら、 変更を受け付けなくなってしまいますので、非常に厄介です。
特に文字に対しての解像度は画面領域に関わらずWindowsでは96dpiになっているのですが、 MacOSでは72dpiとなっているらしいので、 同じ値でもMacとWindowsでは文字のサイズが違うということです。
15pxで設定された文字の大きさは Windowsでは約4mmで表示されるので見やすい大きさですが、 Macでは5.3mmと少々大きすぎるでしょう。 しかし、もしMacで大きさをあわて11pxとすると、約3.9mmとなりますが、 Windowsでは2.9mmと小さくて見えづらいでしょう。
15px、11pxで設定された文字の大きさ
Windowsでは96dpiで処理されるので、
15/96×25.4=3.97mmで出力されます。
11/96×25.4=2.91mmで出力されます。
一方、MacOSでは72dpiで処理されるので、
15/72×25.4=5.29mmで出力されます。
11/72×25.4=3.88mmで出力されます。
ちなみに、解像度が72dpiなら1pt(ポイント)=1px(ピクセル)となり ピクセルとポイントの大きさが等しくなります。

結局、文字のサイズの設定には閲覧者側で設定し直せるので、 エム[em]やパーセント[%]を使用するのが良いと思います。
絶対サイズやピクセル[px]は、ブラウザでサイズ変更ができないので、 文字サイズの設定等には読みづらくならないよう注意が必要です。 結構[px]を使っている人が多いようですが、上のようにMAC/Win間の問題があるので、特に避けるべきでしょう。
IEの表示メニューに文字サイズを変えるメニューがあります。以下の文字に注意して試してみてください。

<SPAN style="font-size:10px">この文字読みにくいから大きくしたいな。</SPAN>
<SPAN style="font-size:0.5em">この文字読みにくいから大きくしたいな。</SPAN>
<SPAN style="font-size:xx-small">この文字読みにくいから大きくしたいな。</SPAN>

どうです、pxによって文字の大きさを設定すると、ブラウザ側の表示設定では、文字の大きさを変えることができません。
レイアウトを保持することを理由に文字の大きさを固定する人がいますが、そういう部分は最低限に押さえ、 なるべく、画面の大きさにとらわれない柔軟なページを作成するようにするべきではないでしょうか。

<<前へ  |上へ|  次へ>>
123456789101112131415161718

パソコンのウイルス対策大丈夫ですか?どれかひとつは入れておきたい対策ソフト
マカフィー・ストア シマンテックストア ウイルスバスター公式トレンドマイクロ・オンラインショップ

TOP] [HOME

更新日時:2014/08/09