bootstrapでサイトの骨組みを作る





成果物


bootstrap関連のファイルを読み込む


index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>title</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>



htmlを編集する


index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>デモ</title>
    <!-- bootstrap  -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- bootstrapの謎の右の余白を消すために必要 -->
    <div id="wrap">
      <!-- header -->
      <header>
        <!-- nav -->
        <nav class="navbar navbar-expand-xl navbar-dark bg-dark mt-3 mb-3">
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav4"
            aria-controls="navbarNav4"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="navbar-brand"></div>

          <div
            class="collapse navbar-collapse justify-content-between"
            id="navbarNav4"
          >
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">header</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">nav</a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- main -->
      <main>
        <!-- sectionとasideを横並びにする -->
        <div class="row">
          <!-- section -->
          <section>section</section>

          <!-- aside -->
          <aside>aside</aside>
        </div>

        <!-- footer -->
        <footer>footer</footer>
      </main>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>



cssを編集する


css/style.css
body {
  margin: 0;
}

/* bootstrapの謎の右の余白を消す */
#wrap {
  overflow: hidden;
}

/* header */
header {
  height: 200px;
  background-color: aqua;
}

/* main */
main {
  background: grey;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* section */
section {
  width: 70%;
  background-color: blueviolet;
  padding-left: 20px;
}

/* aside */
aside {
  width: 30%;
  background-color: red;
}

/* footer */
footer {
  margin-top: auto;
  text-align: center;
  background-color: yellow;
}

/* スマホ用 */
@media screen and (max-width: 767px) {
  section {
    width: 100%;
  }
  aside {
    width: 100%;
    padding-left: 20px;
  }
}
デモ

ホームへ