フォントサイズ変換ツール
px・pt・em・rem・%のフォントサイズを相互変換します。
px
px
16
pt
12.00
em / rem
1.0000
%
100.00
プレビュー:
あいうえお ABC 123
フォントサイズ変換の使い方
- 基準サイズ（root font-size）を入力（通常16px）
- 変換したいpx値を入力
- pt・em・rem・%の値が自動計算される
- プレビューで実際の表示サイズを確認
よくある質問
Q. px・em・rem・%の違いは？
A. px：絶対単位（固定サイズ）、em：親要素のfont-size基準（相対）、rem：rootのfont-size基準（相対）、%：親要素の%。モダンCSSではrem推奨、ユーザーのブラウザ設定で拡大縮小が反映され、アクセシビリティが高い。pxはレガシー、em はコンポーネント単位での相対サイズに活用。
Q. 適切な本文フォントサイズは？
A. ウェブ本文：14〜16px（デスクトップ）、16〜18px（モバイル）が標準。見出しh1：28〜36px、h2：24〜28px、h3：20〜24px。小さすぎる12px以下はアクセシビリティNG、大きすぎる20px以上は本文には不適切。ユーザビリティ重視で16pxが黄金サイズです。
Q. ptとpxの違いは？
A. pt（ポイント）：印刷物単位（1pt = 1/72インチ）、px（ピクセル）：画面単位。1pt ≒ 1.333px（96dpi環境）。印刷物はpt、ウェブはpxが原則。Microsoft Wordのフォントサイズはptなので混乱しやすい、ウェブ制作ではpxやrem統一が推奨です。
Q. レスポンシブ対応のコツは？
A. clamp()関数活用：`font-size: clamp(16px, 2vw, 24px)` でモバイル16px・デスクトップ最大24pxの流動的サイズを実現。メディアクエリと組合せ、rem基準でルートサイズ調整も効果的。TailwindCSS・CSS Modules等のフレームワークで標準化するのが実務的です。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます
関連ツール
🎨🖥️🌈🌈🖼️🎨🖌️🔤📱🔖👁️📐
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。