HTML入門トレーニング

aside要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの中でメインコンテンツほど重要ではない、補足的なコンテンツをマークアップするためのside要素について学びます。
講師:
05:40

字幕

このレッスンではHTMLの中で メインコンテンツほど重要ではない 補足的なコンテンツをマークアップするための aside要素について学びます Webサイトの中でよくみかけるパーツとして サイドバーがあげられます 様々なWebサイトにアクセスして サイドバーを見ない日はあまりありません しかしHTML5が登場するまで このサイドバーをマークアップするために 適切なセマンティックな要素が ありませんでした それでは具体的に aside要素についてみていきましょう 現在画面ではブラウザで W3Cが勧告しているHTML5の仕様書を 開いているところです そのなかにあるaside要素の 詳細ページがこのページです この下の箇所にaside要素をどのような 時に使うか ということが書いてあります ここにはaside要素は あるコンテンツに関連するコンテンツとして 定義するための要素である というふうに書かれています 多くの場合 先ほど紹介したような Webサイトのサイトバーとして使われます 他にも 広告であったり あるいはメインコンテンツとは 切り離して表示したいコンテンツであったり あるいはナビゲーションの中の 他のグループであったり といったように様々な用途があります aside要素は文章のメインフローの 一部であり あくまで単体で使うことはない ということが この下のNoteの部分にも書かれています またaside要素はセクションを 構成する要素でもあります そのため文章の中で aside要素が使われると ひとつのアウトライン セクションを生成します それでは実際に aside要素をどのように使うべきか サンプルページで確認をしていきましょう ブラウザでサンプルファイルの HTMLを開いています このページには見出しや 記事の内容が入っています 記事の内容はいくつかの見出しと 本文に分かれており 下をスクロールしていくと 見出しが全部で五つあることが分かります また それぞれの見出しと本文はセクション として個別にマークアップされています このような文章構造でaside要素は どのような場所に使うでしょうか このHTMLをコードエディタで開きましょう コードエディタに切り替えました 下にスクロールしていくと 先ほど見た「W3Cの警告」という h4要素でマークアップされた 見出しを見つけることができます この見出しは一つの セクションの中に入っており そのセクションの一番最初にでてくる見出しは h3要素でマークアップされています つまりこの「W3Cの警告」という見出しと その下にある本文は このh3の見出しと本文に対する 補足的な情報である ということが分かると思います また実際この本文の内容を読んでも ここに書いてある内容はあくまで この「ドキュメントのアウトライン」 というトピックに対して補足的な情報である ということが分かっており そのような場合にaside要素でこの部分を マークアップすることが適切と言えます それでは実際に マークアップをしていきましょう このh4の見出しと その下にある本文の部分 この部分を一つのaside要素として マークアップします h4の見出しの前に改行を入れ aside要素 綴りはaside このタグを入力します 終了タグは本文の後ろ そして セクションの終了タグの前に入力します これでh4の見出しとそれに伴う本文が 一つのaside要素として マークアップされました このaside要素は 一つのセクションの中に入っており そのaside要素の前にある このh3の見出しとそれに対する 本文の補足情報である ということがこのマークアップ構造から 読み取ることができます もし仮にこのaside要素が セクションの中ではなく 全体のarticle要素の外側にあった場合 もし仮にこのようなレイアウトであった場合 このaside要素は article要素の関連要素 つまりこのWebページにおいては 記事に対する補足情報 というふうに解釈することもできます aside要素は配置される場所によって どのコンテンツに対する補足情報なのか ということを規定することができます ここではセクションの中の補足情報 ということでしたので 先ほどと同じように セクションの中にaside要素を配置します このレッスンではHTMLの中で メインコンテンツほど重要ではない 補足的なコンテンツをマークアップするための aside要素について学びました

HTML入門トレーニング

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

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

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

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

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