はじめてのHTML&CSS入門

見出しタグ(h1 〜 h6)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの情報構造でもっとも大切な見出しタグの記述方法、また設計の仕方を学びましょう。
講師:
05:42

字幕

このレッスンでは、架空の web サイトの情報を使って見出しタグ、H1 から H6 タグの練習をしていきましょう。まずは、チャプター2でレッスン4のファイルを開きましょう。このファイルには、既に文字情報が入っています。この文字情報はトラベルガイドという架空の web サイトを想定していてそれぞれの行が一応見出しになると予定になっています。ですので、こちらの見出しに適切な見出しタグを設定することでマークアップを情報設定していきましょう。まずは、BODY のタグの下から見出しをマークアップして行きましょう。まずは、「トラベルガイド」と書かれていますのでこちらはサイト名で一番大切な情報です。ですので、H1これが開始タグですねそして、行末で閉じの H1/で終了タグを表現しましょう。この H は、ヘディングもしくは、ヘッドラインのHでweb ページにおいて最も大切なタグです。このヘディングタグを構造化することによってページの目次であったりアウトラインを表現することができます。H1 が最も大切な見出しそして、数字の1から数字の6まで段階がありまして数字が下がるほどの重要度は低くなっていきますが数字の関連性に注目して見出しをつけていくことが大切になります。 それでは、9行目「すてきな旅行を提案するウエブマガジン」というのがこのサイトのコンセプトですのでこちらは H2 で、マークアップをしていきます。そして行末に移動しまして終了タグを同様に打っていきましょう。そして、次はこのサイトについてここからは、このサイトのコンテンツという位置づけになっています。それでは、見出しのレベルを1つ下げてH3 というタグを使っていきましょう。開始タグを終了タグを入れていきます。そして、「このサイトについて」の次は「旅行情報を調べる」というコンテンツがあるようなのでこちらを H4 としてマークアップしていきます。そして、終了タグは/H4 です。次は国内旅行と海外旅行というジャンルがあってそれぞれで調べられる、つまり H4 と少し関連性があるという状態です。そして、国内旅行と海外旅行では優劣、情報の優劣を付けないようにします。この場合は、まず、国内旅行が H5、同様に、海外旅行の同格の情報ということでH5を使っていきます。もしもここが H6 なってしまうと国内旅行の次に、もしくは、国内旅行見てから海外旅行といった意味合いになってしまうので同格の見出しは同格の数字でマークアップをしてあげましょう。 そして次のコンテンツは「旅行の準備をする」です。この「旅行の準備をする」とこの11行目の「旅行情報を調べる」このサービスのコンテンツが同格であるというような位置づけにしたいのでここは H4、そして終了の H4 タグを記述します。このことによって、この web ページもサービスで2つ柱があって、旅行情報を調べるということと旅行の準備をするというコンテンツがあるというふうに表現ができます。そして、最後に情報収集というコンテンツがありますのでこちらもマークアップしたいと思います。「旅行の準備をする」という見出しの中に「情報収集」と「持ち物」という同格の情報があるとします。同格の情報で「旅行の準備をする」カテゴリーの中にありますのでこちらは H5、そして閉じの H5同様に「持ち物」も H5、そして終了タグも H5と記述します。そして、「便利なリンク集」という文言がありますがこれは、最後の見出しということになりますので今回は、H6という風に記述して見出しの最後までを使い切ってみました。必ずしも、web ページで H1 から H6 まで使い切る必要はありません。ただ、一番重要な情報は H1、そして、H2H3 と順番通りに使うことが大切です。 正しいアウトラインを設定することで検索エンジンにも好ましい web サイトというふうに認識されるようになっています。まずは、web サイトは見出しから設計するということを覚えておきましょう。このレッスンでは、見出しのHタグについて学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

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

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

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