絶対単位：px、pt、cm
ピクセル、ポイント、センチメートルなどの固定された絶対単位を使う場面を学びます。
「絶対単位：px、pt、cm」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
絶対単位と相対単位
CSSの単位は、絶対単位（固定された実世界の ölç定）と相対単位（別のものを基準に拡大・縮小する単位）の2種類に分けられます。絶対単位は、デバイスに依存しない物理的な測定単位です。
px — ピクセル
ピクセル（px）は、画面で最もよく使われる絶対単位です。標準的なディスプレイでは、1px = 1デバイスピクセルです。高DPI（Retina）ディスプレイでは、CSSピクセルが複数のデバイスピクセルに対応するため、要素の見た目の大きさが維持されます。
<button class="button">10px 20px padding</button>
pt — ポイント
ポイント（pt）は印刷デザインで使われる単位で、1pt = 1/72インチです。CSSでは1pt = 4/3px（約1.33px）です。主に印刷用スタイルシートで、タイポグラフィに使用されます。
<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>
cm、mm、in — 物理単位
CSSではセンチメートル（cm）、ミリメートル（mm）、インチ（in）を使用できます。これらは印刷では適していますが、画面のDPIはさまざまなので、画面上では信頼できません。
<div class="page">A4-width page (21cm), used for print layouts</div>
画面上のpx：実用面
画面向けのWebデザインでは、pxが唯一実用的な絶対単位です。ただし、フォントサイズにpxを使うと、ユーザーがブラウザーで設定したフォントサイズの好みが上書きされるため、推奨されません。
デバイスピクセル比
最新のディスプレイにはデバイスピクセル比（DPR） > 1のものがあります。2倍のRetina画面では、1 CSSピクセルにつき2デバイスピクセルで描画されます。そのため、高DPI画像は表示サイズの2倍または3倍にする必要があります。
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />
pxを使う場面
次の用途にはpxを使用します。
- ボーダーの幅（1pxは鮮明に表示されます）
- 影と変形
- メディアクエリのブレークポイント（ただし、emベースのブレークポイントのほうが堅牢です）
- ピクセル単位での正確な制御が必要な固定UI要素
タイポグラフィでpxを使わない場面
htmlまたはbodyにfont-size: 16pxを設定すると、多くのブラウザーでユーザーのアクセシビリティ設定が上書きされます。代わりに、ブラウザーのデフォルト値を基準とするremを使用してください。
Q — 4分の1ミリメートル
q単位は1/4ミリメートルです。日本の印刷タイポグラフィで、細かな文字組みの調整に使用されます。一般的なWebデザインではほとんど使われません。
PC — パイカ
パイカ（pc）は12ポイント、つまり1/6インチに相当します。ポイントと同様にパイカも印刷用の単位で、デジタル画面ではほとんど必要ありません。
印刷用スタイルシートでの絶対単位
印刷用スタイルシートは、CSSで絶対単位を使う主な正当な用途です。物理単位を使うと、印刷されたページの紙上での寸法を正確にできます。
<div class="print-body">
<p class="page-break">Section one (page breaks after this when printed)</p>
<p>Section two</p>
</div>
クイックチェック
1/72インチに相当する絶対CSS単位はどれですか。
まとめ
絶対単位は、親要素に依存しない固定された測定値です。pxは画面で実用的な単位です。物理単位（pt、cm、in）は印刷用スタイルシートで使用されます。タイポグラフィでpxを使うとユーザーのフォントサイズ設定が上書きされるため、避けてください。代わりにremを使用します。
よくある質問
「絶対単位：px、pt、cm」レッスンは無料ですか？
はい。「絶対単位：px、pt、cm」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「絶対単位：px、pt、cm」で何を学びますか？
ピクセル、ポイント、センチメートルなどの固定された絶対単位を使う場面を学びます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「絶対単位：px、pt、cm」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 絶対単位：px、pt、cm
- 相対単位：emとrem
- ビューポート単位：vw、vh、dvh
- Min、Max、Clamp関数