HTML入門トレーニング

section要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
1つのセクションを定義するsection要素について学びます。
講師:
06:41

字幕

このレッスンでは一つのセクション 区切りを定義する section要素について学びます section要素はどのような時に 使えばよいでしょうか それを確かめていきましょう 画面ではブラウザでW3Cの HTML5の仕様書の中から section要素に関するところを 開いているところです それではsection要素の 具体的な記述についてみていきましょう 少し下にスクロールすると section要素をどういう時に適応すべきか そういう説明が書いてあります ここにはsection要素は ドキュメントまたはアプリケーションの 一般的なセクション 一部分を表す とあります セクションとはこの文脈においてコンテンツの テーマ別にグループ化したものです 各セクションのテーマは その特定のセクションを把握するために 子要素としてh1からh6要素 つまり見出しを持ちます 例えば文章を書く上での章 チャプターにあたる部分 タブで分かれているようなページの 一つ一つのタブ 論文における番号付きのセクション などです 一つのページをセクションで分割する 具体的な例としては 一つのページの中に含まれる サイトの紹介が一つのセクション ニュースが一つのセクション 連絡先情報が一つのセクション といった具合です さて その下のNoteと書かれている 部分には それがarticle要素として 理にかなっている場合は section要素の代わりに article要素を使うことを推奨する とあります つまり それは要素単体で独立できるかどうか 独立して存在できるのであれば article要素にすべき ということです もう一つ 下のNoteには section要素は一般的な コンテナ要素ではない とあります コンテナ要素とは何のことでしょうか これはつまり 要素が意味づけなどではなく CSSでスタイリングするためだけ あるいはJavaScriptで動きをつける ためだけに必要な場合は div要素 つまりコンテナ的な要素として div要素を使うべき ということです section要素はそれが文章の中で 一つのアウトラインとして 一つのセクションとして明示されますので その点に注意しましょう それではサンプルページを開いてみましょう ブラウザの別のタブですでに開いている サンプルページのHTMLに切り替えます このHTMLの中には 見出しやナビゲーションガイド その下には一つの記事があります この記事の内容はいくつかのブロック セクションに分かれています 一つめは「構造を通して意味を伝える」 二つ目は「セクション関連要素」 そして三つ目は 「ドキュメントのアウトライン」 四つ目は「W3Cの警告」 そして最後が「WAI-ARIAの役割」です このようにいくつかの セクションに分かれている というふうに考えることができます それでは実際にこれらをsection要素を 使ってマークアップしていきましょう コードエディタに切り替えて 先ほどブラウザで表示したhmlを開きます 記事の中に含まれるそれぞれの セクションを確認していきましょう 記事全体はarticleタグで 囲われています そしてその中には h3要素で見出しがあり それに伴う本文があります 一つ一つのセクションは見出しと本文 このようなセットで構成されています そのため一つめのセクションは このarticle要素の直後に挿入するのが 正しそうです section要素はsection という綴りで入力します 見出しで始まり 本文があり 次の見出しが始まる前に セクションタグの終了タグを入力します これで一つのセクションができました 次のこのセクション関連要素の見出しの部分も 一つのセクションとして記述しましょう セクションタグを追加し 次の見出しの直後まで セクションが続きます ここにセクションの終了タグを挿入します そしてここにも もう一つセクションタグを追加し 次の見出しの前に セクションの終了タグを入れます 最後も同じです これで一つのarticle要素を四つの セクションに分割することができました それぞれのセクションには小見出しがあります さてここで 三つ目のセクションの途中に 頭にはh3要素で見出しを定義されていますが 途中にh4要素で見出しが定義されています このh4要素の部分は一つのセクションとして 考えることはできるでしょうか この記事では内容を見てみると この「W3Cの警告」という内容については この上にある「ドキュメントのアウトライン」 の中に含まれる内容です そのため この部分を一つの セクションとして独立させるのではなく この「ドキュメントのアウトライン」に 含まれる一つのセクションとして 定義する方が正しそうだ というふうに判断しました このような判断はWebページの内容や 考え方によって異なります そのため冒頭でW3CのHTML5仕様書で 紹介したような内容を踏まえた上で そのコンテンツがセクション要素として 正しくマークアップすべきかどうか これを判断の基準とすべきです このレッスンでは一つのセクション 区切りを定義する section要素について学びました

HTML入門トレーニング

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

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

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

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

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