～目次～
どのような見た目にするか
さて、前回までの記事でリセットCSSを設定してブラウザの表示差異をなくしてみました。いよいよブラウザでの見た目を整えるためのCSSの設定をしていきます。
まずは、ブラウザでどのように表示するか簡単な設計図を作成してみました。
下記画像のような感じでブラウザで表示されるようにCSSを設定していきます。
CSSの記述
HTMLファイルのheadタグ内の「styleタグ」にCSSを記述していきます。
作成しているHTMLファイルのstyleタグ内に以下内容を記述してください。
body {
background-image: url("./sample.jpg");
}
h1 {
position: absolute;
top: 16%;
left: 8%;
font-size: 300%;
}
header nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: pink;
}
header nav ul {
display: flex;
width: 100%;
height: 100%;
text-align: center;
}
header nav ul li {
width: 33.333%;
font-size: 150%;
padding-top: 2%;
}
#main {
position: absolute;
top: 25%;
left: 5%;
width: 60%;
height: 160%;
}
#main h2 {
margin-bottom: 16px;
}
#main p {
margin-left: 24px;
height: 300px;
}
video {
margin-left: 24px;
width: 500px;
}
#sub {
position: absolute;
top: 25%;
right: 5%;
width: 30%;
}
#sub caption {
display: none;
}
#sub table th,
#sub table td {
padding: 8px;
border: 1px solid white;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
background-color: pink;
text-align: center;
}
footer h3 {
position: fixed;
bottom: 10%;
left: 3%;
}
footer nav ul {
display: flex;
width: 100%;
height: 100%;
text-align: center;
}
footer nav ul li {
width: 33.333%;
padding-top: 2%;
}
footer p {
margin-top: 16px;
}
HTMLの記述
前回の記事からHTMLの内容も修正しています。
以下内容で修正してください。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>○○の自己紹介サイト</title>
<link rel="stylesheet" href="./reset.css">
<style>
※ここに上のCSSを記述します
</style>
</head>
<body>
<header>
<h1>○○の自己紹介サイト</h1>
<nav>
<ul>
<li><a href="#name">氏名</a></li>
<li><a href="#address">住所</a></li>
<li><a href="#appeal">自己アピール</a></li>
</ul>
</nav>
</header>
<article>
<section id="main">
<h2 id="name">氏名</h2>
<p>○○</p>
<h2 id="address">住所</h2>
<p>●●</p>
<h2 id="appeal">自己アピール</h2>
<p>△△</p>
<h2>ポートフォリオ</h2>
<video src="./sample.mp4" controls></video>
</section>
<section id="sub">
<h3>資格一覧</h3>
<table>
<caption>資格一覧表</caption>
<thead>
<tr>
<th>取得年月</th>
<th>資格名</th>
</tr>
</thead>
<tbody>
<tr>
<th>2020年9月</th>
<td>HTML5レベル1 取得</td>
</tr>
<tr>
<th>2020年9月</th>
<td>HTML5レベル2 取得</td>
</tr>
</tbody>
</table>
</section>
</article>
<footer>
<h3>サイトマップ</h3>
<nav>
<ul>
<li><a href="#name">氏名</a></li>
<li><a href="#address">住所</a></li>
<li><a href="#appeal">自己アピール</a></li>
</ul>
</nav>
<p>© 2020 ○○</p>
</footer>
</body>
</html>
bodyへの設定の説明
body {
background-image: url("./sample.jpg");
}
body要素（ブラウザの画面全体）に対する設定です。
前回までの記事で、imgタグによって表示していた画像を、背景として設定しています。
headerへの設定の説明
h1 {
position: absolute;
top: 16%;
left: 8%;
font-size: 300%;
}
header nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: pink;
}
header nav ul {
display: flex;
width: 100%;
height: 100%;
text-align: center;
}
header nav ul li {
width: 33.333%;
font-size: 150%;
padding-top: 2%;
}
header内のh1タグとnavタグに対する設定です。
position:absoluteでブラウザの絶対位置としています。
それぞれtop、leftからの位置を指定しています。
navタグに関しては、display:frexを指定することにより、navタグの中のliタグを横並びにするよう設定しています。
メインエリアへの設定の説明
#main {
position: absolute;
top: 25%;
left: 5%;
width: 60%;
height: 160%;
}
#main h2 {
margin-bottom: 16px;
}
#main p {
margin-left: 24px;
height: 300px;
}
video {
margin-left: 24px;
width: 500px;
}
メインエリアとするためにHTMLのsectionタグにidを設定しました。（main）
そのmainに対してposition:absoluteで絶対位置を指定しています。
topからの位置はheaderとh1を考慮して25%に、leftからの位置は余白を考慮して5%に設定しています。
メインエリアとサブエリアを横に並べたいので、横幅を60%に設定しています。
footerの位置を下に固定したので、その分の高さを確保するために、heightを160%で指定しています。
また、pタグに関して左側の余白を設定して、高さを300pxとしています。
videoタグに関しても左側に余白を設定して、横幅を500pxとしています。
サブエリアへの設定の説明
#sub {
position: absolute;
top: 25%;
right: 5%;
width: 30%;
}
#sub caption {
display: none;
}
#sub table th,
#sub table td {
padding: 8px;
border: 1px solid white;
}
サブエリアとするためにHTMLのsectionタグにidを設定しました。（sub）
そのsubに対してposition:absoluteで絶対位置を指定しています。
topの位置はメインと同じく25%に、右側にサブエリアを配置したいので、rightの設定を5%にしています。
横幅はメインに重ならないように30%としています。
また、表のcaptionは非表示にするためにdisplay:noneを設定しています。
テーブルの内側に8pxの余白を、白色の1pxの枠線を設定しています。
footerへの設定の説明
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
background-color: pink;
text-align: center;
}
footer h3 {
position: fixed;
bottom: 10%;
left: 3%;
}
footer nav ul {
display: flex;
width: 100%;
height: 100%;
text-align: center;
}
footer nav ul li {
width: 33.333%;
padding-top: 2%;
}
footer p {
margin-top: 16px;
}
footerの位置は、ブラウザの下部に常に表示されるよう設定してみました。
position:fixedでブラウザの固定位置を指定しています。bottom、leftともに0を指定してブラウザの下に固定しています。
同じようにh3タグも下から10%、左から3%の位置に固定しています。
footerの中のnavに関しましては、headerの中のnav同様、display:flexで横並びにしています。
まとめ
前回までの記事で、HTMLの記述・リセットCSSの読み込み方をご紹介しました。
そして、今回が最後となりますが、ブラウザでの見た目を設定するCSSのご紹介をしました。基本的にはHTMLのタグ指定、もしくはid指定、class指定をしてその箇所にどのような設定をするかを記述していくだけです。
ただ、CSS3からアニメーション等も設定できるようになったため、CSSを極めればJavaScriptを使用しなくても、動きのあるWEBページが作成することができるようになっています。
また、機会があればご紹介させていただきます。
さて、最後となりましたが、初心者の方でもWEBページを作成することができるような記事を書いてみました。はっきり言って、ある程度のタグとある程度のCSSの設定方法を覚えてしまえばWEBページは簡単に作成できます。
この連載を参考にご自分のWEBページを作成してみてください。
← 前の記事
