Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本史100問マスタークイズ</title>
<style>
body { font-family: sans-serif; background: #f0f2f5; display: flex; justify-content: center; padding: 20px; }
#quiz-container { background: white; width: 100%; max-width: 600px; padding: 30px; border-radius: 15px; shadow: 0 4px 10px rgba(0,0,0,0.1); }
.progress-container { width: 100%; background: #eee; border-radius: 10px; margin-bottom: 20px; }
#progress-bar { width: 0%; height: 15px; background: #4caf50; border-radius: 10px; transition: 0.3s; }
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本史100問マスタークイズ</title>
<style>
body { font-family: sans-serif; background: #f0f2f5; display: flex; justify-content: center; padding: 20px; }
#quiz-container { background: white; width: 100%; max-width: 600px; padding: 30px; border-radius: 15px; shadow: 0 4px 10px rgba(0,0,0,0.1); }
.progress-container { width: 100%; background: #eee; border-radius: 10px; margin-bottom: 20px; }
#progress-bar { width: 0%; height: 15px; background: #4caf50; border-radius: 10px; transition: 0.3s; }