注目キーワード

【CSS配布】Q＆Aセクションの楽々テンプレート

プログラミング questions answers signage

概要

Q&A セクション

Q 朝ごはん何食べた？
A 目玉焼きとパンだよ。シンプルイズベストだね笑
Q 昨日は何してた？
A 映画を観てたよ！アクション映画、最高だった!

上記のような見た目のQ＆Aセクションを簡単に作成できます。

スクリプト

以下にHTMLとCSSを示します。ご利用は自由ですが、自作発言はご遠慮ください。また、本サイトURLを明記して頂きますようお願い申し上げます（テンプレートにはついています）。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q&A セクション</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="qa-container">
        <h1>Q&A セクション</h1>
        <div class="qa-item">
            <div class="question">
                <span class="q-mark">Q</span>
                朝ごはん何食べた？
            </div>
            <div class="answer">
                <span class="a-mark">A</span>
                目玉焼きとパンだよ。シンプルイズベストだね笑
            </div>
        </div>
        <!-- 追加の質問と回答 -->
        <div class="qa-item">
            <div class="question">
                <span class="q-mark">Q</span>
                昨日は何してた？
            </div>
            <div class="answer">
                <span class="a-mark">A</span>
                映画を観てたよ！アクション映画、最高だった。
            </div>
        </div>
        <div class="license">
            <a href="https://lemon-slime.com/?p=1807">https://lemon-slime.com/?p=1807</a>
        </div>
    </div>
</body>
</html>

CSS

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.qa-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #555;
    font-size: 2rem;
    margin-bottom: 30px;
}

.qa-item {
    margin-bottom: 20px;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.qa-item:last-child {
    border-bottom: none;
}

.question, .answer {
    padding: 10px 15px;
    border-radius: 6px;
    position: relative;
}

.question {
    background-color: #f0f8ff;
    color: #0366d6;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.answer {
    background-color: #e6ffe6;
    color: #2c662d;
    display: flex;
    align-items: center;
}

.license {
    text-align: center;
    font-size:12px;
}

.q-mark, .a-mark {
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
}

.q-mark {
    background-color: #0366d6;
    color: #fff;
}

.a-mark {
    background-color: #2c662d;
    color: #fff;
}

/* モバイル対応 */
@media (max-width: 600px) {
    .qa-container {
        padding: 10px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .question, .answer {
        font-size: 0.9rem;
    }
}

Python

続いて、大量にQ＆Aがあったときにそれを一括で上記のHTML＆CSSの形式に変換するPythonプログラムを示します。これはtuple形式の配列を引数とします。

import os

# 質問と回答のリスト
qa_list = [
    ("朝ごはん何食べた？", "目玉焼きとパンだよ。シンプルイズベストだね笑"),
    ("昨日は何してた？", "映画を観てたよ！アクション映画、最高だった。"),
    ("週末の予定は？", "友達とドライブかな。楽しみ！"),
]

# HTMLテンプレート
html_template = """
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q&A セクション</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="qa-container">
        <h1>Q&A セクション</h1>
        {qa_content}
    </div>
</body>
</html>
"""

# CSSスタイル
css_content = """
/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.qa-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #555;
    font-size: 2rem;
    margin-bottom: 30px;
}

.qa-item {
    margin-bottom: 20px;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.qa-item:last-child {
    border-bottom: none;
}

.question, .answer {
    padding: 10px 15px;
    border-radius: 6px;
    position: relative;
}

.question {
    background-color: #f0f8ff;
    color: #0366d6;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.answer {
    background-color: #e6ffe6;
    color: #2c662d;
    display: flex;
    align-items: center;
}

.q-mark, .a-mark {
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
}

.q-mark {
    background-color: #0366d6;
    color: #fff;
}

.a-mark {
    background-color: #2c662d;
    color: #fff;
}

/* モバイル対応 */
@media (max-width: 600px) {
    .qa-container {
        padding: 10px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .question, .answer {
        font-size: 0.9rem;
    }
}
"""

# HTMLの質問と回答部分を生成
qa_content = ""
for question, answer in qa_list:
    qa_content += f"""
        <div class="qa-item">
            <div class="question">
                <span class="q-mark">Q</span>
                {question}
            </div>
            <div class="answer">
                <span class="a-mark">A</span>
                {answer}
            </div>
        </div>
    """

# 完成したHTMLを作成
html_output = html_template.format(qa_content=qa_content)

# ファイル出力
output_dir = "output"
os.makedirs(output_dir, exist_ok=True)

with open(os.path.join(output_dir, "index.html"), "w", encoding="utf-8") as html_file:
    html_file.write(html_output)

with open(os.path.join(output_dir, "styles.css"), "w", encoding="utf-8") as css_file:
    css_file.write(css_content)

print("HTMLとCSSの生成が完了しました。'output' フォルダを確認してください。")

questions answers signage
最新情報をチェックしよう！