CSSでパーセントをピクセルに変換する方法：ステップバイステップ

Webページのスタイリングに10分以上費やしたことがあるなら、誰もがぶつかるCSSの古典的な壁に直面したことがあるでしょう。それは、50% と指定したdivがピクセル単位で実際にはどれくらいの幅になるのかを正確に把握しようとすることです。

CSSを使っていると、まるで「小麦粉を少々」「水を適量」といった曖昧な分量しか書かれていないレシピに従おうとしているかのように感じられることがあります。正確な数値が欲しいのに、CSSは相対的な割合しか教えてくれません。

朗報があります。パーセンテージをピクセルに変換するのは黒魔術ではありません。実際には単なる基本的な算数であり、CSSパーセンテージの「黄金律」を1つ理解してしまえば、レイアウトの寸法に頭を悩ませることは二度となくなります。

ステップバイステップで順を追って解説していきましょう。

計算を始める前に、CSSがどのように考えているかを理解する必要があります。

壁に大きな空の額縁が掛かっているところを想像してみてください。その額縁の幅は1000ピクセルです。写真をその空間の 50% を占めるように指定すると、額縁の半分（500ピクセル）の大きさになります。

CSSでは、この額縁のことを親コンテナ（親要素）と呼びます。CSSにおけるパーセンテージの値は単独で独立して存在するものではありません。それは常に、例外なく、直近の親要素に対する割合（パーセンテージ）です。

親コンテナのサイズがわからなければ、子要素のピクセル値を計算することはできません。仕組みは実にシンプルです！

親コンテナのピクセル単位の幅（または高さ）がわかれば、計算は非常に簡単です。公式は以下の通りです。

(親要素のピクセルサイズ × パーセンテージ) ÷ 100 = ターゲットのピクセル数

例えば、親の <div> の幅が800pxで、子要素の <div> の幅を75%にしたいとします。

子コンテナは正確に600ピクセルの幅で描画されます。

実際のシナリオを見てみましょう。ラッパー（親枠）の中にメインコンテンツエリアとサイドバーが横並びで配置されている、クラシックなブログレイアウトを作成しているとします。

HTMLは以下の通りです。

<div class="wrapper">
  <div class="main-content">This is the article.</div>
  <div class="sidebar">This is the sidebar.</div>
</div>

CSSは以下の通りです。

.wrapper {
  width: 1200px; 
}

.main-content {
  width: 70%;
}

.sidebar {
  width: 30%;
}

ステップ 1: 親要素を特定する

.main-content と .sidebar の両方の親要素は .wrapper です。

ステップ 2: 親要素のピクセル値を確認する

CSSを確認すると、.wrapper は 1200px と直接指定されています。

ステップ 3: 計算する

ブラウザのデベロッパーツールでそれらの要素を検証してみると、正確に840pxと360pxになっていることがわかります。

完璧な世界であれば、この計算だけで十分です。しかし、CSSには計算を狂わせる厄介な仕組みが存在します。それがボックスモデル（box model）です。

デフォルトでは、ボックスの幅を50%に指定し、さらに20pxのパディング（padding）を追加すると、CSSはその50%に対して20pxを加算します。その結果、計算していたよりもボックスの幅が広くなり、レイアウト全体が崩れて次の行に落ちてしまうことがあります。

解決策: 常に box-sizing: border-box; を使用しましょう。

* {
  box-sizing: border-box;
}

border-box はブラウザに対して「50%と言ったら、パディングとボーダーを含めた合計で50%という意味だ。よしなに計算してくれ」と指示しているようなものです。これにより、ピクセル変換の正確性が保たれ、レイアウトの崩れを防ぐことができます。

注：マージン（margin）はボックスの外側に適用されるため、別途考慮する必要があります！

CSSを書くたびに電卓を取り出したくありませんか？標準的な親コンテナ幅に基づく、よく使われるパーセンテージの早見表をご活用ください。

パーセンテージをピクセルに変換することは、結局のところ親コンテナを突き止める作業にすぎません。「額縁」の大きさがわかってしまえば、その中のコンテンツのサイズ設定は非常に簡単になります。

また、全く逆の作業（固定のピクセル値からパーセンテージを計算する）が必要になった場合は、自分で計算する手間を完全に省いて、便利なピクセルからパーセントへのコンバーター（ピクセルからパーセンテージへの変換ツール）を使うこともできます。

Leave feedback about this Cancel Reply