CSS内のpxをemに変換するパイソンのコード

2026.05.13備忘録

CSSでpxの表記をemに直したい時に使用するパイソンのコードです。
・PC画面にて1em=16pxで計算しています。
・@mediaはpxのままです。
・1pxはそのまま1pxです。

import re

# 変換対象CSSファイル
input_file = "style.css"
output_file = "style_em.css"

# 1em = 16px
BASE_FONT_SIZE = 16


def convert_px_to_em(css_text):
    """
    px → em 変換
    ※ 1px は変換しない
    """

    def replacer(match):
        px_str = match.group(1)
        px_value = float(px_str)

        # 1px はそのまま
        if px_value == 1:
            return f"{px_str}px"

        em_value = px_value / BASE_FONT_SIZE

        # 整数なら小数点除去
        if em_value.is_integer():
            return f"{int(em_value)}em"

        return f"{round(em_value, 4)}em"

    return re.sub(
        r'(-?\d*\.?\d+)px',
        replacer,
        css_text
    )


with open(input_file, "r", encoding="utf-8") as f:
    css = f.read()


# -----------------------------
# @media を一時退避
# -----------------------------
media_blocks = []


def save_media(match):
    media_blocks.append(match.group(0))
    return f"___MEDIA_BLOCK_{len(media_blocks)-1}___"


css_without_media = re.sub(
    r'@media[^{]+\{(?:[^{}]*|\{[^{}]*\})*\}',
    save_media,
    css,
    flags=re.DOTALL
)

# -----------------------------
# 通常部分のみ変換
# -----------------------------
converted_css = convert_px_to_em(css_without_media)

# -----------------------------
# @media を戻す
# -----------------------------
for i, block in enumerate(media_blocks):
    converted_css = converted_css.replace(
        f"___MEDIA_BLOCK_{i}___",
        block
    )

# 出力
with open(output_file, "w", encoding="utf-8") as f:
    f.write(converted_css)

print(f"変換完了: {output_file}")

実行する場合は、同じディレクトリ内に「style.css」という名前のファイルにして
コマンドラインにて「python 実行ファイル名」で実行すると「style_em.css」という名前で出力されます。

Python