はじめに
CSSを学びたいのStep19です！アコーディオンを実現します！
成果物
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>アコーディオンのサンプル</h2>
<div class="accordion">
<input type="checkbox" id="section1" class="accordion-checkbox">
<label for="section1" class="accordion-button">セクション1</label>
<div class="accordion-content">
<p>コンテンツ1</p>
<p>コンテンツ2</p>
<p>コンテンツ3</p>
</div>
</div>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h2 {
text-align: center;
color: #333;
}
.accordion {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 600px;
overflow: hidden;
}
.accordion-checkbox {
display: none;
}
.accordion-button {
background-color: #007BFF;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: background-color 0.4s;
display: block;
}
.accordion-button:hover {
background-color: #0056b3;
}
.accordion-content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f9f9f9;
border-top: 1px solid #ddd;
}
.accordion-checkbox:checked + .accordion-button {
background-color: #28a745; /* 緑色に変更 */
}
.accordion-checkbox:checked + .accordion-button + .accordion-content {
display: block; /* 表示 */
padding: 18px;
}