CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSユニット


CSSユニット

CSSには、長さを表すためのいくつかの異なる単位があります。

多くのCSSプロパティは、、、、など width「長さ」の値を取りますmarginpaddingfont-size

長さ10pxは、、 などの長さの単位が後に続く数値です2em

px(ピクセル)を使用して、さまざまな長さの値を設定します。

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

注:番号と単位の間に空白を表示することはできません。ただし、値がの場合 0、単位は省略できます。

一部のCSSプロパティでは、負の長さが許可されます。

長さの単位には、絶対単位と相対単位の2種類があります


絶対長さ

絶対長の単位は固定されており、これらのいずれかで表される長さは、正確にそのサイズとして表示されます。

画面サイズは大きく異なるため、絶対長単位を画面で使用することはお勧めしません。ただし、印刷レイアウトなど、出力メディアがわかっている場合は使用できます。

Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

*ピクセル(px)は、表示デバイスを基準にしています。低dpiデバイスの場合、1pxはディスプレイの1デバイスピクセル(ドット)です。プリンターと高解像度画面の場合、1pxは複数のデバイスピクセルを意味します。


相対的な長さ

相対長さの単位は、別の長さプロパティを基準にした長さを指定します。相対的な長さの単位は、異なるレンダリングメディア間でより適切にスケーリングされます。

Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element

ヒント: emユニットとremユニットは、完全にスケーラブルなレイアウトを作成するのに実用的です。
*ビューポート=ブラウザのウィンドウサイズ。ビューポートの幅が50cmの場合、1vw = 0.5cmです。



ブラウザのサポート

表の数字は、長さの単位を完全にサポートする最初のブラウザバージョンを示しています。

Length Unit
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0