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

2020年4月3日2023年12月22日

URLをコピーしました！

header要素とfooter要素の追加

今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッターに設定するfooter要素を設置していきます。

header要素

header要素は、HTML5から追加された新しい要素です。それまでは、ここはWebサイトの上部の方にある、ロゴや、グローバルナビゲーションを格納した場所で、トップページに限らず、サブページの上部に共通に配置される場所としてdiv要素を使って、グループ化していました。

<!--旧タイプの記述-->
<div class="header">......</div>

header要素は「フローコンテンツ」と呼ばれ、フローコンテンツを受け入れる要素内に記述することもできますが、footer要素やaddress要素の子要素として記述することはできません。

footer要素

footer要素も、HTML5から追加された新しい要素です。それまでは、Webサイトの下部にある、住所などの連絡先や、コピーライトのような著作物の表示をを格納した場所で、トップページに限らず、サブページの下部に共通に配置される場所としてdiv要素を使って、グループ化していました。

<!--旧タイプの記述-->
<div class="footer">......</div>

footer要素も「フローコンテンツ」と呼ばれ、フローコンテンツを受け入れる要素内に記述することもできますが、header要素やaddress要素の子要素として記述することはできません。

MDN Web Docs

: フッター要素 – HTML: ハイパーテキストマークアップ言語 | MDN

HTMLのマークアップ練習のためのテキスト

今回は09のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いて下記のテキスト文章をコピーして貼り付けておきましょう。

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

エディタの状態

HTMLマークアップ練習

今回は、08までのマークアップにh1要素をheader要素で囲み、Copyright部分をfooter要素で囲んでいます。

下記のコードを閲覧せずに入力できる方は、そのままHTMLコードを入力してみてください。

div要素やclass設定を行っている箇所もありますので、コードを参照される際は、下記アコーディオンの下矢印をクリックして確認ください。

模写コードは下記から

<!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 © Computer Technology Groups. All rights reserved</p>
        </footer>
</div>
</body>
</html>