header tag(ヘッダー タグ)はウェブーページの上の部分をです。 ヘッダータグではサイトのロゴ、メーニュ、検索窓などが置いてあります。 よく使われるYahooージャパンのサイトを見ると下のイメージの部分がヘッダータグのエリアです。
header タグには上のように会社の名、ロゴ、メーニュ、検索エリアなどがあります。
<header>いろいろ</header>
現在のサイトエバディベルのヘッダならこう書けますね。
下のソースを見ましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>headerタグ</title>
</head>
<body>
<header>
<div id="serviceNameArea">
<div>
<img src="/material/images/main/happyCatHeader.png" alt="happy cat image">
</div>
<a href="/">
<h1 id="serviceName">everdevel</h1>
<h2>Web Technology, エバディベル</h2>
</a>
</div>
<div id="searchArea">
<div id="searchEngineKeywordLabel">
<input type="text" id="searchEngineKeyword" placeholder="検索キーワード.">
</div>
<div id="searchBtnLabel">
<img src="/material/images/service/searchIcon.png" id="searchBtn">
</div>
</div>
</header>
</body>
</html>
実行したら今とは違いますね。CSSを勉強して適用したら今のように作れます。
では次はfooterタグについて勉強しましょう。
ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。
コメント 0個
並べ替え
