09 ホームページ基礎講座 HTML編 header footer

09 ホームページ基礎講座　HTML編 header footer

Webサイト制作

2020.04.02

<header><footer>要素
ホームページ基礎講座　9回目の動画はHTML作成

<header><footer>要素

今回のマークアップは独自コンテンツようのarticle の他に、ページのヘッダー部分に設定する<header>要素　フッター部分専用の<footer>要素を設置していきます。

このあとのCSSを設定しますので、下記のコードをコピーして準備しておいてください。詳しくは動画で。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <div class="content">
    <header>
        <h1 class="header-title">ECOLOGY【エコロジー】</h1>
    </header>
    <article>
        <section>
            <h1 class="sub-title">基本ポリシー</h1>
            <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
        </section>
        <section>
            <h1 class="sub-title">エコロジーへの取り組み</h1>
            <p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーsの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
        </section>
        <section>
            <h1 class="sub-title">商品のラインナップ</h1>
            <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
        </section>
    </article>
        <footer>
            <p>Copyright &copy; Computer Technology Groups. All rights reserved</p>
        </footer>
</div>
</body>
</html>