<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="CSS で使われる単位には長さ, パーセンテージ値, 色, URI などがあります。長さは「絶対単位」と「相対単位」の2種類の単位に大別され、絶対単位には cm, mm, in, pt, pc があり、相対単位には em, ex, px があります。" />
<meta name="keywords" content="CSS,長さ,絶対単位,相対単位,パーセンテージ値,cm,mm,in,pt,pc,em,ex,px,色,color,RGB,カラーネーム,URI" />
<title>CSSの単位 CSS 前提知識</title>
<link rel="stylesheet" type="text/css" href="http://w3g.jp/style/default" /><link rel="alternate" type="application/rss+xml" href="http://w3g.jp/index.xml" title="RSS update information" />
<link rel="alternate" type="application/rss+xml" title="SiteMap" href="http://w3g.jp/sitemap.xml" />
<link rel="start" href="http://w3g.jp/" title="World Wide Web Guide" />
<link rel="contents" href="http://w3g.jp/css/" title="CSS" />
<link rel="index" href="http://w3g.jp/css/guide/" title="前提知識" />
<link rel="prev" href="http://w3g.jp/css/guide/at_rule" title="@規則（アットルール）" />
<link rel="next" href="http://w3g.jp/css/guide/inheritance" title="継承（Inheritance）" />
<link rev="made" href="mailto:ryo.ueda@gmail.com" />
<script src="/script/jquery" type="text/javascript"></script>
</head>
<body>
<p id="skip"><a href="#information">Go to information</a></p>
<h1>CSSの単位</h1>
<script type="text/javascript" src="/script/adsense"></script>
<h2 id="length">長さ（length）</h2>
<p><abbr title="Cascading Style Sheets">CSS</abbr> における長さ（length）というデータは、ひとつの小数点を含めてもよい10進数値の直後に単位識別子を伴う型のことを言います。</p>
<p><a href="../font/font-size"><code>font-size</code>プロパティ</a>, <a href="../box/width"><code>width</code>プロパティ</a>, <a href="../box/height"><code>height</code>プロパティ</a>, <a href="../box/margin"><code>margin</code>プロパティ</a>, <a href="../box/padding"><code>padding</code>プロパティ</a>など、<a href="selector">セレクタ</a>となっている要素に関する様々なサイズを指定する際には「<code>0</code>」の場合を除き、必ず単位をともなう数値を使って指定します。使われる単位は「<strong>絶対単位</strong>」と「<strong>相対単位</strong>」の2種類に大別され、また一部のプロパティでは長さとは別にパーセンテージ（<code>%</code>）を単位とする<a href="#percentage">パーセンテージ値</a>を指定することもできます。絶対単位とは物差しで測ることができる単位を指しますが、ディスプレイ上の設定においてはかなり不正確です。絶対単位に対して相対単位はセレクタ（適用要素）やユーザーのディスプレイの環境に依存します。詳細は以下の通りです。</p>
<h3>相対単位</h3>
<dl>
<dt><code>em</code></dt>
<dd>適用要素の<a href="../font/font-size"><code>font-size</code></a>（フォントサイズ）を「1」としたその倍率</dd>
<dd>たとえば <code>p</code>要素をセレクタに &quot;<code>16pt</code>&quot; のフォントサイズが指定されている場合、この &quot;<code>16pt</code>&quot; の値が子要素には &quot;<code>1em</code>&quot; と換算されるで、この <code>p</code>要素内に <code>span</code>要素があって、<code>span</code>要素をセレクタに &quot;<code>0.75em</code>&quot; のフォントサイズが指定されると、<code>span</code>要素のフォントサイズは &quot;<code>12pt</code>&quot; と換算されます。このように <code>font-size</code>プロパティが &quot;<code>em</code>&quot; の単位識別子を定めるプロパティということになります。</dd>
<dt><code>ex</code></dt>
<dd>適用要素の英小文字「x」１文字の高さ（x-height）を「1」としたその倍率</dd>
<dd>小文字の大きさに合わせて調整したい場合に有用とされますが、指定されているフォントの種類により同じフォントサイズであっても異なったサイズで表示されたり、仕様書内においても問題が生じてるため使わない方が良いとされているため、この単位識別子の説明は省きます。</dd>
<dt><code>px</code></dt>
<dd>ピクセル数（pixels）で示し、ユーザーのディスプレイの画像解像度（画素濃度）に依存する</dd>
<dd>画像解像度に依り、たとえば Macintosh の<code>72dpi</code> の解像度下では<code>72px</code> で<code>1in</code>（<code>2.54cm</code>）に、Windows の<code>96dpi</code> の解像度下では<code>96px</code> で<code>1in</code>（<code>2.54cm</code>）となります。このようにピクセル数（pixels）は同じサイズのディスプレイでも、その解像度の設定によって大きさが異なるため相対単位とされていますが、ほとんどの UA（特に Internet Explorer）は、&quot;<code>px</code>&quot; を実質的には絶対的な単位として解釈しているようです。</dd>
</dl>
<h3>絶対単位</h3>
<dl>
<dt><code>cm</code></dt>
<dd>センチメートル（centimeters）</dd>
<dd><code>1cm</code> = <code>10mm</code></dd>
<dt><code>mm</code></dt>
<dd>ミリメートル（millimeters）</dd>
<dd><code>10mm</code> = <code>1cm</code></dd>
<dt><code>in</code></dt>
<dd>インチ（inches）</dd>
<dd><code>1in</code> = <code>2.54cm</code></dd>
<dt><code>pt</code></dt>
<dd>ポイント（points）</dd>
<dd><code>1pt</code> = <code>1/72in</code> = <code>0.3528mm</code></dd>
<dt><code>pc</code></dt>
<dd>パイカ（picas）</dd>
<dd><code>1pc</code> = <code>12pt</code></dd>
</dl>
<p>相対単位による指定は別のサイズのプロパティに対して相対的なサイズを与え、異なる媒体でも調整されるのに対して、絶対単位による指定は UA によっては相対的な指定として解釈されたり、ディスプレイ上や印刷などの出力メディアに大きく依存するため、相対的な単位よりも使い難いものです。ページ内容とフォントのサイズには、絶対単位の指定を避けて、<code>em</code> か パーセンテージ値（<code>%</code>）を使うことをお奨めします。</p>
<h4>単位は省略できない</h4>
<p><abbr title="(eXtensible) HyperText Markup Language">(X)HTML</abbr> の属性値と違って、CSS では「<code>0</code>」を指定する場合を除き、必ず単位を伴って指定する必要があります。単位をつけなければ、<a href="../../others/data/user_agent"><abbr title="User Agent">UA</abbr></a> の標準準拠（standard）モードと後方互換（quirk）モードに依っては誤記とみなされ、その指定が無効とされたり、勝手に &quot;<code>px</code>&quot; の単位識別子を補って拡大解釈することもあるので注意してください。また、単位を省略することはできませんが、絶対値が1未満の場合は頭についている「<code>0</code>」を省いて記述することができます。たとえば、&quot;<code>0.5em</code>&quot; は &quot;<code>.5em</code>&quot; と書くことができます。</p>
<dl class="links">
<dt>関連</dt>
<dd><a href="../../others/data/doctype_switching">!DOCTYPE スイッチ</a></dd>
</dl>
<h4>リキッドレイアウトを想定して</h4>
<p>ユーザー（観覧者）のユーザビリティ（usability）・アクセシビリティ（accessibility）の点からできることならサイト設計時には、文字サイズ等も含めて絶対単位の指定のみを想定したデザインではなく、ディスプレイの解像度,、及び表示域のサイズに依存することのない可変的な<strong>リキッドレイアウト</strong>を採用することを考慮したいものです。たとえば文字サイズを指定する場合、Macintosh版・Windows版を問はず Internet Explorer では制作者側が絶対単位、または <code>px</code> の単位識別子でフォントサイズを指定している場合、ユーザー側ではそのフォントサイズから変更することができません（Windows版Internet Explorer 7 には一応ズーム機能あり）。これに対して Safari, Firefox, Opera の最新バージョンでは指定された文字の大きさが絶対単位の指定であろうが相対単位の指定であろうが関係なくユーザ側でフォントサイズを任意に調節することが可能です。</p>
<p>Internet Explorer での観覧しか想定していない・できていないようなフローズンレイアウトのウェブページをユーザー側でフォントサイズを任意に調節できる UA で観覧すると、フォントサイズを一段階大きくすれば、<a href="../display_position/position"><code>position</code>プロパティ</a>で絶対配置を指定されている要素同士が重なったりして文字が読めなくなったり、ボックスの領域から内容がはみ出してデザインが崩れたりと、そのページの内容自体に何が書かれてあったのかがわからなくなってしまうような困ったデザインがよくあります。そんなことにならないためにも、サイト設計には（できることなら）リキッドレイアウトを想定して &quot;<code>em</code>&quot; やパーセンテージ値といったユーザー側で調節に融通の利く単位を利用しましょう。</p>
<h2 id="percentage">パーセンテージ値</h2>
<dl>
<dt><code>%</code></dt>
<dd>パーセンテージ（<code>%</code>）による割合</dd>
</dl>
<p>パーセンテージ値（割合）は、他の値との相対的な値を実数値の後にパーセンテージ（<code>%</code>）をつけて指定します。どの値を参照するか（基準値）は各プロパティによって異なります。たとえば、<a href="../font/font-size"><code>font-size</code>プロパティ</a>の場合は、<code>p</code>要素に &quot;<code>p { font-size : 20px ; }</code>&quot; とあって、<code>p</code>要素内にある子要素の <code>strong</code>要素に &quot;<code>p strong { font-size: 80% ; }</code>&quot; の指定がある場合、この <code>p</code>要素内にある <code>strong</code>要素内のフォントサイズは親要素である <code>p</code>要素の &quot;<code>20px</code>&quot; を基準値として参照し、&quot;<code>16px</code>&quot; と換算されます。CSS2 からは包含ブロックの概念が加わり、パーセンテージ値が参照する値はとてもややこしいため、ここでは詳しい説明を省くので、各プロパティのパーセンテージ値の項を参照ください。</p>
<h2 id="color">色（color）</h2>
<p>(X)HTML における文字や背景の色には 16進数<a href="../../others/color/rgb">RGB値</a>、または<a href="../../others/color/color_names">カラーネーム</a>を指定することができましたが、CSS では、さらに4つの色の指定方法が加わり、以下の6通りの指定が可能です。</p>
<dl>
<dt><code>#rrggbb</code></dt>
<dd>ハッシュ（<code>#</code>）に続いて、各RGB値を16進数で2桁づつ、計6桁で表記。</dd>
<dt>カラーネーム（色名）</dt>
<dd>カラーネームは16進数RGB値とサブセットになっており、&quot;<code>aqua</code>, <code>black</code>, <code>blue</code>, <code>fuchsia</code>, <code>gray</code>, <code>green</code>, <code>lime</code>, <code>maroon</code>, <code>navy</code>, <code>olive</code>, <code>orange</code>, <code>purple</code>, <code>red</code>, <code>silver</code>, <code>teal</code>, <code>white</code>, <code>yellow</code>&quot; の17色のいずれかのキーワードを指定して表記。</dd>
<dd><code>white</code> は <code>#ffffff</code> と等価</dd>
<dt><code>#rgb</code></dt>
<dd>ハッシュ（<code>#</code>）に続いて、16進数RGB値の1-2桁が同じ数値の場合に、その1桁を省略して指定する表記。</dd>
<dd><code>#fff</code> は <code>#ffffff</code> と等価</dd>
<dt><code>rgb(r%, g%, b%)</code></dt>
<dd><code>rgb()</code> の括弧内に r(赤),g(緑),b(青)それぞれをコンマ（<code>,</code>）で区切って1-100% の割合で指定する表記。</dd>
<dd><code>rgb(100%, 100%, 100%)</code> は <code>#ffffff</code> と等価</dd>
<dt><code>rgb(r, g, b)</code></dt>
<dd><code>rgb()</code> の括弧内に r(赤),g(緑),b(青)それぞれをコンマ（<code>,</code>）で区切って、0-255の色の段階を数値で指定する表記。</dd>
<dd><code>rgb(255, 255, 255)</code> は <code>#ffffff</code> と等価</dd>
<dt>システムカラー</dt>
<dd>ユーザーのシステムの<abbr title="Graphical User Interface">GUI</abbr>環境に合せた色を指定して表記。</dd>
<dd>古い UA の多くはシステムカラーのキーワードによる指定を不明な色として解釈し、次世代仕様の CSS3 ではシステムカラーは非推奨になっているため、使用は避けた方が無難です。詳しい説明は省きます。</dd>
</dl>
<h2 id="URI">URI（Uniform Resource Identifier）</h2>
<p><code>url()</code> の括弧内にリソースの所在となる <abbr title="Uniform Resource Identifier">URI</abbr> を記します。括弧の直ぐ内側には自由に空白類文字を挿入でき、URI はダブルクォーテーション（<code>&quot;</code>）、もしくはシングルクォーテーション（<code>'</code>）の引用符で括ることもできます。つまり、<code>url(URI)</code>, <code>url( URI )</code>, <code>url(&quot;URI&quot;)</code>, <code>url( &quot;URI&quot; )</code>, <code>url('URI')</code>, <code>url( 'URI' )</code> などのように書くことができます。ただし、引用符で括られていない URI に各種括弧やコンマ（<code>,</code>）、空白類文字、シングルクォーテーション（<code>'</code>），ダブルクォーテーション（<code>&quot;</code>）を含む場合は、バックスラッシュ（<code style="font-family:Courier New;">\</code>）でエスケープせねばなりません。</p>
<p>URI は絶対URI, 相対URI のどちらでも指定可能で、<code>style</code>属性, <code>style</code>要素内に記述した場合は当該文書が基本URI となり当該文書から見たリソースとの位置関係を示す相対URI を指定し、外部から参照する CSSファイルに記述した場合は、その CSSファイル自体が基本 URI となり、CSSファイルから見たリソースとの位置関係を示す相対URI を指定します。</p>
<pre>
background-image : <em>url(img/sample.jpg)</em>       ;
content          : <em>url(img/sample.gif)</em>       ;
cursor           : <em>url(img/sample.cur)</em>, text ;
</pre>
<script type="text/javascript" src="/script/adsense2"></script>
<ul class="link">
<li class="prev"><a href="http://w3g.jp/css/guide/at_rule" rel="prev" accesskey="P">@規則（アットルール）</a><kbd>P</kbd></li>
<li class="gotop"><a href="#skip">Go to top</a></li>
<li class="next"><kbd>N</kbd><a href="http://w3g.jp/css/guide/inheritance" rel="next" accesskey="N">継承（Inheritance）</a></li>
</ul>
<dl id="information">
<dt>現在位置</dt>
<dd id="location"><ol>
<li class="first"><a href="http://w3g.jp/"><abbr title="World Wide Web Guide">W3G</abbr></a></li>
<li><a href="http://w3g.jp/css/">CSS</a></li>
<li><a href="http://w3g.jp/css/guide/">前提知識</a></li>
<li>CSSの単位</li>
</ol></dd>
<dt>ナビゲーション</dt>
<dd id="nav"><ul><li><a href="/xhtml/">XHTML</a></li><li><a href="/css/" class="selected">CSS</a></li><li><a href="/javascript/">JavaScript</a></li><li><a href="/webstandards/">Web標準</a></li><li><a href="/seo/">SEO</a></li><li><a href="/others/">Others</a></li><li><a href="/blog/">Blog</a></li></ul><address><a href="http://w3g.jp/">World Wide Web Guide</a></address></dd>
<dt class="status">ステータス情報</dt>
<dd><dl>
<dt>作者</dt><dd><a href="/author">上田 遼</a></dd>
<dt>公開</dt><dd><span class="date">2006-01-29T23:34:42+09:00</span></dd>
<dt>更新</dt><dd><span class="date">2008-12-29T04:30:36+09:00</span></dd>
<dt><abbr title="Uniform Resource Identifier">URI</abbr></dt><dd><code class="URI">http://w3g.jp/css/guide/units</code></dd>
</dl></dd>
<dt>検索</dt>
<dd id="search">
<form action="/srch/msearch.cgi" accept-charset="utf-8"><p>
<input type="text" size="35" name="query" value="" tabindex="1" accesskey="I" />
<kbd>I</kbd>
<input type="submit" value="Search" tabindex="2" accesskey="S" />
<kbd>S</kbd>
<input type="hidden" name="hint" value="ひらがな" />
<input type="hidden" name="index" value="" />
<input type="hidden" name="config" value="" />
</p></form>
</dd>
</dl>
<p class="promotion">直近の制作実績等：<a href="http://www.ohs.ac.jp/">大阪人間科学大学</a> <strong>New!</strong> / <a href="http://www.kun-ei.ac.jp/">大阪薫英女子短期大学</a> <strong>New!</strong> / <a href="https://www.816photo.jp/okuni/">セキスイハイム みんなのお国じまん</a> <strong>New!</strong></p>
<script type="text/javascript" src="/script/count" charset="utf-8"></script>
<script type="text/javascript">
var bid = 3;
var title = 'W3G'
var oid = '201';
var at = 'entry';
</script>
<script type="text/javascript" src="http://w3g.jp/tracking.js"></script>
<noscript>
<img src="http://w3g.jp/tracking/access.php?bid=3&amp;oid=201&amp;at=entry&amp;title=W3G" width="1" height="1" alt="" />
</noscript>
</body>
</html>
