はじめてのホームページ　意味合いを持った要素　セマンティクス要素の設定

2020年4月3日2025年4月13日

今回は、HTML5のセマンティクスを活用した学習になります。これらのコードを正しく使うことで、文書構造をわかりやすく整理し、ユーザーと検索エンジンの両方にとって利便性が高くなります。ここでは、大事な、header要素、footer要素、main要素、section要素、article要素　の設定方法を行なっています。

HTMLコードを入力

下記のコードをコピーもしくは、コードを模写して準備しましょう。

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

全体の構造

HTMLコードは以下のようなセマンティック要素で構成されています

<header>: ページのヘッダー部分。
- ページ全体やセクションのヘッダー部分を表します。
- ロゴ、タイトル、ナビゲーションリンクなどを含むことが一般的です。
<main>: ページの主要なコンテンツ部分。
- 文書の主要な内容を表します。
- ページ内で最も重要なコンテンツ部分に使用します。通常、ページ内で1つだけ使用します。
<article>: 独立した内容を表現するコンテンツの単位。
- 独立した情報の単位を表します。
- 記事やブログ投稿など、文書全体から独立して再利用できる内容に使用します。
<section>: 具体的なトピックを分割するセクション。
- 文書のセクションを表します。
- セクションごとにテーマを分けたいときに使用します。h1～h6タグを含むことが推奨されます。
<aside>: 補足情報や関連情報を提供する部分。
- 本文の補足情報や周辺情報を表します。
- 広告、関連リンク、参考情報、サイドバーなどに使用します。
<footer>: ページのフッター部分。
- ページ全体またはセクションのフッター部分を表します。
- 著作権情報、連絡先、関連リンクなどを含むことが多いです。

これらの要素を使うことで、ページの構造が明確になり、検索エンジンや支援技術（スクリーンリーダー）にとっても理解しやすくなります。

header要素

ページ全体のタイトルを示します。<h1>: ページで一意のメインタイトルとして使用します。この場合、「ECOLOGY【エコロジー】」がページの主題です。

<header>
    <h1>ECOLOGY【エコロジー】</h1>
</header>

main要素

ページの主要なコンテンツを囲む領域です。<main>内には複数の<article>要素があります。

<main>
    ...
</main>

article要素

<article>: 独立したコンテンツの単位を表現します。このページでは「基本ポリシー」「エコロジーへの取り組み」「商品のラインナップ」をそれぞれ個別の<article>で表現しています。

<header>: 各<article>の見出し部分を定義しています。ここでは<h2>が使われ、ページ全体の<h1>に続く階層的な見出しとなります。

<section>: 各トピックの具体的な説明を分けるために使用します。

<article>
    <header>
        <h2>基本ポリシー</h2>
    </header>
    <section>
        <p>エコロジーや環境問題への関心は、年々高くなっています。...</p>
    </section>
</article>

aside要素

メインコンテンツを補足する情報を表示します。
例: 関連情報や外部リンクなどを提供する場合に適しています。この例では「ニュースページ」への誘導を行っています。

<aside>
    <p>エコロジーに関する最新情報は、ニュースページをご覧ください。</p>
</aside>

footer要素

ページのフッター部分を定義します。一般的に著作権情報や連絡先などが含まれます。

<footer>
    <p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
</footer>

CSSを追加してみよう

上記のHTMLコードにはCSSが含まれていません。下記のスタイルを記述してみましょう。

<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
    }
    header {
        background-color: #4CAF50;
        color:#fff;
        padding: 20px;
        text-align: center;
    }
    article {
        margin: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }
    aside {
        margin: 20px;
        padding: 10px;
        background-color: #f1f1f1;
        border-left: 4px solid #4CAF50;
    }
    footer {
        background-color: #222;
        color: #fff;
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
</style>