「PythonでWeb制作を加速！HTMLやCSSの生成を自動化する簡単なスクリプト例」

Web制作では、HTMLやCSSのコードを手作業で書く時間がかかることがあります。Pythonを使えば、テンプレートの生成やコードの自動作成を簡単に実現でき、作業効率を大幅に向上させることが可能です。本記事では、Pythonを使ってHTMLやCSSを生成するシンプルなスクリプト例を紹介します。

1. なぜPythonでHTMLやCSSの生成をするのか？
2. PythonでHTMLを生成するスクリプト例
3. CSSを自動生成するスクリプト例
4. HTMLとCSSを組み合わせて自動生成
5. 応用：Jinja2を使ったテンプレートエンジン
まとめ

1. なぜPythonでHTMLやCSSの生成をするのか？

メリット

大量のコードを一括生成：テンプレート化された構造を自動で作成可能。
ヒューマンエラーの削減：手入力ミスを防ぎ、正確なコードを出力。
作業時間の短縮：ルーチン作業をPythonに任せて、時間を他の重要な作業に割ける。

適用例

HTMLテンプレートの動的生成（ページの骨組み作成）。
CSSのパターン化されたスタイル生成（色やレイアウトの一貫性維持）。
簡易CMSや管理画面の構築。

2. PythonでHTMLを生成するスクリプト例

基本のHTMLテンプレートを生成

以下は、Pythonを使ってHTMLファイルを生成する簡単なスクリプトです。

# HTML生成スクリプト
def generate_html_file(filename, title, content):
    # HTMLテンプレート
    html_template = f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
</head>
<body>
    <h1>{title}</h1>
    <p>{content}</p>
</body>
</html>"""

    # ファイルを生成
    with open(filename, 'w', encoding='utf-8') as file:
        file.write(html_template)
    print(f"{filename} が生成されました！")

# 実行例
generate_html_file("example.html", "自動生成されたページ", "このページはPythonによって生成されました。")

出力結果（example.html）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自動生成されたページ</title>
</head>
<body>
    <h1>自動生成されたページ</h1>
    <p>このページはPythonによって生成されました。</p>
</body>
</html>

3. CSSを自動生成するスクリプト例

基本的なCSSファイルの生成

次に、Pythonを使ってCSSファイルを生成するスクリプトを紹介します。

# CSS生成スクリプト
def generate_css_file(filename, styles):
    # スタイルを文字列として作成
    css_content = "\n".join([f"{selector} {{ {properties} }}" for selector, properties in styles.items()])

    # ファイルを生成
    with open(filename, 'w', encoding='utf-8') as file:
        file.write(css_content)
    print(f"{filename} が生成されました！")

# 実行例
styles = {
    "body": "background-color: #f4f4f4; color: #333; font-family: Arial, sans-serif;",
    "h1": "color: #2c3e50; text-align: center;",
    "p": "line-height: 1.6;"
}

generate_css_file("style.css", styles)

出力結果（style.css）:

cssコードをコピーするbody { background-color: #f4f4f4; color: #333; font-family: Arial, sans-serif; }
h1 { color: #2c3e50; text-align: center; }
p { line-height: 1.6; }

4. HTMLとCSSを組み合わせて自動生成

HTMLとCSSを同時に生成してリンクする

以下は、HTMLとCSSを一度に生成し、それらをリンクさせるスクリプト例です。

def generate_web_files(html_filename, css_filename, title, content, styles):
    # HTML生成
    html_template = f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    <link rel="stylesheet" href="{css_filename}">
</head>
<body>
    <h1>{title}</h1>
    <p>{content}</p>
</body>
</html>"""

    with open(html_filename, 'w', encoding='utf-8') as html_file:
        html_file.write(html_template)
    print(f"{html_filename} が生成されました！")

    # CSS生成
    css_content = "\n".join([f"{selector} {{ {properties} }}" for selector, properties in styles.items()])

    with open(css_filename, 'w', encoding='utf-8') as css_file:
        css_file.write(css_content)
    print(f"{css_filename} が生成されました！")

# 実行例
html_filename = "index.html"
css_filename = "styles.css"
title = "Pythonで生成されたWebページ"
content = "このWebページは自動的に作成されました。"
styles = {
    "body": "background-color: #ffffff; color: #000; font-family: Arial, sans-serif;",
    "h1": "color: #3498db; text-align: center;",
    "p": "line-height: 1.6; font-size: 16px;"
}

generate_web_files(html_filename, css_filename, title, content, styles)

出力結果（index.html）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pythonで生成されたWebページ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Pythonで生成されたWebページ</h1>
    <p>このWebページは自動的に作成されました。</p>
</body>
</html>

出力結果（styles.css）:

cssコードをコピーするbody { background-color: #ffffff; color: #000; font-family: Arial, sans-serif; }
h1 { color: #3498db; text-align: center; }
p { line-height: 1.6; font-size: 16px; }

5. 応用：Jinja2を使ったテンプレートエンジン

より高度なHTMLテンプレート生成を行いたい場合は、PythonのテンプレートエンジンであるJinja2を活用できます。Jinja2は動的なページを作成するのに便利で、変数やループ、条件分岐を使った複雑なテンプレート生成が可能です。

インストール

pip install jinja2

使用例

from jinja2 import Template

def generate_dynamic_html(output_file, title, items):
    template = Template("""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }}</title>
    </head>
    <body>
        <h1>{{ title }}</h1>
        <ul>
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
        </ul>
    </body>
    </html>
    """)
    
    rendered_html = template.render(title=title, items=items)
    with open(output_file, 'w', encoding='utf-8') as file:
        file.write(rendered_html)
    print(f"{output_file} が生成されました！")

# 実行例
generate_dynamic_html("dynamic.html", "Jinja2で生成されたページ", ["ホーム", "サービス", "お問い合わせ"])