|
■ 文字のサイズ font-size
スタイルシートでサイズを決める時の単位は、下のように複数あります。
| 絶対単位
|
mm
|
ミリメートル
|
メートル法で決められた 1/1000m
|
| cm
|
センチメートル
|
メートル法で決められた 1/100m
|
| inct
|
インチ
|
1inctは約25.4mm
|
| pt
|
ポイント
|
1pt=1/72inct
|
| pc
|
パイカ
|
1pc=12pt
|
| 相対単位
|
em
|
|
1em=親タグのフォントの長さ
|
| ex
|
|
1ex=親タグのx-heightの高さ
|
| デバイス依存単位
|
px
|
ピクセル
|
ディスプレイの最小単位
|
文字サイズのスタイルシートによる指定は、ブラウザで文字サイズが変更できる相対単位が良いでしょう。
良く使われるのは em でしょうか。少し小さい文字なら0.9emといった感じになります。
しかしサイトに作りによっては文字サイズの変更でデザインが崩れる場合があります。その場合は相対単位向かず、
px と pt などが使われますが、pt は環境によってサイズが違う場合が生じるので向かないと思います。
おすすめはテーブルなどの幅などでよく使われる px でしょう。
1pt は 1pt=1/72inct で、1inch は 約25.4mm ですから 1pt は約 0.353mm になります。
なぜ絶対単位がサイトの文字サイズに向かないかは、使われているパソコンの画面の大きさや画面領域が一定じゃないからです。
例えば 1cm はメートル法で決められている 1/100m です。それに対してサイト作成のテーブルなどの幅に通常使われる単位
px は、お使いのパソコンにサイズが依存されます。
1px の大きさは、例えばディスプレイ表示される部分の幅を物差しで計り、画面領域を1024×768にしているなら、
ディスプレイ表示される部分の幅/1024 となります。つまりディスプレイの大きさや設定している画面領域によって、
1px の大きさは変ってきます。
従って絶対単位とデバイス依存単位の混合は、パソコンの条件が変ると、
ディスプレイにおける表示のされ方も本来は変わる事になります。
もし絶対単位の mm でテーブルの幅や文字のサイズを決めたとしたら、「ノートパソコンなどの12インチディスプレイに配慮した
サイズでホームページの幅を考えましょう。」となるでしょう。また印刷する紙をのサイズを指定する場合、
絶対単位は分かりやすいと思います。
■ 行間 line-height
文字を読みやすくするために、行間を少し大きく取ったりする事が出来ます。
<div style="line-height:130%;color:008800;">
この文章の行間は130%です。 line-height:130%
行間空ける単位も色々ありますが、通常よりどのくらい空けるかを指定できる % は
分りやすいし、覚えやすいです。
<div style="line-height:1.4em;color:008800;">
この文章の行間は1.4emです。 line-height:1.4em
文章が書ける範囲や見た目もあるので、それに合わせた行間の指定が良いと思います。
% に似ていますが文字サイズを変える場合はこちらの方が良いです。
<div style="line-height:18px;color:008800;">
この文章の行間は18pxです。 line-height:18px
行間を文字サイズに合わせて、ピクセル単位でも指定できます。
■ 画像の横にテキストを配置
画像を貼り付けその画像の説明を書く場合がよくあります。画像の横に文章を
載せると、１行しか書けないので余白が大きくできる場合があるんですが、
画像の高さだけの行数、文章を載せる方法は複数あります。
 通常はこのようになり１行しか書けない。
複数行ある文章は画像の下の行に書かれるので見栄えが良くない。
<img>タグにalign属性を入れても同じようになる。
<img src="fish3.png" align="left">
この場合画像を左に寄せたいので align="left" になり、
画像の高さ以上の文章は、画像の下の行に書かれる。
また<table>や<div>などのブロック体の配置も出来る。
CSSでもalign属性と同じ事が出来る。
<img src="fish2.png" style="float:left">
やはり画像を左に寄せたいので style="float:left" ととし、
画像の高さ以上の文章は、画像の下の行に書かれる。
また<table>や<div>などのブロック体の配置も出来る。
|
もちろんテーブルを使って同じようなレイアウトはできます。
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td width=80><img src="fish1.png"></td>
<td width=320>ここに文章を書く。</td>
</tr>
</table>
|
■ 画像を使って配置を調整
透明化したGIF（ジフ/ギフ）やPNG（ピング）の小さな画像を使って、簡単に
上下左右の配置を調整できます。画像の大きさは、<img> タグの width属性や
height属性でサイズ調整が出来るので、それを利用します。
 この文章の左部分に見えない画像が配置されてます。
配置の調整に使いますが、画像のサイズはどのブラウザで見ても同じなので、
サイトレイアウトの微調整に、使われる事があります。
この文章の上にも見えない画像を配置し、微妙な行間を空けてみました。
画像は１つ用意すれば、width / height 属性を使って色々なサイズで使えます。
調整用のスペースGIFが欲しい方は、左にある水色部分を右クリックし、
「名前を付けて保存」で保存してご使用下さい。幅2px×高2px の小さな
画像で、45バイトの軽い画像です。
■ HTMLに必ず出来る余白
上部に改行を入れなくても左端から文章を書いても、HTMLファイルを表示すると
上部と左側に余白が少し出来ます。この余白は任意の幅にする事が出来ます。
IE用上部の余白 topmargin="数値"
IE用左側の余白 leftmargin="数値"
NN用上部の余白 marginheight="数値"
NN用左側の余白 marginwidth="数値"
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
上の場合だとIEでもNNでも、上部及び左側の余白が0になります。body に出来る
余白が無しの状態です。通常余白を指定する場合はIEとNNの両方指定します。
しかし最近のブラウザなら body {margin:0px;padding:0px;} でも余白はなくなるので、
上に書いたものは古いブラウザに対するものになります。
|
