まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
前回は、cssの基本記述方法のレクチャー、そしてmain.cssのリセットを行いました。
cssリセットはブラウザでのWebサイトの見え方の差異を最低限にすることが目的でした。
cssリセットを行った中で、最後にこんな指定を行ったと思います。
main.css
header,
nav,
menu,
article,
section,
main,
aside,
footer {
display:block;
margin: 0;
}今回はこの中から・・・
- header
- nav
- main
- article
- aside
- section
- footer
以上のhtmlタグの解説を行っていこうと思います。
今回は非常に項目が多いので、コードの記述は行いません。
この記事の目次
htmlでそれぞれのブロックに使う各要素の説明
ますはhtmlで使う各ブロックの説明を行い、それぞれの役割を下の表で見てみましょう。
| ブロック名（htmlタグ名） | 役割 |
|---|---|
| header | サイトのヘッダー（ブロックのヘッダー） |
| nav | サイトのナビゲーション |
| main | ヘッダー・フッターを含まない主要コンテンツ <article></aritcle>および<aside></aside>を入れ子にする |
| article | 自己完結する記事などのコンテンツ <section></section>を入れ子にする |
| section | 見出しと文章のセット |
| aside | 重要度の低いサイド要素 |
| footer | サイトのフッター要素（ブロックのフッター） |
以上のものは、以前講義で解説した<div></div>タグと同じようにブロックなんですが、特に役割を持たない<div></div>タグとは異なり、それぞれ明確に役割や意味を持ったhtmlタグになります。
ここからはサンプルのサイトを参考にして、
どのhtmlタグがどこに使われているのか？その役割は何なのか？の解説を行います。
どれくらいのコード量を記述するようになるのか基準を知るためにソースコードを見てみましょう。
まず全体を確認
最初に今回解説する「それぞれのブロックの内容」をまとめた全体を確認してみましょう。
今回のサンプルWebサイトは一般的な横並び2カラムレイアウトであり、それに当てはめてみます。
上記のレイアウトの場合だと、
<header></header>〜<footer></footer>は以下の画像のような配置になります。
さらにリスト表示にしたものがこちら。
それでは各タグの解説を始めます。
header
<header></header>タグは読んで字の如く、サイトのヘッダーのブロックの構成を行う時に使用します。
<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。
<header>の中には、通常は<h1>–<h6>や <hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。
参考画像でいうと、青い枠で囲った左寄せのロゴマークとか右寄せのお問い合わせ電話番号だとかを記述している部分ですね。
<header></header>タグの記述例
html
<header>
<h1>ウェブデザインA</h1>
<p class="tel">086-293-1100</p>
</header>基本的な記述方法は<div></div>タグと同様に、内側の要素を囲うように使用します。
（内側・外側、囲うの概念は覚えてるかな？？）
注意！<head></head>と<header></header>は完全な別物！
なお第4回でindex.htmlの基本部分の記述を行った際に<head></head>セクションが出てきましたが、これはサイトのデザイン制御を行うcssや動きの制御を行うJavaScriptなどの外部ファイルを読み込むモニターに表示されないブロックでしたね。
今回解説した<header></header>タグは、モニターに表示される部分のサイトやブロックのヘッダーの役割を持ったものであり完全に別物なので注意してください。
<nav></nav>タグは、ページの主要なナビゲーションの部分に使用します。
どのサイトにもサイト内の別のページにリンクする時に使うグローバルナビゲーションというものがありますが、大抵<nav></nav>タグでマークアップを行います。
<nav>は、ナビゲーションであることを示す際に使用します。ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
他のページにリンクした箇所のすべてを<nav>～</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。
参考画像でいうと、先ほど解説した<header></header>タグの真下にある水色の枠で囲った部分で、主要ページへのリンクをまとめたもの、つまりグローバルナビゲーションを囲っている部分です。
html
<nav>
<ul>
<li><a href="./index.html">トップページ</a></li>
<li><a href="./company.html">会社概要</a></li>
<li><a href="./contact.html">お問い合わせ</a></li>
</ul>
</nav>上記のように、<nav></nav>セクションではページのナビゲーションという性質上、
ほとんどの場合ページリンクを埋め込んだリストを記述することになります。
とてもシンプルに<nav></nav>タグの内側に<ul></ul>タグがあり、その中に<li></li>があります。
第03回で解説したように、<a></a>タグは内部や外部へのリンクの役割をもったhtmlタグです。
main
<main></main>タグはページ内の最も主要なコンテンツを記述するために使用します。
もっとも気をつけなければいけない点として、<main></main>タグは各ページにつき1回しか使用できません。後述する<article></article>タグ・<section></section>タグを内側に入れ子にするように記述します。
<main>タグは、文書のメインコンテンツを表す際に使用します。
文書には、hidden属性が指定されていない複数のmain要素があってはなりません。
各main要素は、階層的に正しいmain要素である必要があります。 階層的に正しいmain要素とは、 祖先要素がhtml要素、body要素、div要素、 名前のないform要素、 自律カスタム要素（制作者が自作した要素）となるmain要素です。
参考画像でいうと、<header><header>タグ+<nav></nav>タグ(ページ上部)と<footer></footer>タグ(ページ下部)との間の緑色の枠で囲ったブロック、つまりメインコンテンツのブロックが<main></main>タグだと思ってください。
article
<article></article>タグはその内容が単体でも独立完結する内容を記述するために使用します。
下記引用にもありますが、例えばブログの記事単体などは<article></article>タグでのマークアップが適切です。
<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。
・・・が、この<article></article>タグと、後に出てくる<section></section>タグはその違いが非常にわかりづらく、現場でもどちらを使用すればいいのか判断に困るものでもあります。
ですので、この講義では区別を図るために思い切り噛み砕いて、
「<article></article>タグは主要コンテンツ（<main></main>タグ）内にあるメインブロック」と定義して解説を進めていこうと思います。
参考画像でいうと<main></main>タグの内側すぐにあるピンクの枠で囲ったブロックですね。
<article></article>タグの記述例
html
<article>
<h2>記事タイトル</h2>
<p>ここは本文を記述していく段落の1行目です。</p>
<p>ここは本文を記述していく段落の2行目です。</p>
<p>ここは本文を記述していく段落の最後の行です。</p>
</article>このように、<article></article>セクションでは、タイトルと本文によって、ブログ記事のような構成で記述を行うようになります。
aside
<aside></aside>タグは、極端な話「あってもなくてもいい」余談や補足を記述するブロック。
<aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。
ここで言う余談・補足情報とは、本文と関連してはいるけれど区別して掲載するべき内容のことです。 例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。
<aside>でタグ付けした要素は、あくまでも本文から外れる余談・補足情報ですから、 本文の流れの一部となる挿入句（カッコでくくって差し込むような内容など）に対して、<aside>タグを使用するのは適切ではありません。
上記のように、メインコンテンツの中でもメインブロックに記述されるべき内容を<aside></aside>タグで記述してはいけない、ということですね。
参考画像でいうと先ほど解説した<article></article>タグの横にある、紫の枠で囲った「最近の投稿」「アーカイブ」を設置したブロックになります。ここにあるリンクはおまけのような扱いになっていますね。
<aside></aside>タグの記述例
html
<main>
<article>
<!--ここはメインコンテンツ-->
</article>
<aside>
<ul>
<li><a href="a.html">Aページ</a></li>
<li><a href="b.html">Bページ</a></li>
<li><a href="c.html">Cページ</a></li>
</ul>
</aside>
</main>ここでは補助リンクのような記述にしていますが、補足説明などを記述することもあります。ブログのサイドバーなどは、検索ウィンドウやカレンダーなどを表示していたりしますね。
section
先ほど<article></article>タグと<section></section>タグ（セクション）は違いが非常にわかりづらく使いどころの判断に困る、というお話をしましたね。使いどころの判断をつけやすくするには以下の文章を元に考えてみるのがいいかもしれません。
<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。
セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。
<section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。 <article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。 それに対して<section>は一般的なセクションを表します。
<section>は一般的なセクションを定義するタグであるため、 要素内容を記事として配信する意味合いが強い場合には、<article>を使用することが推奨されています。 また、 補足情報の場合には<aside>、 ナビゲーションの場合には<nav>を使用します。 他にも、 ヘッダに該当する場合には<header>、 フッタの場合には<footer>、 などのタグを使用するほうが、ウェブページの文書構造がより明確になるでしょう。
セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。 見出しを付けることができない場合には、その部分を<section>～</section>で囲むのは適切ではないかもしれません。 もし、<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、 セクションとしてふさわしいかどうか判断しやすくなるでしょう。
・・・意味がわかりませんね。
<article></article>は見出しがなくても成り立つが、
<section></section>には見出しがないと成り立たないと考えておけばいいでしょう。
その意味からも私の場合は実務での使いどころとして、
主要コンテンツブロック全体を<main></main>タグで囲い、
<aside><aside>タグを含まないメインブロックを<article></article>タグで囲い、
メインコンテンツ内の見出しのある各セクションは<section></section>タグで囲う、
といった区別をしています。
参考画像でいうと枠で囲ってあるページタイトルと画像と本文部分が表示されたブロックですね。
多くのページではこのセクションを繰り返して1ページを構成しています。
<section></section>タグの記述例
html
<main>
<article>
<section>
<h3>セクション1</h3>
<p>セクション1の本文部分をここに記述します。</p>
</section>
<section>
<h3>セクション2</h3>
<p>セクション2の本文部分をここに記述します。</p>
</section>
<section>
<h3>セクション2</h3>
<p>セクション2の本文部分をここに記述します。</p>
</section>
</article>
<aside>
<ul>
<li><a href="a.html">Aページ</a></li>
<li><a href="b.html">Bページ</a></li>
<li><a href="c.html">Cページ</a></li>
</ul>
</aside>
</main>上の記述例では、
<main></main>タグの内側に<article></article>タグと<aside></aside>タグがあり、
さらにその内側に<section></section>タグが3つある状態です。
まだまだ理解するには至っていないかもしれませんが、
記述例のような使い方をすればひとまずは「間違ってはいない」と思います。
最後に、たいていの場合、ページの最下部に配置される<footer></footer>タグの解説を行います。
<footer>タグは、直近のセクションのフッタであることを示す際に使用します。
フッタとは、そのセクションに関する情報のことで、一般的には、誰が書いたのか、関連文書へのリンク、著作権などの情報が含まれます。作者の連絡先情報は<address>で示しますが、これを<footer>～</footer>の中に入れても良いでしょう。
ここにある通り、<footer></footer>タグは必ずサイトのフッター部分のみに使用しなければいけない、というわけではありません。これは<header></header>タグも同様で、セクションのヘッダー情報やフッター情報などをマークアップする時にも使用することができます。
参考画像でいうと、赤い枠で囲った、ページ最下部のブロックが<footer></footer>セクションです。
html
<footer>
<div class="container">
<address>
<h2>ウェブデザイン演習</h2>
<p>住所：〒701-0153 岡山県岡山市北区庭瀬83 / TEL：086-293-1100</p>
</address>
<ul>
<li><a href="#">トップページ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">企業理念</a></li>
<li><a href="#">業務内容</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<p class="copyright">Copyright © 2016 ウェブデザイン演習 Allrights Reserved.</p>
</footer>最後にもう一度全体を確認
最後にもう一度全体を確認してみましょう。
各ブロック分けはこちら。
さらにリスト表示にしたものがこちら。
<main></main>の中に<article></article>と<aside></aside>があったり、
<article></article>の中には<section></section>があったりと、入れ子状態ですね。
まとめ
クローラーに良質なアピールを行うために
今回は以下の「それぞれのブロックに使う各要素」の解説を行いました。
| ブロック名（htmlタグ名） | 役割 |
|---|---|
| header | サイトのヘッダー（ブロックのヘッダー） |
| nav | サイトのナビゲーション |
| main | ヘッダー・フッターを含まない主要コンテンツ <article></aritcle>および<aside></aside>を入れ子にする |
| article | 自己完結する記事などのコンテンツ <section></section>を入れ子にする |
| section | 見出しと文章のセット |
| aside | 重要度の低いサイド要素 |
| footer | サイトのフッター要素（ブロックのフッター） |
ウェブデザインA 第04回の文書型定義ブロックの項目で解説した通り、
html文書にはバージョンが存在し、今回学んでいるバージョンはhtml5になります。
ちなみに最新バージョンは「html Living Standard」というものになりますが、
ただ意識するほどの違いがなく区別する必要もほとんどありません。
今回紹介したタグは全てhtml5から使われ始めものですが、これら全てがそれぞれに役割を持ったhtmlタグで、
ふさわしい役割の使い方を行うことで、クローラーに良質なアピールを行うことが可能になります。
次回からは今回紹介したhtmlタグを使ったコーディングを行っていきます。
おすすめ！いろんなWebサイトで各ブロックの使われ方を調べる
みなさんがコーディングを学んでいくにあたり、自分が気になっているWebサイトのソースコードを開き、
実際にどんな記述でどんなレイアウトを実現しているのか？を調べてみることをお勧めします。
特に今回紹介した「各ブロックがどのように使われているか？」に注目してソースコードを見てみると、
実務でコーディング作業を行う際のヒントになります。
実際には今回の内容とは違う使い方をしているWebサイトもたくさん存在しますので、
種別を問わず様々なWebサイトのソースコードを見てみましょう。
「こんな使い方があった」というものを見つけたらぜひ私にも教えてください。
それでは早速、下のページのリンクから確認してみましょう。
ウェブデザインアーカイブ | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM
手順は以下。
- 「ウェブデザインアーカイブ」の一覧ページの中から、気になるWebデザインのサムネイルをクリックし記事ページを開く。
- 記事の下まで行くとURLが掲載されているのでクリックするとサイトが開く。
- ソースコードを表示するためF12キーを押して開発者ツールを起動する。
