HTML でヘッダーセクションを作成する

はじめに

この実験では、<header> タグを使用して HTML ページのヘッダーセクションを作成する方法を学びます。Web ページのヘッダーセクションには通常、ウェブサイトのロゴ、ナビゲーションメニュー、検索バーなどが含まれます。<header> タグは、Web ページのヘッダーセクションを作成するために他の HTML 要素をグループ化するために使用されるブロックレベル要素です。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70767{{"HTML セクションのヘッダー"}} html/head_elems -.-> lab-70767{{"HTML セクションのヘッダー"}} html/text_head -.-> lab-70767{{"HTML セクションのヘッダー"}} html/lists_desc -.-> lab-70767{{"HTML セクションのヘッダー"}} html/layout -.-> lab-70767{{"HTML セクションのヘッダー"}} html/nav_links -.-> lab-70767{{"HTML セクションのヘッダー"}} html/doc_flow -.-> lab-70767{{"HTML セクションのヘッダー"}} end

HTML ドキュメントのセットアップ

まず、index.html という名前の新しい HTML ファイルを作成します。index.html では、次のコードを使用して基本的な HTML ドキュメント構造を追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Header Tutorial</title>
  </head>
  <body></body>
</html>

ヘッダーセクションの作成

<header> タグを使用して HTML ページのヘッダーセクションを作成します。<body> タグの中に、次のコードを追加します。

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

上記のコードでは、ヘッダーセクションの見出しを定義するために <h1> タグと、ナビゲーションメニューを定義するために <nav> タグを追加しました。<nav> タグの中には、順序なしリスト <ul> と、対応するアンカー <a> タグ付きの 3 つのリスト項目 <li> を追加して、ナビゲーションメニューを作成しました。

ヘッダーセクションにスタイルを追加する

ヘッダーセクションにスタイルを追加するには、style.css という CSS ファイルを作成します。style.css には、次のコードを記述します。

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

上記のコードでは、<header> タグに背景色、文字色、パディングを設定するためのスタイルを追加しました。また、<nav> タグとその子要素にナビゲーションメニューのスタイルを設定するためのスタイルも追加しました。

CSS ファイルのリンク

CSS ファイルを HTML ファイルにリンクするには、<head> タグの中に次のコードを追加します。

<link rel="stylesheet" href="style.css" />

index.html に変更を保存し、Web ブラウザで開きます。次のような出力が表示されるはずです。

まとめ

おめでとうございます！<header> タグを使用して、基本的な HTML ヘッダーセクションを正常に作成しました。この実験では、HTML ページのヘッダーセクションを作成し、それにスタイルを追加し、CSS ファイルを HTML ドキュメントにリンクする方法を学びました。ヘッダーセクションは、訪問者に対して紹介コンテンツとナビゲーションメニューを提供するため、すべての Web ページの重要な部分です。

HTML セクションのヘッダー