HTML入門トレーニング

コンテンツモデルを理解する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLのほぼすべての要素が属している、コンテンツモデルについて学びます。
講師:
07:44

字幕

このレッスンでは、HTMLのほぼ、 すべての要素が属している コンテンツモデルについて学びます HTMLではさまざまな要素によって、 その文書が構造化されています その、それぞれの要素について学ぶ前に、 まず、コンテンツモデルについて 理解しておきましょう HTMLのほぼすべての要素は少なくとも ひとつのコンテンツモデルに属しています そして、モデルはその要素の中にある コンテンツの種類を定義しており、 かつ、その子供にどのような要素が入るか どのような要素が入れ子にできるか、 といったルールをコントロールしています HTML5の前には、基本的には 2つのコンテンツタイプ ブロックレベルとインラインレベルのみでした この2つのコンテンツモデルと現在の HTML5コンテンツモデルの違いを示すため エディターでHTMLを開きます エディターでサンプルファイルの HTMLを開きました このHTMLの中を見ると、まずh1、 見出しのトップレベルが宣言されています その下には、3つのp要素 pタグで囲まれた部分が3箇所あります それぞれのpタグの中には、bタグ 他のテキストとは区別をつけるための bタグで囲まれたエリアも いくつか見ることができます ページの一番下の方にはaタグで他の ページに対するリンクも作成されています これがこのHTMLの文書構造です これによって、ブロックレベルと インラインレベルの 要素の違いを確認してみましょう まず、ブロックレベル要素は文章の流れの中で 1つのライン、行として表示されます 対してインラインレベル要素は他の コンテンツの中のフローの中に表示されてます このHTMLをブラウザーで プレビューしてみましょう ブラウザーを表示しました ここで見ることができるのは、見出しや段落が それぞれの上下に、積み重なって 表示されているということです 対して、bタグやaタグは、 それぞれのコンテンツのフローの中、 流れの中に表示されています これが、ブロックレベルとインラインレベルの 違いのようなものです これは、HTML5以前の時代に、 唯一持っていたコンテンツモデルです HTML5では、そのコンテンツモデルは 主に7つに分かれています それは、ここに表示されている セクショニングの7つです これらはブロックレベル要素や インラインレベル要素と全く別のものではなく これらのいくつかブロックレベル要素としての 振る舞い 或いは他のものはインラインレベル要素として 振る舞いを持っています それではここで、各コンテンツモデルの 詳細について見ていきましょう W3cのHTML5の仕様書の中に、 これらのコンテンツモデルを明確に表す インタラクティブグラフィックがありますので そちらを開いてみましょう このHTMLに、そちらのインタラクティブ グラフィックへのリンクが含まれていますので このリンクからジャンプします グラフィックが表示されました このグラフィックは インタラクティブになっており マウスを重ねることで、 そのコンテンツモデルにどのような 要素が属しているかを 画面右側に表示します ここで注意したいのは、1つの要素は1つの コンテンツモデルに属しているのではなく、 複数のコンテンツモデルに属していることも あるということです 1つずつ見ていきましょう まず、メタデータコンテンツです メタデータコンテンツは、 そのHTMLのメタデータ つまり、表に表示されないような情報を 管理するためのものです 右側に表示されているようにメタタグや、 ノースクリプトタグ、スクリプトタグ、 スタイルタグ、タイトルタグなどが含まれます 次に、エンベッディッドコンテンツです エンベッディッドコンテンツは ドキュメントの中に、 他のリソースを読み込んでくるコンテンツです 例えば、右側に表示されているように、 オーディオ、キャンバス、エンベッド、 アイフレーム、イメージなど 様々な他のリソースを読み込むための タグが表示されています インタラクティブコンテンツは 主に、ユーザと対話 操作を行うようなものです 代表的なものにaタグ、リンクを貼るための タグなどが挙げられます 他にも、オーディオやビデオ、 イメージなどのタグがあります ここで要素の右横に、アスタリスクが 表示されているものがあると思います このアスタリスクは特定の状況下、 ということを示しています 例えば、ビデオタグではユーザの操作を 要求しないといったケースも考えられます そのため、非インタラクティブな動作をする 場合がある要素には アスタリスクが表示されています ヘッディングコンテンツは、基本的に 見出しを表します h1からh6まで、様々ななレベルの見出しの タグが含まれています 次は、フレージングコンテンツです このコンテンツモデルに含まれる要素は、 少し多いですね これは文書のテキストや、段落の中に含まれる 特定の意味のテキストを示しています HTML5以前でいうインラインレベル要素に 近いものです aタグや、ボタン、アイフレーム、プログレス インプット、スパン、ボールドなど さまざまな要素が含まれています 次に、最大の大きさを誇る フローコンテンツです フローコンテンツには、HTML5の要素の 大半が含まれています これは、ドキュメント内に現れる コンテンツ全般を表すためです 最後に、セクショニングコンテントです。 セクショニングコンテントとは、 見出しからまでフッターといった あるコンテンツのセクション、 範囲を規定するためのものです アーティクルタグ、aサイドタグ、 ナビタグ、セクションタグのように、 HTML5から追加された、新しいタグが 含まれています ここでは、すべてのコンテンツモデルに対して どのタグがどのコンテンツモデルに属している といったことをすべて記憶する必要ありません 重要なのは、HTML5にはこのように7つの 主要なコンテンツモデルがあり、 それぞれがそれぞれの意味を持っている といったことを理解することです このレッスンでは、HTMLのほぼすべての 要素が属している コンテンツモデルについて学びました

HTML入門トレーニング

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

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

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

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

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