HTML入門トレーニング

footer要素

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

ぜひご覧ください。

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

字幕

このレッスンでは フッターを定義することができる footer 要素について学びます 画面ではブラウザーで W3C が勧告している HTML5 の仕様書の中から footer 要素についての詳細ページを 開いているところです 少し下にスクロールして footer 要素の概要について 紹介していきましょう footer 要素はその要素に一番近い 親要素のためのフッターを表します つまり 親要素がセクショニングコンテンツ あるいは セクショニングルート要素である 必要があります フッターには一般的にその親要素を 誰が書いたか などの 関連情報や著作権表記などを含みます もし footer 要素が全体のセクション セクショニングルート要素に 含まれている場合は 目次 索引 長い奥付 ライセンスの契約文などのコンテンツを 含むこともあるでしょう この概要の下の Note の部分には 該当のセクションの著者 あるいは編集者の連絡先情報を 含めることもある という風に書いてあります この場合 フッターの内側に address 要素でマークアップすることになるでしょう ウェブサイトの提供者 著者の情報は ヘッダーやフッターの両方に適していますので いずれか またはいずれにも 配置することができます footer 要素の主な目的は これらの情報をマークアップして 意味づけするためのものです フッターはヘッダーと同様に 特定の構造で配置しなければいけないわけでは ありません あくまで その親要素に対しての フッターとして配置された時 どのようなコンテンツを含めるのか ということを 都度 考える必要があります 実際にエディターでサンプルファイルを開いて この HTML を基に footer 要素を定義してみましょう このウェブページの中には 冒頭に header 要素があり その下には article 要素で本文 記事が提供されています article 要素の中には見出しや 本文などがこのようにリストされています ページの一番下には このウェブページの著作権情報や 著者のツイッターアカウントなどが 表記されています この最後の段落は article 記事の内容には直接関係がなく どちらかと言えばサイト全体に対しての 情報だと言えます そのため この部分は サイト全体のフッターに含める情報として 非常に適しています ここでは この情報をフッターとして マークアップしてみましょう タグの前に タグを追加します そして この タグを タグで囲みます 見やすいようにインデントもしておきましょう これでこの最後にある段落 タグを タグを使って footer 要素として マークアップすることができました この footer 要素の親要素は body 要素にあたります つまり body 要素とは セクショニングルート要素 ページ全体を指します そのため ここで言うこの footer 要素は ページ全体に対するフッター ページ全体に対する著作権情報や ツイッターアカウントが含まれている という意味になりなす footer 要素も header 要素と同じように 一つのウェブページに一つしか 使えないわけではありません あらゆるセクション要素を 親要素に持つことができます またこのような著作権情報や ツイッターアカウント以外にも ナビゲーションや連絡先情報などを 含めることもできます このレッスンでは フッターを定義することができる footer 要素について学びました

HTML入門トレーニング

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

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

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

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

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