9.ヘッダーとフッターを追加する
サイト名とコピーライトを追加して、それぞれヘッダーとフッターとしてマークアップします。
ヘッダー（header）
ウェブページのタイトルや、そのページが何を表示されているかを端的にわかるように配置するのがヘッダーです。ページの頭の部分です。
headerタグを使用します。その中のタイトルをh1でくくります。
<header>
<h1>DEMO SITE</h1>
</header>フッター
フッターには、ウェブサイトの作者情報などを配置します。ページの一番下にあり、足の部分です。
footerタグを使用します。中のコピーライトは目立たずして明確にするために周りより小さめの文字にします。smallタグを使用します。Ⓒを入れます。
<footer><small>2020 © HO-MAN.NET</small></footer>すべて表示
ヘッダーとフッターを追加してすべて表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DEMO SITE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>DEMO SITE</h1>
</header>
<article>
<h1>真夏のひまわり畑</h1>
<p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>
<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥のえさになります。また、ひまわり油も抽出し、料理やお菓子作りに活用されています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>
<footer>
<small>2020 © HO-MAN.NET</small>
</footer>
</body>
</html>ページでみる表示
実際のページでみると下記のようになります。4つの要素で構成されます。
- サイト名
- 記事タイトル
- 本文
- 作者情報
ここまでのまとめ
ウェブページの基本形はこれで完成です。
ここから見た目を変更するためにCSSを追加したり、コンテンツを増やすのにHTMLタグを追加したりします。
「イチから学ぶHTML&CSS その1」では、基本的なページの作成を学んできました。
「イチから学ぶHTML&CSS その2」では、ページのレイアウトとデザインを学びます。