雛形コード
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
git clone -b starter-vue https://github.com/if-tech-support/accordion-menu.git<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>accordion-menu</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<div class="menu menu--red">
<a class="menu__head">
<h1 class="menu__title">アコーディオン1</h1>
<i class="fas fa-chevron-down fa-2x menu__icon"></i>
<i class="fas fa-chevron-up fa-2x menu__icon"></i>
</a>
<div class="menu__body">
<div class="menu__content">
<p class="menu__text">アコーデオン1の中身</p>
<p class="menu__text">アコーデオン1の中身</p>
</div>
</div>
</div>
<div class="menu menu--blue">
<a class="menu__head">
<h1 class="menu__title">アコーディオン2</h1>
<i class="fas fa-chevron-down fa-2x menu__icon"></i>
<i class="fas fa-chevron-up fa-2x menu__icon"></i>
</a>
<div class="menu__body">
<div class="menu__content">
<p class="menu__text">アコーデオン2の中身</p>
<p class="menu__text">アコーデオン2の中身</p>
</div>
</div>
</div>
<div class="menu menu--green">
<a class="menu__head menu--green">
<h1 class="menu__title">アコーディオン3</h1>
<i class="fas fa-chevron-down fa-2x menu__icon"></i>
<i class="fas fa-chevron-up fa-2x menu__icon"></i>
</a>
<div class="menu__body">
<div class="menu__content">
<p class="menu__text">アコーデオン3の中身</p>
<p class="menu__text">アコーデオン3の中身</p>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>.menu {
width: 60%;
margin: 0 auto;
text-align: center;
}
.menu--red {
background-color: rgba(250, 10, 10, 0.6);
}
.menu--blue {
background-color: rgba(10, 106, 250, 0.6);
}
.menu--green {
background-color: rgba(70, 250, 10, 0.6);
}
.menu__head {
display: flex;
}
.menu__title {
margin-left: 10px;
}
.menu__icon {
margin: auto 10px auto auto;
}
.menu__content {
background-color: rgba(255, 255, 255, 0.3);
}
.menu__text {
margin: 0;
padding: 30px 0;
}