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;
}
完成図
テンプレートコーディング
同じタグのコンテンツ
同じカテゴリーのコンテンツ
