<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>キャラ別ランダムセリフメーカー</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #eef2f3, #8e9eab);
text-align: center;
padding: 50px;
}
h1 {
font-size: 30px;
color: #2c3e50;
}
select, button {
padding: 10px;
font-size: 16px;
margin: 10px;
border-radius: 8px;
}
button {
background-color: #2980b9;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #1f6391;
}
.quote-box {
background: #fff;
margin-top: 30px;
padding: 30px;
border-radius: 12px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
font-size: 20px;
color: #333;
}
</style>
</head>
<body>
<h1>🎙️ キャラ別ランダムセリフメーカー</h1>
<p>ジャンルとキャラクターを選んで、名セリフを生成しよう！</p>
<select id="genre">
<option value="battle">バトル</option>
<option value="romance">恋愛</option>
<option value="drama">感動</option>
<option value="comedy">ギャグ</option>
</select>
<select id="character">
<option value="主人公">主人公</option>
<option value="ヒロイン">ヒロイン</option>
<option value="ライバル">ライバル</option>
<option value="師匠">師匠</option>
</select>
<br>
<button onclick="generateLine()">セリフを生成</button>
<div class="quote-box" id="quote">
ここにセリフが表示されます。
</div>
<script>
const lines = {
battle: {
主人公: [
"俺が倒さなきゃ、誰がやる！",
"まだ…終わっちゃいない！",
"立てるさ、何度でも！"
],
ヒロイン: [
"私だって…守れるんだから！",
"あなたを信じる、それが私の戦いよ。"
],
ライバル: [
"俺を超えてみろ…できるならな！",
"この一撃で、全てを終わらせる。"
],
師匠: [
"強さとは、心にあるものだ。",
"お前にすべてを託す！"
]
},
romance: {
主人公: [
"君に出会うために、生まれてきた気がする。",
"一緒に笑えるだけで、幸せなんだ。"
],
ヒロイン: [
"好きって、こんなにも苦しいの？",
"…バカ。でも、ありがとう。"
],
ライバル: [
"…なぜあいつなんだ？俺じゃ、だめなのか。",
"奪ってでも、お前を手に入れたい。"
],
師匠: [
"愛とは、時に強さよりも難しい。",
"惚れた弱みってやつだな…"
]
},
drama: {
主人公: [
"俺たちは、ただ幸せになりたかっただけなんだ…。",
"運命なんかに、負けてたまるか！"
],
ヒロイン: [
"もう一度…あなたに会いたい。",
"願いが一つだけ叶うなら、時間を戻したい。"
],
ライバル: [
"俺の存在に意味なんてない…と思ってた。",
"あの時の俺を、殴り飛ばしてやりたいよ。"
],
師匠: [
"選んだ道を信じろ。お前なら、やれる。",
"迷っていい。人間なんだからな。"
]
},
comedy: {
主人公: [
"いや、なんでパンツが空飛んでるんだ！？",
"オレの人生、どこで間違えた？"
],
ヒロイン: [
"あーもう！恥ずかしくて死ぬ！！",
"だから言ったでしょ！？ネコじゃないってば！"
],
ライバル: [
"笑うな！こっちは本気なんだぞ！？",
"俺がボケ担当じゃないって言ってるだろ！"
],
師匠: [
"ふぉっふぉっふ、若いのぅ…わしも昔はな…。",
"今日の修行は…温泉じゃ！"
]
}
};
function generateLine() {
const genre = document.getElementById('genre').value;
const character = document.getElementById('character').value;
const options = lines[genre][character];
const line = options[Math.floor(Math.random() * options.length)];
document.getElementById("quote").innerText = `${character}「${line}」`;
}
</script>
</body>
</html>
