CSSでのパーセント指定まとめ

(サーバーやドメイン代払っているのに、一年以上ぶりのエントリーという・・・)

一応、プログラマと自称している自分ですが、仕事ではむしろCSSを書くことのほうが多かったりします。
で、CSSを扱っていてときどきよくわからなくなるのが、CSSで出てくるパーセント(パーセンテージ)はいったい何を基準としたものなのかと。
だいたい想定とあってはいるのですが、たまに想定外の動きをすることも。
というわけでまとめてみました。

色系

RGB値

説明：色をRGB表記で指定する
範囲：0～100
指定方法：rgb(R%, G%, B%)
例：color:rgb(50%, 10%, 30%)
参考：スタイルシート［CSS］/CSSの基本/CSSの色指定 – TAG index Webサイト

“color”や”background-color”などの色の指定のプロパティで利用する。
それぞれ左から赤、緑、青の値を意味し、0%は0、100%はff(255)をあらわす。

HSL値

説明：色をHSL表記で指定する
範囲：0～100
指定方法：hsl(H, S%, L%)
例：color:hsl(120, 50%, 50%)
参考：CSS3 で追加された HSL の使い方 | TM Life

CSS3から追加した色の指定方法。
RGB値と同じく、”color”や”background-color”などの色の指定のプロパティで利用する。
左から、色相、彩度、輝度を表し、彩度と輝度を%で指定する。色相は色みを角度であらわす(なので、範囲は0～360)。
jQueryにおいて、HSL値で色を指定すると、rgb指定に変換されてしまうっぽい。

テキスト

font-size

説明：フォントのサイズ(大きさ)を指定する
範囲：0以上
指定方法：X%
例：font-size:80%
参考：font-size – CSS | MDN
参考：font-sizeのパーセント表記一覧 – Webtech Walker

親要素のフォントサイズに対する割合をあらわす。
100%なら、親要素のフォントサイズと同じ。0%なら、何も表示されない。100%より大きければ、親要素のフォントサイズより大きくなる

vertical-align

説明：縦方向の揃え位置を指定する
範囲：どんな数値でもOK
指定方法：X%
例：vertical-align:80%
参考：vertical-align – CSS | MDN

その要素のline-heightプロパティの値に対する割合を表すよう。
baseline(初期値)を指定した時の場所を基準に、正の値なら上に、負の値なら下に移動する。
line-heightが100%(もしくは1.0)で、親要素と同じフォントサイズであれば、-100%の時に一段下に、100%の時に一段上になる。

line-height

説明：行の高さを指定する
範囲：0以上
指定方法：X%
例：line-height:80%
参考：line-height – CSS | MDN
参考：line-height の値には単位なしが良いとされる理由 – lucky bag

フォントサイズに対する割合をあらわす。
100%とすると、行の高さが、フォントサイズと同じ高さになる。
なお、数値のみの表記にしてもフォントサイズと同じくフォントサイズに対する割合という意味になるが(1.0は100%と同じ)、子要素への影響が違ってくる。
パーセント表記だと子要素の行の高さは親要素の行の高さと同じになり、数値のみの表記だと子要素にも適用され、子要素のフォントサイズに対する割合となる。
例えば、親要素のフォントサイズが20px、子要素のフォントサイズが15pxのとき、親要素のline-heightを100%と指定すると子要素の行の高さは20pxになり、親要素のline-heightを1.0と指定すると子要素の行の高さは15pxになる。

text-indent

説明：一行目のインデントの幅を指定する
範囲：どんな数値でもOK
指定方法：X%
例：text-indent:80%
参考：text-indent－スタイルシートリファレンス

親要素の幅(width)に対する割合をあらわす。今回調べるまで、自分自身の幅と勘違いしてました。
このtext-indentを100%と指定した場合の利用方法として、CSSでテキストを画像に置き換える場合に使うことがある。
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス
つまり、text-indentを100%に、overflowをhiddenに、white-spaceをnowrapと指定してbackground-imageを指定すると、テキストが表示されず、画像のみが表示される。昔はtext-indentに-9999pxと指定する方法がよく利用されていたようなのですが(うちの会社のサイトにもそういう指定があります・・・)、それだとパフォーマンスが悪いということで編み出されたそうです。

横幅と高さ

width

min-width

max-width

説明：幅を指定する(min-がつくと最小幅、max-がつくと最大幅)。
範囲：0以上
指定方法：X%
例：width:80%;
参考：width – CSS | MDN

親要素の横幅(width)に対する割合をあらわす。
最近流行りのレスポンシブウェブデザインでは、widthをパーセント指定で表記することが多い(画面サイズと横幅の比率を同じにするため)。
昔の自分は、imgタグだと実際の画像サイズに対する割合だと勘違いしてたことがありますが、そんなことはありません(width属性も同じ)。
なお、親要素とぴったしあわせたいとwidthを100%と指定しても何か表示がおかしい場合、borderやpaddingの指定がないかチェックしましょう。
width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com

height

min-height

max-height

説明：幅を指定する(min-がつくと最小幅、max-がつくと最大幅)。
範囲：0以上
指定方法：X%
例：height:80%;
参考：height – CSS | MDN
参考：分かりにくいCSS height のパーセント設定のまとめ – A Memorandum
参考：height: n%;の正しい仕様 – Web標準普及プロジェクト

