HTML入門トレーニング

見出しを追加する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コンテンツに書式を設定する上で、まず重要になる、見出しの設定の仕方について学びます。
講師:
09:10

字幕

このレッスンでは コンテンツに書式を設定する上で まず重要になる見出しの設定のしかたについて 学びます 見出しはウェブページを構築し コンテンツの階層を決定するために 使うものです 詳しく見ていきましょう エディターでサンプルファイルの HTML を開いています ここでは body タグの中に 多くのテキストが入っています テキストはそこが見出しなのか あるいは本文なのか という区別をつけるために ひとまず改行を入れた状態で 入力しています この HTML をブラウザーで プレビューしてみましょう ブラウザーを開きました 先ほどの HTML を そのまま表示しているところです このようにブラウザーでは 何もマークアップされていない HTML を 表示した時は すべてが一つのつながったテキストとして 表示されます このテキストに対して 見出しを追加していきましょう エディターに戻ります 見出しを追加する時はまず h1 タグから使います 一番上の 「HTML 入門トレーニング」 という文字列を 見出しに設定してみましょう h1 タグを使って山形括弧を書き 開始タグと終了タグの間に 設定したい見出しのテキストが入るように 設定します これで 「HTML 入門トレーニング」 という文字列に見出しが設定できました 次の行にも 見出しを設定してみましょう ここでは h2 というタグを使います 同じように タグを入力し テキストを開始タグと終了タグの間に 入力します ここで一旦 保存し ブラウザーで表示してみます ブラウザーを再読込みすると 見出しが定義されていることがわかります 残りのテキストは あいかわらず 一つのまとまりになって下に表示されています ここで h1 と h2 については フォントの大きさが テキストの大きさが 変わっていることがわかります h1 のほうが 少し大きく表示されていますよね 見出しのレベルには h1 から h6 が 存在します 試しに この h2 の見出しを h6 にしてみましょう エディターに切り替え h2 を h6 に 変更し保存 ブラウザーに切り替えて リロードします すると 見出しのフォントサイズが 小さく表示されました h6 では通常のフォントサイズよりも 小さいフォントサイズになるようです このように見出しのレベルを変更すると ブラウザー上で表示されるテキストのサイズが 変わりますが これが 一つの混乱の元でもあります 以前の HTML では このように ブラウザー上の見栄えを制御するために タグを変更する ということが しばしば行われていました 例えば このように 見出しが小さければ 少し大きくするために h6 から h5 に変更したり あるいはもっと大きさが必要という場合に h5 から h4 に変更したり といったようなことが行われていました しかし それは間違った方法です HTML で必要なのは そのテキスト そのコンテンツがどのような意味を持つか どのような意味を持ったコンテンツなのか といったことをマークアップすることです そのため ここでは 見出しに対してレベルを定義していきますので h1 つまりトップレベルの見出しの次に いきなり 6 番目のレベルの見出しが来る ということは 不自然になってしまいます フォントサイズを変更したい場合は HTML ではなく CSS を用います ここでは 一旦 見出しのレベルを h1 にして 設定しておきましょう エディターに戻ります h6 の部分を h1 に設定します その他の見出しについても 一旦 h1 で定義をしておきましょう 「見出しを追加する」 という文字列に h1 タグを追加します さらにその下の 「段落を使う」 という文字列にも h1 タグを設定します そしてさらに この 「改行」 という部分にも h1 で タグを設定します 保存し ブラウザーに切り替え リロードしてみます これでページ全体の見出し部分に すべて h1 タグを入力しました 先ほどと違って いきなり h6 の見出しが出てくる ということはなくなりましたが すべての見出しが同列 同じレベルとして 扱われています しかし この内容をよく見てみると すべての見出しは同じレベルではないことが わかります 一番始めの 「HTML 入門トレーニング」 という見出しは すべての見出しに対する見出し つまりトップレベルの見出し ということが言えます そして 「コンテンツに書式を設定する」 という見出しは そのトップレベルの見出しの 次のレベルの見出し さらに下の 「見出しを追加する」 「段落を使う」 「改行」 については この 「コンテンツに書式を設定する」 の 次の見出し つまり 大きく分けて 3 つのレベルの見出しがある ということがわかります このように見出しを使うと HTML 全体の文書構造に対して どのような階層構造になっているのか ということを考えることができます 実際にコードエディターに戻って 見出しのレベルを変更してみましょう 先ほどはすべて h1 に設定していますが レベルを変更していきます 二つ目の見出しは h1 ではなく h2 へ そしてそれ以外の見出しは h3 に変更します 必ず開始タグと終了タグの 両方の名前を変更することを 忘れないようにしてください これですべての見出しのレベルを 変更できました 保存しブラウザーに切り替え リロードします 先ほどと比べて HTML 内の文章の 階層構造がはっきりしました どの見出しがどの見出しに所属しているのか それが非常にわかりやすくなっています ウェブサイトを設計する時には このように どの見出しがどのレベルにあるのか ということを考えながら設計すると より良いでしょう エディターに戻って その見出しのレベルを考える上での デモンストレーションをご覧に入れます Brackets に Document Outliner という 拡張機能を入れた状態です この拡張機能を使うと その HTML に含まれる見出しのレベルを アウトラインで表示することができます これはあくまでデモンストレーションですので Brackets を使っていない方や Brackets を使っていても このような拡張機能を インストールしなくても構いません この機能を使うと HTML 全体の 階層構造が明確になるため これを基に 見出しの階層を考えることができます またこのような拡張機能を使わなくても デザイン段階で ある程度 階層構造を想定しておくことが大事です 見出しのレベルは 検索エンジンでも 重要視されています 検索エンジンはその HTML の中に どのような見出しがあるのかを チェックしています HTML をマークアップする時には そのコンテンツの内容を 全体を通して見て 論理的に意味が破たんないように この見出しのレベルを付ける必要があります 特に必要になるのは レベルをスキップしない 飛ばさない ということです 例えばこの HTML では 始めに h1 次に h2 そしてその次に h3 というように レベルを一段階ずつ下げて 設定しています いきなり h1 から h4 に行ったり h6 に行ったりといったことは 避けるべきです また ブラウザーでどのように表示されるか ということを基準にするのではなく その見出しがどのようなレベルであるか ということを 論理的に決定するようにしてください このレッスンでは コンテンツに書式を設定する上で まず重要になる見出しの設定のしかたについて 学びました

HTML入門トレーニング

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

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

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

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

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