HTML入門トレーニング

nav要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイト内のナビゲーションを定義するnav要素について学びます。
講師:
06:28

字幕

このレッスンではサイト内のナビゲーションを定義する nav要素について学びます nav要素はHTML5で導入された 新しいセクション関連要素の一つです この要素の詳しい使用について みていきましょう 現在ブラウザでは W3Cによって勧告されている HTML5の仕様書を開いているところです 下にスクロールしていくと HTML5の仕様書に含まれる要素や 属性の説明の目次が表示されています この中にnav要素についても 記載がありますので この詳細リンクをクリックします nav要素についての詳細が表示されました 仕様書に書かれている内容は 元々英語で 専門的かつ技術的な 内容になっていますので ここでは簡単な概要を紹介しておきます ここにはnav要素がどのような コンテンツモデルに属しているのか あるいはどのような属性が使えるのか 閉じタグは使うのか あるいはARIAの役割は何なのか といったことが書かれています ここで重要になるのは nav要素をどういう場面で 使えばよいかということです 少し下にスクロールしましょう ページのこの部分をみると nav要素はページ内の他のページや部品に リンクしているページのセクションを表す というふうに書いてあります そのためWebページの中で 他のページにリンクしている箇所に このnav要素を適応すればよさそうです この下には3つのNoteが存在しています 一つ一つ概要を説明していきましょう まず一番上のNoteです この一番上のNoteには nav要素の中に複数のリンクを設ける場合 リストを使ってマークアップすると便利である ということが書いてあります また次のNoteでは nav要素に含まれるリンクは Webページの全てのリンクを含めなくても よい ということが書いてあります つまりWebページ内に存在する 全てのリンクを nav要素の中にいれなければ ならないわけではない ということです nav要素として定義が必要なのは 主にサイトのメインナビゲーションである というふうに考えればよいでしょう 例えばフッターに設置されている 小さな著作権へのリンクなどは nav要素に含めなくてよい ということです そして最後のブロックのNoteには ユーザーエージェント、つまりブラウザが このnav要素で囲われたエリアを 特定の領域に移動するために利用している ということが書かれています これはスクリーンリーダーなどのブラウザが nav要素の中に入っているリンク要素を どのようにユーザーに伝えるか このようなことを 判断できるようにしているからです 以上のようなことを踏まえて 実際にサンプルページに対して nav要素を追加してみましょう 別のタブですでにサンプルファイルの HTMLを開いています このサンプルページではサイト内の 他のページへのリンクが存在しています これはこのサイトの ナビゲーションといってもよさそうです 少し下にスクロールすると サイト内ではなく別のサイトのリソースに 対するリンクが貼られています これもリンクのリストですが nav要素を適応するかどうかは 議論が分かれそうです さらに下にスクロールすると 通常のリンクやフッターに細かい リンクがいくつか並んでいます さて これらのリンクの中で nav要素を適応するのに一番適しているのは どれでしょうか 先ほどの 仕様を確認したことを考えると やはり このページ冒頭のリンクに対して nav要素を適応するのがよさそうです 意見が分かれるのは 先ほどの この外部リソースへのリンクのリストです これらはあくまで外部のリソース 外部のWebサイトへのリンクであり このWebサイトの中で移動するための ナビゲーションではありません ではこのリンクリストにnav要素を 適応するのがよいでしょうか それとも適応しないのがよいでしょうか このようなことを考えながら エディタを開いてみます 先ほどブラウザで開いていたHTMLを コードエディタで開いたところです まず冒頭の このサイト内の リンクリストについて nav要素を適応しましょう このように複数のリンクを含む場合 リストでマークアップするのが適切 ということでした このリストに対して nav要素をマークアップします リストの外側に対して nav要素を記述します nav要素はnavという綴りです 開始タグをリストの前に 終了タグをリストの後に入力します これでこのリストの部分が nav要素としてマークアップされました つぎに下にスクロールし 外部サイトへのリンクリストを 確認してみましょう これは先ほど確認したとおり サイト内ではなく外部のサイトへの リンクのリストです また内容をよく見ると これはナビゲーションというよりも 情報を提供しているリスト というふうに言うこともできるはずです また当然 内部のページへ リンクしているわけでもありません このような場合 あえてこのリンクリストを nav要素としてマークアップしなくてもよい と考えます これは一つの考え方です 必ずしもこの考え方に従う必要はありませんが 内部のページにリンクが貼られているかどうか それがナビゲーションであるかどうか といった基準をnav要素として マークアップする基準にして下さい このレッスンではサイト内の ナビゲーションを定義する nav要素について学びました

HTML入門トレーニング

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

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

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

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

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