HTML入門トレーニング

アウトラインを制御する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLのアウトラインを制御するため、見出しとセクショニング関連要素を使う方法について学びます。
講師:
11:25

字幕

このレッスンでは HTMLのアウトラインを制御するため 見出しと セクショニング関連要素を 使う方法について学びます ウェブページを構築する際に まず考慮すべきことは 生成するドキュメント 文書のアウトラインが どうなっているか という事です HTMLでは この様なアウトラインを作るために 見出しと セクショニング要素を使う事が出来ます これは 多くの場合 目次のように考えることが出来ます アウトラインを作ると デバイスは 特定のセクションが どのように構成されているのか という事を把握できるようになり また お互いにどのようなコンテンツが 関連しているのか という事がわかるようになります ウェブサイトの 正しい文書のアウトラインを生成する事は ウェブサイトを成功に導く 第一歩です 画面ではコードエディターで サンプルファイルのHTMLを 開いているところです 全体的にスクロールしてみると 段落と あらゆるリストが 含まれていることがわかります 実際にブラウザーでプレビューしてみましょう ブラウザーで先ほどのHTMLを見ると このように 通常の段落と リストが 表示されていることがわかります エディターに戻ります HTMLの内容は 自己紹介をふまえたものです 好きな本や 好きな映画 あるいは その映画の中では カテゴリーとして 映画が有ったり テレビ番組が有ったり 好きな音楽を紹介する箇所では ジャズやロックやアメリカ音楽など 様々なカテゴリーの物を紹介しています これらは 現状 すべて普通の段落 あるいは リストでマークアップされていますので アウトラインは無い状態です 現在使っている コードエディター ブラケッツでは ドキュメントアウトライナー(Document Outliner) という 拡張機能を インストールすることで ドキュメントアウトライナー(Document Outliner) という 拡張機能を インストールすることで ドキュメントのアウトラインを 表示することが出来ます 表示メニューから ショー ドキュメント アウトライン (Show Document Outline) をs 選びます すると現在のドキュメントには 何もアウトラインが存在していないことが わかります このような拡張機能を使わなくても アウトラインを確認する手段があります 現在のHTMLを すべてコピーしておきましょう ブラウザーを開き HTML5 アウトライナー というウェブサイトを開きます このウェブサイトでは HTMLファイルを選んだり あるいは URLを入力したり またまた HTML自体を このテキストエリアに入力することで HTMLのアウトラインがどのようになっているかを 表示できるサービスです 先ほどコピーしたHTMLを ここに貼り付けて アウトラインを確認してみましょう Outline this というボタンをクリックします 先ほどと同じように 現状では 何もアウトラインが存在していない状態です いったん戻って コードエディターのコードを改善していきましょう まずはじめに コードの中では 「私のブログ」 というテキストが 一番最初に出現します これはこの自己紹介の文章の タイトルともいえるものなので レベル1の トップレベルの見出し h1に定義を変更しましょう p要素の 開始タグと終了タグを p から h1 に変更します その下のサイトナビゲーションについては ナビゲーションとして 利用する予定です ここではそのまま残しておきましょう その下の 「私の好きなこと」 というテキストは この 「私のブログ」 という 見出しの中に属している小見出し という風に言うことが出来ると思います そこでここでは レベルが2の見出し h2 に変更しておきましょう 続いて 「好きな本」 この「好きな本」は 「私のブログ」に属して かつ 「私の好きなこと」 に属しています そのためレベルは 3 h3として 定義を変更します このh3と同等のレベル 同等の階層の見出しとして 「好きな映画とテレビ番組」 や 「好きな音楽」等が挙げられます これらも 後ほど 見出しのレベルを変更していきます 「好きな本」の中には 「フィクション」 と 「ノンフィクション」 というサブカテゴリーがあります これらも見出しとして 扱うことが出来ますので レベルを一つ下げて h4 の見出しとして扱うようにしましょう 「フィクション」 と 「ノンフィクション」 は同レベルですので こちらも同じ h4 この見出しを 入力しておきます 下にスクロールしていき すべての見出しをマークアップしていきましょう 「映画とTV番組」は h3 「映画」は h4 このh3に属している見出しですね そして「テレビ番組」も h4 「映画」と並列になる見出しです その下の 「好きな音楽」は h3 その下の 「ジャズ」「ロック」「アメリカ音楽」というのは この「音楽」に属していますので 一つ見出しのレベルを下げて h4 ということになります 全てマークアップを修正していきます 開始タグと終了タグの両方を変えるよう 忘れないようにして下さい 最後に 忘れないようにして下さい 最後に 「そのほかに好きなもの」というテキストがあります このテキストは 「音楽」や「映画」「TV番組」などと 同じレベルの見出し と考えておきたいので ここでは h3 に変更しておきます ここまで完成したら 先ほどの ドキュメントアウトライナーを使って 階層構造を確認してみましょう 先ほどは何も無かったアウトラインが このように生成されていることがわかります トップレベルの見出しとして 「私のブログ」というものがあり その下に「私の好きなこと」 その中には 「好きな本」 や 「映画」 「音楽」などが 同じレベルの見出しとして並んでいます またそれぞれの小見出しの中には さらに小見出しが 「フィクション」「ノンフィクション」や 「ジャズ」「ロック」 といった小見出しが 存在しています 一番下には 「そのほかに好きなもの」 という見出しも存在しています それではこのHTMLを すべてコピーして 先ほどの HTML5 アウトライナーに ペーストして アウトラインを表示してみましょう このように 先ほどと同じようなアウトラインが表示されました コードに戻りましょう このように 一つ一つ 見出しを設定していく事が HTML5 以前では HTMLの中でアウトラインを生成する 唯一の手段でした 現在 HTML5では この見出しに加えて セクション要素を使って もっと新しい意味づけをすることが出来ます これらの要素を紹介していきましょう まずナビゲーション要素です サイトの冒頭には このように サイトナビゲーション という ナビゲーションが入る予定のエリアがありました このようにナビゲーションを表すエリアは ナビ要素でくくることが出来ます これにより ナビ要素の中に入っている コンテンツは このウェブサイトにおけるナビゲーションである という意味付けをすることが出来ます 次に この「ブログ」における 記事を考えてみましょう この「ブログ」をウェブサイト全体と考えると このページで 記事にあたる部分は この「私の好きなこと」について 書かれている部分です そのため この部分を記事として認識させる article タグで この部分を囲っておきましょう この記事の部分は この冒頭のところから 下のところまでです 一番最後の コピーライト 著作権表示については サイト全体にかかわる部分ですので その上の部分までがアーティクルで かこわれるようにします そしてこの一つの広い記事の中には 三つのセクションがありました 「本」や 「TV番組」や 「音楽」 といったセクションです このように 見出しとその内容で区切られる 一つのセクションは セクション要素でくくることが出来ます セクション要素は sectionタグでくくります 「好きな本」の部分を sectionのタグで くくりましょう そして同じように このセクションと並んでいるのは 「映画」と「TV番組」のセクションです この部分も 新しいsectionタグでくくっておきます 同じように 「音楽」の部分も 並列のセクションとして マークアップしておきましょう 最後に残ったのは 「そのほかに好きなもの」 という領域です この部分は 記事の中で重要なポイントではありません このように 補足的に書かれている内容については セクションなどとは別に 補足である という事を示す aside タグでマークアップすることが出来ます 「そのほかに好きなもの」 全体を aside でマークアップしておきます こうしてマークアップすることによって アーティクル要素の中でも 少し重要性が薄いコンテンツである という事を示すことが出来ます HTMLを保存して 先ほどと同様に アウトラインを表示してみます 先ほどと違うのは 見出しのほかに Untitled NAV という ナビゲーションの要素が追加になっている点です それ以外の article や section、aside については 表示されていません これは セクション要素などの中には 見出しが配置されているのに対して ナビゲーション要素の中には 通常の段落が 一つ置いてあるため その段落が タイトルが無いナビゲーション要素として 表示されているのです これは HTML5 アウトライナー というサービスを使っても 同じように表示されます これは HTML5 アウトライナー というサービスを使っても 同じように表示されます このようにして HTML5では 見出しと セクション関連要素を使って ページ全体に アウトラインを与えていく事が出来ます このレッスンでは HTMLのアウトラインを制御する為 見出しとセクショニング関連要素を 使う方法について 学びました

HTML入門トレーニング

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

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

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

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

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