雛形コード
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
Was this helpful?
雛形コードです。git clone もしくは、コピペして利用してください。
Last updated
Was this helpful?
git clone -b starter-vue https://github.com/if-tech-support/tab.git<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="UTF-8" />
<title>tab</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div class="tab" id="app">
<h1 class="tab__title">タブ</h1>
<ul class="tab__menu">
<li class="tab__item tab--active">
タブ1
</li>
<li class="tab__item">
タブ2
</li>
<li class="tab__item">
タブ3
</li>
</ul>
<div class="tab__contents">
<div>
<p class="tab__text">
タブ１を表示しています。
</p>
</div>
<div>
<p class="tab__text">
タブ２を表示しています。
</p>
</div>
<div>
<p class="tab__text">
タブ２を表示しています。
</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>.tab {
width: 50%;
margin: 0 auto;
}
.tab__title {
font-size: 36px;
font-weight: normal;
text-align: center;
}
.tab__menu {
list-style-type: none;
display: flex;
justify-content: center;
margin: 0;
}
.tab__item {
display: block;
padding: 10px 20px;
margin: 0 5px -1px 0;
border: 1px solid transparent;
border-bottom: none;
border-radius: 6px 6px 0 0;
cursor: pointer;
}
.tab__item:hover {
border-color: #ccc;
}
.tab--active {
border-color: #ccc;
background-color: #fff;
}
.tab__contents {
border: 1px solid #ccc;
border-radius: 6px;
margin: 0;
text-align: center;
}
.tab__text {
margin: 0;
padding: 40px;
}