こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
header要素っていつ使うの？
タイトルやメニューなどを表示する時に使うよ！
結論からいうと、header要素はタイトルやメニューを表示したい時に必要です。
Webサイトでいえば1番上に表示されているセクションとなります。
今回はheader要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。
スポンサーリンク
１： header要素とは
header要素とは、Webサイトのタイトルやロゴ、ナビゲーションメニューなどを表示するセクションです。
ヘッダーを作成できると考えてください。タイトルやナビゲーションメニューはWebサイト作成時に必ず必要なものになります。これらをheader要素以外のmain要素などに作成してしまうとレイアウトが崩れて、閲覧しにくいサイトができてしまうため必ずheader要素に入れるようにしましょう。
ヘッダーにはページヘッダーとセクションヘッダーの二種類があります。
nav要素の使い方は？HTML5の要素を使いこなそう【HTML編】 ２： header要素の使い方
2.1 ページヘッダー
ページヘッダーは、body要素内の1番上に記述されるセクションとなります。
<body> <header>ページヘッダー</header> <main>メインコンテンツ</main> <footer>ページフッター</footer>
</body>Webサイトのタイトルやナビゲーションメニューを記載するため必ず使うものになります。
idやclassを指定してCSSでデザインをカスタマイズすることでオリジナルデザインを作成することもできます。
2.2 セクションヘッダー
セクションヘッダーは、articleやasideなどの各セクションの1番上に記述されるセクションとなります。
<aside> <header>セクションヘッダー</header>
</aside>各セクションの見出しをつけることができるためこのセクションヘッダーも使われることが多いです。
こちらもidやclassを指定することによってデザインをカスタマイズすることができますが、ページヘッダーとは異なるものなので注意しましょう。
まとめ
今回は、header要素についてと使い方について解説しました。
header要素はWebサイトのタイトルやナビゲーションメニューを表示するために使うものです。h1要素やnav要素などと組み合わせて上手に使っていきましょう。
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。
以上、ユキでした！
スポンサーリンク