HTML入門トレーニング

header要素

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダーを定義することができる、header要素について学びます。
講師:
05:54

字幕

このレッスンでは、 ヘッダーを定義することができる header要素について学びます。 画面では、W3Cの勧告する HTML5の仕様書の中から、 header要素に関する 詳細ページを開いているところです。 詳細ページには、様々な技術的、 かつ専門的な内容が書かれていますが、 ここでは、少し下にある、どのような 要素がheader要素として適切か、 この概要について紹介していきます。 header要素は、その要素に一番近い、 親要素のためのヘッダーを表します。 つまり、親要素は、 sectioning content、 あるいはsectioning root要素 である必要があります。 ヘッダーには、その要素の紹介や、 ナビゲーションなどが含まれます。 つまり、article、 section、asideのような セクショニング・コンテンツの ヘッダーとしても存在でき、 その場合は、それらの 要素の紹介などを含みます。 あるいは、body要素、つまり sectioning root要素のヘッダー として存在する場合は、 ページ全体の紹介や、ナビゲーションを 含むヘッダーとなります。 また、下のNoteには、 このような記述もあります。 header要素には、通常、セクションの 見出しを含むことが想定されていますが、 これは、必須ではありません。 見出しとは、h1からh6のような要素です。 header要素は、それに関連するロゴ、 検索フォームなどをまとめるために 使うことができます。 つまり、header要素には、 その中にページのロゴやナビゲーション、 記事の導入文や著者名などを 含めることができる、ということです。 もちろん、header要素は 必須ではありません。 あくまで、文書やセクションの 意味を強化するためのものです。 ここで、コードエディターで サンプルファイルのHTMLを開きましょう。 コードエディターに切り替わりました。 HTMLの中には、bodyタグがあり、 その下にはh1、h2で見出しが定義され、 更にその下には、nav要素で このウェブサイトのナビゲーションが 定義されています。 その下には、article要素で 本文が書かれており、 本文は見出しや段落で構成されています。 このウェブページ全体の構造を見渡すと、 h1の見出し、h2の見出し、 そしてnav要素、 この3つの要素をheader要素として 定義できそうです。 header要素の中には、見出しを 置くことも想定されていますので、 これは非常に適切な マークアップといえます。 なお、ナビゲーションの要素、 この要素をheader要素の中に含めるか、 それとも外に置くか、ということに ついては、意見が分かれる点です。 これは、header要素の中に そのコンテンツが所属すべきかどうか、 そのウェブページに応じて 考えていくと良いでしょう。 ここでは、header要素の中に nav要素も含めることにします。 実際にコーディングをしていきましょう。 body要素とh1要素の間に、 header要素を追加します。 このheader要素は、見出しを二つ、 そしてナビゲーションの 要素を含む要素です。 分かり易いように、 インデントもしておきましょう。 これで、見出し二つとナビゲーションを含む header要素を作ることができました。 この時、このheader要素の親は、 sectioning root要素、 つまりbody要素ですので、 このheader要素は ページ全体に対するヘッダーである、 ということを意味しています。 ここで知っておきたいのは、一つの ウェブページに対してヘッダーは 一つに限定されるものではない、 ということです。 多くの場合、一つのウェブページに 対して一つのヘッダーしか置かない、 という状況が見られますが、実は、 ヘッダーは先に紹介したように、 セクションに対して一つずつ 設けることができます。 そのため、ページ全体に対する ヘッダーがあれば、 その他のセクションに対して ヘッダーを作ることもできます。 実際に追加してみましょう。 少し下にスクロールすると、 articleタグの内側に、 一つ目のsection要素があります。 この下には複数の section要素もありますが、 この一つ目のsection要素は、 このarticle要素に対するヘッダー、 つまり記事の冒頭の紹介文、 こういう風に定義することもできます。 そういう意味では、このsection要素は header要素として 定義することもできるのです。 実際に、このsection要素を header要素に変更してみましょう。 こうすることで、この header要素の直前の親は、 article要素になりますので、 このheader要素は、 article要素に対するヘッダーである、 こういうマークアップになります。 また、こちらのheader要素でも、 冒頭のheader要素と同様に、 内側に見出しを含めています。 このように、一つのウェブページに対して、 二つのheader要素を マークアップすることもできます。 このレッスンでは、 ヘッダーを定義することができる header要素について学びました。

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。