TOP ＞ スタイルシート基本知識 ＞ スタイルシートでのサイズのあらわし方
スタイルシートでのサイズのあらわし方
文字サイズや画像の幅を指定するとき、数字で明確に指定することがベストです。この数字の単位は『絶対単位』とj『相対単位』 があるます。
相対単位とは、ある基準に対してその何倍にするかをあらわす単位で、ex、em、pxなどがあります。
絶対単位はサイズが明確に決まっていて、in、cm、mm、pt、 pcなどがあります。
| ex | 相対 | 「x」の文字の高さ |
| em | 相対 | 文字一つ分の高さ |
| px | 相対 | 画面上のピクセル（点）一つ分 |
| in | 絶対 | インチ |
| cm | 絶対 | センチメートル |
| mm | 絶対 | ミリメートル |
| pt | 絶対 | ポイント（=72分の１インチ） |
| pc | 絶対 | パイカ（=12ポイント） |
また他のサイズに対するパーセンテージで指定することも出来ます。この場合、親要素を基準にして決定します。 たとえばフォントサイズを150％とした場合、その親要素のフォントサイズの150％の大きさになります。
"スタイルシートのサイズのあらわし方"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>スタイルシートのサイズのあらわし方のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .c1{font-size: 20px; padding: 2em;} p{font-size: 15pt;} em{font-size: 0.5em;} h2{font-size: 150%} --> </style> </head> <body> <h1>スタイルシートでのサイズの指定には、絶対単位と相対単位があります。</h1> <p> </p> <div class="c1">font-sizeを20ピクセルに設定し、paddingを2emとしたので、paddingは文字二つ分の40ピクセルとなっています。</div> <p>font-sizeを15ポイントに指定した後、<em>斜体文字を0.5emとしたので斜体文字の部分は7.5ポイント</em>になります。 <h2>パーセントで表すことも出来ますh2要素を150％で設定してあります。親要素の15ポイントの150％の文字の大きさになっています。</h2></p> </body> </html> |
[
スタイルシート基本知識 ]
