HTML入門トレーニング

article要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
記事を定義するarticle要素について学びます。
講師:
06:30

字幕

このレッスンでは 記事を定義する アーティクル要素について学びます アーティクル要素は HTML5で導入された 全ての要素の中でも 混乱を招きやすい要素です 具体的にはどのようなコンテンツに対して アーティクル・タグを適用すればよいのか これは しばしば議論の対象になります 詳しく見ていきましょう 現在ブラウザーでは W3CのHTML5の仕様書を開いている所です アーティクル要素の詳細を表示していますので 少し下にスクロールします ここではアーティクル要素を どのような時に使えばよいか 概要が書いてあります 少しあいまいですが 内容を紹介します アーティクル要素は 文書 ページ アプリケーション 又はサイトで完全に自己完結している 構成を表しています そして それは原則として 独立して存在したり 再利用したりする事が 可能でないといけません たとえば フォーラムの投稿 雑誌や新聞の記事 ブログのエントリー ユーザーが送信したコメント インタラクティブなウィジェットなどの様なものです ここで挙げられている例は HTMLのコンテンツとしても かなり幅広い範囲なので 漠然としているかもしれません 重要なことは アーティクル要素でマークアップされた記事は 一つ一つが 独立した記事として存在しているかどうか という事です そしてもう一つ重要な点は 他のコンテンツから削除された場合でも アーティクル要素単体で 意味が通じるかどうか という点です 意味が通じるとすれば それは一つのアーティクル要素として マークアップする事が出来ます これがページ構造の中で それがアーティクル要素かどうかを 決定出来る基準です 続いて アーティクル要素が 入れ子になった場合はどうでしょうか その時のことについて ここに記述されています 一つのアーティクルが 別のアーティクルの入れ子になることはできますが その場合は 親のアーティクルに 関連している必要があります また 少し下に 重要なことが書いてあります 仮に アーティクル要素が ページのメインコンテンツである場合 そのページの中でメインのコンテンツが アーティクル要素である場合 このような場合は アーティクル要素ではなく メイン要素を使って マークアップすべき という事です これをさらにアーティクル要素として マークアップすることも出来ますが 冗長である というふうに書かれています しかし 実際に 一つのページに一つのアーティクルしかなかった場合でも アーティクル要素を省略するかどうかは 議論の分かれるところです 実際にはそのウェブページの構造を 筆者がどのようにとらえるか という事が重要になってきます それではここで サンプルファイルをブラウザーで開いてみましょう 別のタブに切り替えます こちらのHTMLはサンプルファイルを開いているところです ページの中身を見ると 見出しや リンク あるいは 本文 こういったものがリストアップされています ページのトップには ナビゲーションがあり その下には この 「ページの構造化」 というタイトルに基づく 記事が リストアップされています これを実際に マークアップするときは どのように考えればよいでしょうか この記事は一つ一つのブロックを 一つ一つの記事として 見ることが出来るかもしれません しかし 先ほどの説明のように この一つのブロックを抜き出してしまうと 全体としての意味が通らなくなる という 構成になっています そのため この一つ一つのブロックが 別々のアーティクル要素 というわけではなく この 本文の部分 この 本文の部分すべてが 一つのアーティクル要素である という風に考えることが出来ます つまり 実際にコンテンツを アーティクル要素としてマークアップするかどうか という事を決める時には 記事の内容について 考える必要があるという事です 実際にコードエディターで このHTMLを開いて マークアップをしてみましょう コードエディターに切り替えます 先ほどブラウザーで開いていた HTMLと同じHTMLを開いています 冒頭のナビをその下に 記事が ずっと続いています この記事全体を アーティクル要素として マークアップしていきます アーティクルは a r t i c l e という綴りでタグを入力します 開始タグは ナビ要素と h3要素 の間です そして 終了タグを一番下に追加します この時一番下の段落 この段落は コピーライト 著作権表記や ツイッターへのリンクが入っています これはサイト全体に対する 表記ですので 記事には含めません そのため このコピーライト表記の前に アーティクル・タグの 終了タグを入れます これで アーティクル・タグのマークアップが完了しました このページでは ページの冒頭に サイトのナビゲーションである ナビ要素がありました そして 記事は 内容を見ると この テキスト全体が 一つの記事 このテキスト全体で 一つの記事を構成している という風に考えられるため 全てを アーティクル・タグで くくりました そして 一番最後の 著作権表記については この表記については 記事に含まれなくても意味が成り立つため これは アーティクル・タグの 外側に配置しています アーティクル要素は先ほども申し上げた通り それ単体で 独立して存在できるかどうかが重要なカギになります このレッスンでは記事を定義する アーティクル要素について 学びました

HTML入門トレーニング

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

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

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

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

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