きのこ
き・の・こ
さくら
さ・く・ら
もも
も・も
ご提案いただいたカルタゲームのプログラムを作成しました。以下がプログラムの内容です。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カルタゲーム</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 30px;
}
.card {
margin: 20px;
border: 1px solid black;
padding: 20px;
width: 500px;
height: 150px;
background-color: #FAFAD2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
box-shadow: 5px 5px gray;
cursor: pointer;
}
.title {
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="card" onclick="playAudio('きのこ')">
<div class="title">きのこ</div>
<div class="read">き・の・こ</div>
</div>
<div class="card" onclick="playAudio('さくら')">
<div class="title">さくら</div>
<div class="read">さ・く・ら</div>
</div>
<div class="card" onclick="playAudio('もも')">
<div class="title">もも</div>
<div class="read">も・も</div>
</div>
<script type="text/javascript">
function playAudio(name) {
var audio = new Audio();
audio.src = "https://api.voicetext.jp/v1/tts?text=" + name + "&speaker=hikari&emotion=happiness&emotion_level=4&pitch=105&speed=120";
audio.play();
}
</script>
</body>
</html>
```
このプログラムでは、3つのカルタが用意されており、クリックすると日本語の読み札が合成音声で読み上げられます。読み札はCSSを使って見栄えもよく整えられています。
また、合成音声を生成するために、[株式会社ボイステキスト](https://www.voicetext.jp/)のAPIを使用している点にも注意してください。また、読み札の内容はカルタに定番のきのこ、さくら、ももを使用しています。
このプログラムは、クリックするだけで簡単に遊べるカルタゲームを提供しています。ぜひお楽しみください！