<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<!-- この1行を追加 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phlox</title>
<link rel="stylesheet" href="phlox.css?ts=20250625">
<style>
.link-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
margin-top: 2em;
}
.link-list a {
font-size: 1.5em;
color: #ffd6f7;
text-decoration: none;
}
.link-list a:hover {
color: #ffffff;
text-decoration: underline;
}
h1 {
text-align: center;
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Phlox</h1>
<div id="linklists" class="link-list"></div>
<noscript><p>JavaScriptを有効にしてください。</p></noscript>
<script>
const links = [
{ title: "使い方", file: "phlox-howtouse.html" },
{ title: "音楽用語クイズ", file: "phlox-quiz.html" },
{ title: "音楽用語辞典", file: "phlox-dictionary.html" },
{ title: "質問", file: "phlox-question.html" }
];
const linkArea = document.getElementById("linklists");
links.forEach(link => {
const a = document.createElement("a");
a.href = link.file; // ✅ 修正点
a.textContent = link.title; // ✅ 修正点
const h2 = document.createElement("h2");
h2.appendChild(a);
linkArea.appendChild(h2);
});
</script>
</body>
</html>
