雛形コード

雛形コードです。git clone もしくは、コピペして利用してください。

- Githubリポジトリ / Clone URL

git clone -b starter-vue https://github.com/if-tech-support/tab.git

- HTMLコード

<!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>

- CSSコード

.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;
}

Previous成果物の確認 NextVueコード

Last updated 3 years ago

Was this helpful?