---
title: "パーセンテージ・PX計算 - パーセンテージとピクセルを相互変換 | Web ToolBox"
description: 親要素のサイズを基準に、パーセンテージとピクセルを相互に換算するツールです。CSSのwidthやheightで使う相対値と固定値を行き来しながら、レイアウトの値を確認できます。
canonical_url: "https://web-toolbox.dev/tools/percentage-px-calculator"
meta:
  author: K
  "og:description": 親要素のサイズを基準に、パーセンテージとピクセルを相互に換算するツールです。CSSのwidthやheightで使う相対値と固定値を行き来しながら、レイアウトの値を確認できます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/percentage-px-calculator-d85b94bd.png"
  "og:image:alt": パーセンテージ・PX計算
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "パーセンテージ・PX計算 - パーセンテージとピクセルを相互変換 | Web ToolBox"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **パーセンテージ・PX計算**

親要素を基準にパーセンテージとPXを変換

**親要素のサイズ (px)**

**パーセンテージ (%)**

**PX値 (px)**

どちらかを編集すると、もう片方が更新されます

(50 ÷ 100) × 1000px = 500px

## **よく使う値**

親要素サイズ 1000px

<dl>

<dt>5%</dt>
<dd>**50px**</dd>

<dt>10%</dt>
<dd>**100px**</dd>

<dt>15%</dt>
<dd>**150px**</dd>

<dt>20%</dt>
<dd>**200px**</dd>

<dt>25%</dt>
<dd>**250px**</dd>

<dt>33.33%</dt>
<dd>**333.3px**</dd>

<dt>50%</dt>
<dd>**500px**</dd>

<dt>66.67%</dt>
<dd>**666.7px**</dd>

<dt>75%</dt>
<dd>**750px**</dd>

<dt>80%</dt>
<dd>**800px**</dd>

<dt>90%</dt>
<dd>**900px**</dd>

<dt>100%</dt>
<dd>**1000px**</dd>

</dl>

## パーセンテージ・PX計算ツールとは？

親要素のサイズを基準に、パーセンテージとピクセルを相互に換算するツールです。`**50%**`が何pxになるか、`**320px**`が何%にあたるかを同じ画面で確認できます。

CSSのwidthやheightで相対値と固定値を行き来するときや、デザインデータのpx値を%に置き換えるときに使います。

## 使い方

1. 親要素のサイズを入力するか、よく使うサイズから選びます。
2. パーセンテージかPX値のどちらかに値を入力します。
3. もう片方の値と計算式を確認します。

親要素のサイズを変えると、最後に編集した値をもう片方の単位に換算し直します。

## 主な設定項目

### 親要素のサイズ

換算の基準になるサイズです。コンテナの幅や、基準にしたいブロックの幅を入れます。

### パーセンテージとPX値

どちらかを編集すると、もう片方が自動で更新されます。親要素が`**1000px**`のとき、`**50%**`と入力すると`**500px**`が表示されます。

## 活用シーン

- デザインデータのpx値をCSSの%に置き換えたいとき
- 指定済みの%が実寸で何pxになるか確認したいとき
- 固定幅の要素を相対幅に変えるとき

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/percentage-px-calculator#webpage","@type":"WebPage","description":"親要素のサイズを基準に、パーセンテージとピクセルを相互に換算するツールです。CSSのwidthやheightで使う相対値と固定値を行き来しながら、レイアウトの値を確認できます。","name":"パーセンテージ・PX計算 - パーセンテージとピクセルを相互変換","url":"https://web-toolbox.dev/tools/percentage-px-calculator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/percentage-px-calculator"]}]},{"@id":"https://web-toolbox.dev/tools/percentage-px-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"親要素のサイズを基準に、パーセンテージとピクセルを相互に換算するツールです。CSSのwidthやheightで使う相対値と固定値を行き来しながら、レイアウトの値を確認できます。","name":"パーセンテージ・PX計算 - パーセンテージとピクセルを相互変換","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.