HTML入門トレーニング

main要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの中でメインコンテンツを定義することができる、main要素について学びます。
講師:
04:58

字幕

このレッスンでは html の中で メインコンテンツを定義することができる main 要素について学びます 画面では W3C の勧告する HTML5 の仕様書の中で main 要素に関する詳細ページを 開いているところです 少し下にスクロールして main 要素の概要について紹介していきます main 要素は文書やアプリケーションの中で 本体となる主な内容を表しています これは非常に特異な要素です メインコンテンツの領域は コンテンツに直接的に関連している内容で 構成され そのドキュメントの核となるトピックを 含んだり アプリケーションの中心的な機能を 含んだりします 法律用語のように 難しく聞こえるかもしれませんね 例えば あなたがスクリーンリーダーを使っていて main 要素のあるウェブページを 訪れたとしましょう この時 ページの中に main 要素があると コンテンツの主要な部分に スクリーンリーダーがジャンプして そこから読み上げ始めることが できるようになります main 要素によって このページの主な内容がどれかを 識別できるからです main 要素は ページの中で 一つだけ使うことができます また main 要素はアウトライン セクションを生成するわけではありませんので フローコンテンツとして扱われます この下の Note の部分 緑のこのノートの部分にも そのように書いてあります main 要素は セクショニングコンテンツではありません そして その下のこの部分の概要には main 要素で定義された内容は その文書に固有である内容を含む と書いてあります つまり 他のページにも 同じものがあるようなコンテンツは main 要素から除外すべき ということです 例えば サイトナビゲーションのための リンク 著作権情報 ロゴ バナー このようなものです このようなものは 一つのウェブサイトの中では 複数回 様々なページで出現する可能性があります このようなコンテンツは main 要素から除外すべきということです 逆に言うと main 要素のコンテンツは 「ユニーク」 「一意」である必要があり かつ ページのメインコンテンツである 必要があります この要素を使うことによって 任意のデバイスや 検索エンジン スクリーンリーダーなどに このページのメインコンテンツは何か ということを伝えます 実際に コードで試してみましょう サンプルの HTML をコードエディターで 開いています HTML の中を見ると 見出しや本文などで 内容が構成されていることがわかります 実際に この HTML に main 要素を適用してみます 冒頭の見出しや ナビゲーションについては 他のページでも使われるコンテンツです そのため この部分については main 要素に含めないほうがよさそうです その下の記事のメインの部分 タグでくくられている部分が このページのメインコンテンツと言えそうです 実際に main 要素を マークアップする時に このページでは この article 要素は一つだけで しかもメインコンテンツですので この article 要素自体を main 要素に変更する という考え方もあるかもしれません しかし ここでは この article 要素を main 要素で くくるようにマークアップをします article 要素の前後に main 要素の 開始タグと終了タグを入れました 実際に このような構成 このようなマークアップが適切かどうかは 時と場合によります また 実際その中に入っているコンテンツが どのようなコンテンツなのか そして それが果たして そのページのメインコンテンツなのか article として正しいマークアップなのか このようなことをふまえた上で マークアップしていくとよいでしょう ここでは article タグを main タグで くくるようにマークアップしました 実際 これを保存し ブラウザーで表示をしても 特に元々の見た目から 変わるわけではありません しかし HTML の中で main 要素をマークアップすることで この本文の部分 この部分がこのページの メインコンテンツであるということを あらゆるデバイス 検索ロボット ユーザーエージェントなどに 伝えることができます これにより 非常にセマンティックな マークアップが実現できているのです このレッスンでは HTML の中で メインコンテンツを定義することができる main 要素について学びました

HTML入門トレーニング

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

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

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

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

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