Sponsored Link
前回は、CSSの基本記述方法のレクチャー、そしてmain.cssのリセットを行いました。
CSSリセットはブラウザでのWebサイトの見え方の差異を最低限にすることが目的でした。
CSSリセットを行った中で、最後にこんな指定を行ったと思います。
main.css
header,
nav,
menu,
article,
section,
main,
aside,
footer {
display:block;
margin: 0;
}今回はこの中から・・・
- header
- nav
- article
- aside
- section
- footer
以上のHTMLタグの解説を行っていこうと思います。
今回は非常に項目が多いので、コードの記述は行いません。
htmlでそれぞれのブロックに使う各要素の説明
ますはHTMLで使う各ブロックの説明を行い、それぞれの役割を下の表で見てみましょう。
| header | サイトのヘッダー（ブロックのヘッダー） |
|---|---|
| nav | サイトのナビゲーション |
| article | メインコンテンツ |
| section | 見出しと文章のセット |
| aside | サイド要素 |
| footer | サイトのフッター要素（ブロックのフッター） |
以上のものは、以前講義で解説した<div></div>タグと同じようにブロックなんですが、特に役割を持たない<div></div>タグとは異なり、それぞれ明確に役割や意味を持ったHTMLタグになります。
ここからは、龍弥デザインのクライアント「白石建具店」さんのWebサイトを参考にして、どのHTMLタグがどこに使われているのか？その役割は何なのか？の解説を行います。
「白石建具店」さんのWebサイト自体はかなり前に制作したので、現在ではもっと簡潔にコードを記述することが出来ますが、どれくらいのコード量を記述するようになるのか基準を知るためには「白石建具店」さんのWebサイトのソースコードを見るのが最適です。
いろんなWebサイトで各ブロックの使われ方を調べる
みなさんがコーディングを学んでいくにあたり、自分が気になっているWebサイトのソースコードを開き、実際にどんな記述でどんなレイアウトを実現しているのか？を調べてみることをお勧めします。
特に下記で紹介する<header></header>〜<footer></footer>がどのように使われているか？に注目してソースコードを見てみると、自分自身が実務でコーディング作業を行う際のヒントになります。
以下で各ブロックの紹介をしますが、それが終わり次第またここに戻って、いろんなサイトのソースコードを見てみましょう。
header
<header></header>タグ（セクション）は、読んで字の如く、
サイトのヘッダーのブロックの構成を行う時に使用します。
<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。
<header>の中には、通常は<h1>–<h6>や <hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。
参考画像でいうと、赤い枠で囲った左寄せのロゴマークとか右寄せのお問い合わせ電話番号だとかを記述している部分ですね。
<header></header>タグの記述例
HTML
<header>
<h1>ウェブデザイン演習</h1>
<p class="tel">086-293-1100</p>
</header>基本的な記述方法は<div></div>タグと同様に、内側の要素を囲うように使用します。
（内側・外側、囲うの概念は覚えてるかな？？）
参考サイトの<header></header>タグの構成
実際に「白石建具店」さんのWebサイトで使用されている<header></header>セクションのHTMLのソースコードは以下。
HTML
<header>
<div class="container">
<h1><a href="https://shiraishi-tategu.com/">白石建具店</a></h1>
<ul class="contact">
<li><a href="https://shiraishi-tategu.com/company.html#access"><i class="icon-maps"></i></a></li>
<li><a href="tel:086-252-1838"><i class="icon-tel"></i></a></li>
<li><a href="https://shiraishi-tategu.com/contact.html"><i class="icon-mail"></i></a></li>
<li><a href="https://twitter.com/share?url=https://shiraishi-tategu.com/&text=岡山で昭和29年創業の老舗建具店 白石建具店" target="_blank"><i class="icon-twitter"></i></a></li>
<li><a href="https://www.facebook.com/share.php?u=https://shiraishi-tategu.com/" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="icon-facebook"></i></a></li>
<!-- /.contact --></ul>
<!-- / .container--></div>
</header>はみ出すほどに長いです。それほど大きなブロックではないにも関わらず、実際にはかなりのコード量によって構成されているわけですね。
注意！<head></head>と<header></header>は完全な別物！
なお第4回でindex.htmlの基本部分の記述を行った際に<head></head>セクションが出てきましたが、これはサイトのデザイン制御を行うCSSや動きの制御を行うJavaScriptなどの外部ファイルを読み込むモニターに表示されないブロックでしたね。
今回解説した<header></header>タグは、モニターに表示される部分のサイトやブロックのヘッダーの役割を持ったものであり完全に別物なので注意してください。
nav
<nav></nav>タグ（セクション）は、ページの主要なナビゲーションの部分に使用します。
どのサイトにもサイト内の別のページにリンクする時に使うグローバルナビゲーションというものがありますが、大抵<nav></nav>タグでマークアップを行います。
<nav>は、ナビゲーションであることを示す際に使用します。ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
他のページにリンクした箇所のすべてを<nav>～</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。
参考画像でいうと、赤い枠で囲ったメイン画像の下の、サイトの各ページへのリンクをまとめたもの、
つまりグローバルナビゲーションを囲っている部分です。
<nav></nav>タグの記述例
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>タグの構成
「白石建具店」さんのWebサイトで使用されている<nav></nav>セクションのソースコードは以下のような感じ。
HTML
<nav>
<ul>
<li><a href="https://shiraishi-tategu.com/">トップページ</a></li>
<li><a href="https://shiraishi-tategu.com/company.html">私たちのこと</a></li>
<li><a href="https://shiraishi-tategu.com/works/">制作事例</a></li>
<li><a href="https://shiraishi-tategu.com/flow.html">制作の流れ</a></li>
<li><a href="https://shiraishi-tategu.com/price.html">制作料金</a></li>
<li><a href="https://shiraishi-tategu.com/topics">お知らせ</a></li>
<li><a href="https://shiraishi-tategu.com/?post_type=post">ブログ</a></li>
<li><a href="https://shiraishi-tategu.com/contact.html">お問い合わせ</a></li>
</ul>
</nav>テキストが長い分とてもボリュームが多いと思いがちですが、
先ほどの記述例と同じく、とてもシンプルに<nav></nav>タグの内側に<ul></ul>タグがあり、
その中に<li></li>があります。
第03回で解説したように、<a></a>タグは内部や外部へのリンクの役割をもったHTMLタグです。
article
<article></article>タグ（セクション）はその内容が単体でも独立完結する内容を記述するために使用します。
下記引用にもありますが、例えばブログの記事単体などは<article></article>タグでのマークアップが適切です。
<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。
・・・が、この<article></article>タグと、後に出てくる<section></section>タグはその違いが非常にわかりづらく、現場でもどちらを使用すればいいのか判断に困るものでもあります。
ですので、この講義では区別を図るために思い切り噛み砕いて、
「<article></article>タグはメインコンテンツブロック」と定義して解説を進めていこうと思います。
参考画像でいうと、
<header><header>セクション+<nav></nav>セクション(ページ上部)と<footer></footer>セクション(ページ下部)との間のブロック、つまりメインコンテンツのブロックが<article></article>だと思ってください。
<article></article>タグの記述例
HTML
<article>
<h2>記事タイトル</h2>
<p>ここは本文を記述していく段落の1行目です。</p>
<p>ここは本文を記述していく段落の2行目です。</p>
<p>ここは本文を記述していく段落の最後の行です。</p>
</article>このように、<article></article>セクションでは、タイトルと本文によって、ブログ記事のような構成で記述を行うようになります。
ちなみに参考サイトの<article></article>タグは長すぎてとても記述できないためここでは割愛します。気になる人は「白石建具店」さんのWebサイトを開いて「ソースを表示」などを行ってみてください。
aside
<aside></aside>タグ（セクション）は、極端な話「あってもなくてもいい」余談や補足を記述するブロック。
<aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。
ここで言う余談・補足情報とは、本文と関連してはいるけれど区別して掲載するべき内容のことです。 例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。
<aside>でタグ付けした要素は、あくまでも本文から外れる余談・補足情報ですから、 本文の流れの一部となる挿入句（カッコでくくって差し込むような内容など）に対して、<aside>タグを使用するのは適切ではありません。
上記のように、メインコンテンツの中でもメインブロックに記述されるべき内容を<aside></aside>タグで記述してはいけない、ということですね。
参考画像でいうと、<article></article>の内側にある、左側のリンクバナーを設置した場所になります。ここにあるリンクはグローバルナビゲーションから開くこともできるので、おまけのような扱いになっていますね。
<aside></aside>タグの記述例
HTML
<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>
<div id="main">
<!--ここはメインコンテンツ-->
</div>
</article>ここでは補助リンクのような記述にしていますが、補足説明などを記述することもあります。ブログのサイドバーなどは、検索ウィンドウやカレンダーなどを表示していたりしますね。
section
先ほど<article></article>タグと<section></section>タグ（セクション）は違いが非常にわかりづらく使いどころの判断に困る、というお話をしましたね。使いどころの判断をつけやすくするには以下の文章を元に考えてみるのがいいかもしれません。
<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。
セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。
<section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。 <article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。 それに対して<section>は一般的なセクションを表します。
<section>は一般的なセクションを定義するタグであるため、 要素内容を記事として配信する意味合いが強い場合には、<article>を使用することが推奨されています。 また、 補足情報の場合には<aside>、 ナビゲーションの場合には<nav>を使用します。 他にも、 ヘッダに該当する場合には<header>、 フッタの場合には<footer>、 などのタグを使用するほうが、ウェブページの文書構造がより明確になるでしょう。
セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。 見出しを付けることができない場合には、その部分を<section>～</section>で囲むのは適切ではないかもしれません。 もし、<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、 セクションとしてふさわしいかどうか判断しやすくなるでしょう。
・・・意味がわかりませんね。
<article></article>は見出しがなくても成り立つが、
<section></section>には見出しがないと成り立たないと考えておけばいいでしょう。
その意味からも私の場合は実務での使いどころとして、
メインコンテンツブロック全体を<article></article>タグで囲い、
メインコンテンツ内の見出しのある各セクションは<section></section>タグで囲う、
といった区別をしています。
参考画像でいうと、赤い枠で囲ってある、ページタイトルと本文部分が表示されたブロックですね。多くのページではこのセクションを繰り返して1ページを構成しています。
例えば企業サイトの会社概要ページなどでは、1ページの中で・・・
- 企業情報
- 代表挨拶
- 沿革
・・・などを記述していることがほとんどだと思います。
<section></section>タグの記述例
HTML
<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>
<div id="main">
<section>
<h3>セクション1</h3>
<p>セクション1の本文部分をここに記述します。</p>
</section>
<section>
<h3>セクション2</h3>
<p>セクション2の本文部分をここに記述します。</p>
</section>
<section>
<h3>セクション2</h3>
<p>セクション2の本文部分をここに記述します。</p>
</section>
</div>
</article>上の記述例では、<article></article>セクションの中に<aside></aside>セクションと<div></div>タグのセクションがあり、その中に<section></section>が3つある状態です。
まだまだ理解するには至っていないかもしれませんが、記述例のような使い方をすればひとまずは「間違ってはいない」と思います。
footer
最後に、たいていの場合、ページの最下部に配置される<footer></footer>タグ（セクション）の解説を行います。
<footer>タグは、直近のセクションのフッタであることを示す際に使用します。
フッタとは、そのセクションに関する情報のことで、一般的には、誰が書いたのか、関連文書へのリンク、著作権などの情報が含まれます。作者の連絡先情報は<address>で示しますが、これを<footer>～</footer>の中に入れても良いでしょう。
ここにある通り、<footer></footer>タグは必ずサイトのフッター部分のみに使用しなければいけない、というわけではありません。これは<header></header>タグも同様で、セクションのヘッダー情報やフッター情報などをマークアップする時にも使用することができます。
参考画像でいうと、赤い枠で囲った、ページ最下部のブロックが<footer></footer>セクションです。
<footer></footer>の記述例
HTML
<footer>
<ul>
<li><a href="https://shiraishi-tategu.com/">トップページ</a></li>
<li><a href="https://shiraishi-tategu.com/company.html">私たちのこと</a></li>
<li><a href="https://shiraishi-tategu.com/works/">制作事例</a></li>
<li><a href="https://shiraishi-tategu.com/flow.html">制作の流れ</a></li>
<li><a href="https://shiraishi-tategu.com/price.html">制作料金</a></li>
<li><a href="https://shiraishi-tategu.com/topics">お知らせ</a></li>
<li><a href="https://shiraishi-tategu.com/?post_type=post">ブログ</a></li>
<li><a href="https://www.facebook.com/shiraishitategu" target="_blank">facebook</a></li>
<li><a href="https://shiraishi-tategu.com/contact.html">お問い合わせ</a></li>
</ul>
<p class="logo"><span>白石建具店</span></p>
<address>〒700-0961 岡山県岡山市北区北長瀬本町14-37<a class="access" href="https://shiraishi-tategu.com/company.html#access">アクセス</a> ／ Tel. 086-252-1838</address>
<p class="pagetop"><a href="#container"><span class="icon-pagetop"></span></a></p>
<p class="copyright">Copyright ©2022 Shiraishi Tategu Ten.</p>
</footer>まとめ
<header></header>セクションから<footer></footer>セクションまでの解説を行いました。
ウェブデザイン演習 第04回の文書型定義ブロックの項目で解説した通り、
HTML文書にはバージョンが存在し、今回学んでいるバージョンはHTML5になります。
今回紹介したタグは全てHTML5から使われるようになったものですが、
これら全てがそれぞれに役割を持ったHTMLタグで、
役割にふさわしい使い方を行うことでクローラーに良質なアピールを行うことが可能になります。
次回からは今回紹介したHTMLタグを使ったコーディングを行っていきます。
・・・さて、冒頭にもどりましょう。