親要素の高さ(height)に対する割合をあらわす。
ブラウザの表示枠ぴったしにレイアウトしたい場合は、bodyすぐ下の階層のタグのheightを100%にするだけでなく、html要素とbody要素のheightも100%にする必要がある。
CSSの「height:100%」について – webデザイナーのナナメガキ

余白

margin

説明：指定する要素の外側の余白を指定する
範囲：どんな数値でもOK
指定方法：X%
例：margin-left:-10%;
参考：margin – CSS | MDN
参考：margin,paddingにパーセント指定 – ねとめもー

親要素の横幅(width)に対する割合をあらわす。
注意したいのが、上下マージンも高さ(height)ではなく、横幅に対する割合をあらわすということ。
なお、marginはマイナスの指定も可能。

padding

説明：指定する要素の内側の余白を指定する
範囲：0以上
指定方法：X%
例：margin-left:10%;
参考：padding – CSS | MDN
参考：margin,paddingにパーセント指定 – ねとめもー

親要素の横幅(width)に対する割合をあらわす。
marginと同じで、上下パディングも高さ(height)ではなく、横幅に対する割合をあらわす。

ポジション

left

right

top

bottom

説明：左右からの配置位置を指定する
範囲：どんな数値でもOK
指定方法：X%
例：left:10%;
参考：top – CSS | MDN
参考：相対的な位置を指定する | 目的別 CSSリファレンス | Tagland [HTML & Stylesheet解説]

基準となるボックスの幅や高さに対する割合をあらわす。
50%にすると、要素の左上座標位置が、基準となるボックスの真ん中に表示される。
ボックスを上下左右中央位置に表示させたい場合は、leftに50%、topに50%と指定し、margin-leftにその要素のボーダーとパディングを含む幅を2で割った値のマイナス値を、margin-topにその要素のボーダーとパディングを含む高さを2で割った値のマイナス値をいれると上下中央配置になる。
ボックスを上下左右画面中央に – CSS HappyLife

背景

background-position

説明：背景画像の表示位置を指定する
範囲：どんな数値でもOK
指定方法：X% Y%
例：background-position:-10% 20%;
参考：background-position – CSS | MDN

この指定は、『何かの割合』と、一言であらわすのは難しいです。
一見、ボックスの幅や高さの割合かとおもいきや、指定を”100% 100%”にすると、ボックスの外側の右下というわけではなく、ボックス内側の右下に表示されるからだ。
“50% 50%”だと、上下左右中央配置となる(ポジションのtopやleftでもこういう仕様だったら、上下中央配置が簡単だったのに！)。
しいていうなら、『ボックスの幅(padding含む。背景領域と同じ)から背景画像の幅を引いた値』の割合らわす。といったところ。
なお、background-positionには、横と縦を別々に指定する方法はないので注意。
後、一つだけの指定だと横方向のみ適用され、縦方向は50%とした時と同じ位置になります。ただし、初期値(何も指定していない時)は”0% 0%”と同じ位置です。

background-size

説明：背景画像の大きさを指定する
範囲：0以上
指定方法：X% Y%
例：background-size:50% 60%;
参考：background-size – CSS | MDN

CSS3で追加されたプロパティ。
背景領域に対する背景画像の幅・高さに対する割合をあらわす。
“100% 100%”とすると、ボックスと同じサイズの背景画像となる。
実際の背景画像ファイルの大きさに対する割合ではないので注意。

ボーダー

border-radius

説明：角丸を指定する
範囲：0以上
指定方法：X% / Y%(等)
例：border-radius:50% / 50%;
参考：border-radius – CSS | MDN

ボーダーボックスの幅と高さに対する割合の半径の楕円と同じ形の弧をあらわす。
/をつけることによって、水平方向と垂直方向の指定もできる。
一つだけの指定の場合は、水平方向・垂直方向とも同じになるようだけれども、その場合、50%以降は変化なし。
キレイな円を描きたいなら、widthとheightを同じにし、border-radiusを50%にすると円になる。
CSSで角丸を表現する方法をちょっと詳しく書いてみる │ Design Spice
なお、Androidの一部端末ではパーセント指定ができないそうなので注意。
Androidの一部端末では、border-radiusで％(パーセント)指定ができない – console.lealog();

ボーダー関連だと他に、”border-image-slice”や”border-image-width”というプロパティもパーセント指定できるようなのですが、自分がよく分かってないうえに対応ブラウザも少ないみたいなのでパスします。
参考：border-image-slice – CSS | MDN
参考：border-image-width – CSS | MDN

変形

transform-origin

説明：2D変形、または3D変形の原点を指定する
範囲：どんな数値でもOK
指定方法：X% Y%
例：transform-origin:10% 20%;
参考：transform-origin – CSS | MDN

変形を適用する要素の左上位置を0% 0%、右下位置が100% 100%となる。
例えば要素をtransform:rotate(回転角度)を使って回転させるとき、transform-originが”0% 0%”なら左上を軸の基準として要素が回転し、”0% 100%”なら左下を軸の基準として要素が回転する。

試しに、jsFiddleで動作サンプルを作ってみました。
説明不足なんで使い方は分かりにくいかもしれませんが、いろいろいじって確かめてみてください。