CSSの絶対長さの単位とは？cm・mm・px・ptなどの種類と使い方を解説
CSSの絶対長さの単位（Absolute Length Units）とは
CSSにおける絶対長さの単位は、単位同士の関係が固定されており、他の値に依存しない物理的な寸法を表す単位です。印刷物のように出力先のサイズがあらかじめ分かっている場合に使用するのに適しています。
一方で、画面表示ではユーザーの環境によって実際の大きさが異なるため、Webページでは相対単位と組み合わせて使うのが一般的です。
主な絶対長さの単位一覧
| 番号 | 単位と説明 |
|---|---|
| 1 | cm センチメートル |
| 2 | mm ミリメートル |
| 3 | in インチ（1in = 96px = 2.54cm） |
| 4 | px ピクセル（1px = 1in の 1/96） |
| 5 | pt ポイント（1pt = 1in の 1/72） |
| 6 | pc パイカ（1pc = 12pt） |
単位ごとのポイント
px（ピクセル）は画面表示で最もよく使われる単位です。pt（ポイント）やcm・mm・inは主に印刷用スタイルシートでの指定に向いています。pc（パイカ）はDTP（デスクトップ出版）の分野で伝統的に使われてきた単位です。
使用例1：in（インチ）でフォントサイズを指定
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 0.3in;
}
</style>
</head>
<body>
<h1>試験案内</h1>
<p class="demo">試験会場はABCカレッジの近くです。</p>
<p class="demo2">試験は午前9時に開始します。</p>
</body>
</html>
表示結果
この例では font-size: 0.3in; により、フォントサイズが0.3インチに固定され、大きな文字として表示されています。
使用例2：cm（センチメートル）とmm（ミリメートル）を指定
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
font-size: 1cm;
}
.demo2 {
font-size: 5mm;
}
</style>
</head>
<body>
<h1>ICCランキング</h1>
<p class="demo">ICCテストランキングは11月29日に発表されました。</p>
<p class="demo2">ICC ODIランキングは11月30日に発表されました。</p>
</body>
</html>
表示結果
こちらの例では、1つ目の段落に 1cm、2つ目の段落に 5mm を指定しています。同じ10mmでも表記方法が違うだけで、実際の表示サイズは同じになります。
まとめ
絶対長さの単位は「cm」「mm」「in」「px」「pt」「pc」の6種類があり、相互の換算関係が固定されています。画面表示には px、印刷スタイルには pt や cm などを使い分けることで、意図したレイアウトを実現しやすくなります。
-
HTMLドキュメントにCSSを組み込む方法｜インライン・内部・外部の3つの書き方
HTMLドキュメントにCSSを適用するには、大きく分けて「インライン」「内部（head内への埋め込み）」「外部ファイルのリンク」の3つの方法があります。それぞれ特徴や使いどころが異なるため、目的に応じて使い分けることが重要です。 記述方法（基本構文） 各方法の基本的な構文は以下のとおりです。 /* インライン */ <element style="/*宣言*/"></element> /* 内部 */ <head> <style> /*宣言*/ </style> </head> /* 外部 */ &
-
CSSのグループセレクターとは？複数要素をまとめてスタイリングする方法
CSSのグループセレクターは、複数の要素を一度に選択し、共通のスタイルをまとめて適用するための機能です。各要素に同じスタイルを個別に宣言する必要がなくなるため、コード量を大幅に削減でき、保守性も向上します。グループセレクターの基本セレクターをグループ化するには、各セレクターをカンマ（,）で区切って記述します。これにより、リストアップされたすべての要素に対して、同じ宣言ブロック内のスタイルが一括で適用されます。構文element, element { /* 宣言 */ }それでは、具体的なコード例を見ていきましょう。例1：複数の要素に共通スタイルを