雛形コード

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

- Githubリポジトリ / Clone URL

LogoGitHub - if-tech-support/accordion-menu at starterGitHub
Githubリポジトリ
git clone -b starter-vue https://github.com/if-tech-support/accordion-menu.git

- HTMLコード

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

- CSSコード

.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;
}
Previous成果物の確認Next手順ヒント

Last updated

Was this helpful?