Learning site for website creation

T01:ページの基本構成

公開日:2021年11月08日 更新日:2021年11月14日

ResetCSSを使用するか

tmp_base.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本構成:テンプレート</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.0/destyle.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

</body>
</html>

ページの基本構成を決める

tmp_base.html

<div class="Wrapper">
  <header>
    ヘッダー
  </header>

  <div class="Content">
    <main class="Main">
      <div class="Box">
        <div class="Box_header">
          <div class="Box_inner">
            コンテンツヘッダー
          </div>
        </div>
        <div class="Box_body">
          <div class="Box_inner">
            コンテンツ本体
          </div>
        </div>
        <div class="Box_footer">
          <div class="Box_inner">
            コンテンツフッター
          </div>
        </div>
      </div>
    </main>
  </div>

  <footer class="Footer">
    フッター
  </footer>
</div>

基本デザインを決める

css/style.css

/* 基本デザイン */
@import url(_common.css);

/* パーツデザイン */
@import url(_Footer.css);

css/_common.css

/* 基本デザイン */
body {
  background-color: #ebf0f0;
  color: #333;
  font-size: 16px;
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  letter-spacing: 0.1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

pre {
  font-size: 13px;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

figcaption {
  color: #666;
  font-size: 0.8em;
  padding: 0.5em 0;
}

a {
  color: #03a9f4;
  text-decoration: none;
  word-break: break-all;
}

a img {
  transition: opacity 0.5s;
}

a:hover img {
  opacity: 0.7;
}

table {
  border: solid 1px #333;
  border-collapse: collapse;
  margin: 2em 0;
}

th {
  border: solid 1px #333;
  background-color: #b2ebf2;
  color: #333;
  padding: 0.5em 0.8em;
  white-space: nowrap;
}

td {
  border: solid 1px #333;
  background-color: #fff;
  color: #333;
  padding: 0.5em 0.8em;
}

/* Wrapper */
.Wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

css/_Footer.css

/* Footer */
.Footer {
  background-color: #3f51b5;
  color: #fff;
  margin-top: auto;
}

完成図

テンプレートコーディング