はじめに
この実験では、<header> タグを使用して HTML ページのヘッダー セクションを作成する方法を学びます。Web ページのヘッダー セクションには通常、ウェブサイトのロゴ、ナビゲーション メニュー、検索バーなどが含まれます。<header> タグは、Web ページのヘッダー セクションを作成するために他の HTML 要素をグループ化するために使用されるブロックレベル要素です。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
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 ページの重要な部分です。
