htmlファイルは大きく分けて、文書型宣言、ヘッダー要素、ボディ要素から成ると以前のレッスンで説明しました。
そして前回はボディ要素に表示される基本的なタグを学びましたね！
これらのタグはページを構成する１つ１つの小さな要素でしたが、今回はもう少しだけ視野を広げてボディ要素全体の構成に注目していきます。
整然とまとめられたHTMLファイルは、googleの検索結果にもいい影響を与えますので、ぜひここでセクショニングのコツを知っておきましょう！
前回作成した’チーズ卵焼きのレシピ’のページに、タグを加えていきますので用意をしておいてください。
もくじ
ボディ要素の構造
ボディ要素は大きく、ヘッダ、メイン、フッタの３つのまとまりから成り立ちます。
ページ全体の構造とボディ要素の構造を見比べてみてください。
ページ全体が３つの大きなかたまりからできていて、その１つのボディ要素がさらに３つのかたまりで構成されているということです。
ページのいちばん上部のサイトのロゴやメニューリストがある部分がヘッダです。
そして下側の連絡先やサイトのコピーライト（著作権情報）などがある部分がフッタになります。
最近のWebサイトではヘッダとフッタはどのページでも共通、というのが多いです。
注意してみてみると、普段よく見るサイトもこの２つの部分は変わらないところばかりではないでしょうか？
amazonを見てみるとほとんどのページで上部と下部が共通になっています
ページの導入の役割を持つヘッダ
そのページの導入部分をヘッダといい、<header></header>で囲みます。
具体的に導入部分というのは、サイトロゴやメニューリスト、サイトのトップイメージなどまず最初に目に入ってくる部分です。
前回のページにもこちらを加えていきたいと思います。
h1の見出しを囲むように<header></header>を書きます。
<body>
<header>
<h1>チーズ卵焼きの作り方</h1>
</header>
次に擬似的にサイトによくあるようなメニューリストを書いていきたいと思います。
ここで初めてのタグが登場します。
ナビゲーションリンクを表す<nav></nav>とリストを表す<ul></ul>と<li></li>を見出しの下に書いていきます。
メニューはホーム/ レシピ一覧/ プロフィール、とブログによくあるようなものにしました。
<header>
<h1>チーズ卵焼きの作り方</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">レシピ一覧</a></li>
<li><a href="#">プロフィール</a></li>
</ul>
</nav>
</header>ページを表示させるとこんな感じでメニューができています。
前回勉強したリンクを表すaタグですが、リンク先が#になっていますね。
これはページのトップに移動するという意味で、リンク先のページは存在していないダミーのメニューなのでこのように書きました。
ページ情報を表すボディ要素の上に来るヘッダ要素<head></head>とかなり混同しやすいです。（どちらも読み方はヘッダ！）
おさらいですが、<head>は目には見えない、ページ情報であるメタデータを指定するタグでした。
<header>で囲むヘッダの方は、中にどんなものが入るかは決まりがあるわけではないのですが、あくまで導入部分であるのでコンパクトかつシンプルになっていることが多いです。
最近のモダンなサイトだとSNSのアイコンも多いですよね！
- ボディ要素の中の、ページの導入部分をヘッダといい<header></header>で囲む
- 最近ではフッタと共に、共通になっているサイトが多い
- サイトロゴやメニュー画面、トップ画像などサイトの顔になる場所
本文を表すメイン要素
これは名前の通り、そのページの中心的なコンテンツを表します。
<main></main>で囲みます。
この場合、レシピ全体がこのページのメインとなる部分なので、さくっと囲ってしまいましょう!
hederタグの下にmainの開始タグを書きます。
</header>
<main>
<h2>材料</h2>
<p>卵</p>
<p>チーズ</p>
次にbodyの閉じタグのすぐ上にmainの閉じタグを書きます。
<a href="https://cookpad.com/search/%E5%8D%B5%E7%84%BC%E3%81%8D" target="_blank">レシピの参考サイト</a>
</main>
</body>
</html>
mainタグはこれだけで完了です！
これは明示的で分かりやすいのではないでしょうか？
- ボディ要素の中心となるコンテンツをメインといい、<main></main>で囲む
ページの所有者や運営者の情報を記すフッタ
フッタはそのページの下側に連絡先や著作情報などを知らせる箇所で、<footer></footer>で囲みます。
もともと印刷物の下部に、脚注を書く部分を’footer’、または’footernote’と呼ばれているのが語源のようです。
企業のサイトだったらよく会社概要やプライバシーポリシーなどのリンクがありますよね？
他にはヘッダーと同様メニューリストだったり、SNSボタンだったりさまざまです。
要するに読者の人が記事を読み終えて、どこにも移動できない、ということが起きないようにあらかじめ動線を引いているわけですね。
それではメインの下に新たにフッタを追加します。
今回は’トップに戻る’のリンクとコピーライトを書いていきます。
２つが横並びにならないように、インラインスタイルというCSSをaタグの中に書いていきますが、いまは気にしなくても大丈夫です。
<footer>
<a href="#" style="display:block;">トップに戻る</a>
<small>©コード食堂</small>
</footer>
</body>
</html><small>タグは注釈や著作関係を書くときに使われる、通常の<p>タグよりも表記が小さくなるタグです。
それでは表示してみます。
- ボディ要素下部の連絡先や著作権情報などを表す部分をフッタといい、<footer></footer>で囲む
- ヘッダと同様に共通エリアに設定されているサイトが多い
- サイトの注釈的な情報を記すことが多いが、とくに決まりはないので好きなコンテンツを置ける
コンテンツをまとめる<section>タグと<article>タグ
段落をまとめる<section>タグ
ボディ要素を３つのまとまりに分けてきました。
今度は視点をもうすこし小さくして、段落をまとめていきます。
ここで使われるのが、<section>タグです。
セクションの名の通り、複数の段落のp要素をまとめてかたまり化するタグです。
ページを見ると、先ほど<main></main>で囲んだブロックのなかに、
・材料
・作り方
・できあがり！
の３つの<h2>の見出しから始まるまとまりがありますね。
この３つのかたまりを<section>タグでまとめていきましょう。
材料のブロックをまとめる
<section>
<h2>材料</h2>
<p>卵</p>
<p>チーズ</p>
</section>作り方のブロックをまとめる
<section>
<h2>作り方</h2>
--省略--
<p><strong>たった３分でチーズ卵焼き</strong>ができました！！</p>
</section>
できあがり！のブロックをまとめる
<section>
<h2>できあがり!</h2>
--省略--
<a href="https://cookpad.com/search/%E5%8D%B5%E7%84%BC%E3%81%8D" target="_blank">レシピの参考サイト</a>
</section>これで３つの段落のまとまりができました！
わかりやすく考えると、見出しからその見出しの終わりまでが１つのセクションとなることが多いと言えます。
- <section>タグはpタグで書かれた段落をひとまとめにする
- 見出しの始まりと終わりが１つのセクションになることが多い
自己完結した文書をまとめる<article>タグ
自己完結というよくわからない言葉が出てきました。
article（アーティクル）とは記事という意味になりますが、例えば記事の部分部分を抜き出して読んでみても、あまり意味がわかりませんよね。
ほとんどの記事は、冒頭だけ読んでも、結論だけ読んでもいまいちピンとこないと思います。
作ってきたページで考えると、タイトル、材料、作り方、できあがりのまとまりがあって、初めてこの記事が成立しています。
このように自己完結というのは、それだけできちんと意味が伝わるまとまり、ということですね。
では<article></article>で囲みましょう。
<body>
<article>
<header>
<h1>チーズ卵焼きの作り方</h1> <a href="https://cookpad.com/search/%E5%8D%B5%E7%84%BC%E3%81%8D" target="_blank">レシピの参考サイト</a>
</section>
</main>
</article>ちなみにこの<article>タグは１つのページに１つだけ、という決まりはなく、何個でも書くことができます。
例えばページ内にトピックの違う自己完結した記事が複数ある、のような場合はその記事ごとに<article></article>で囲んでいくということですね！
- それだけで意味がわかるまとまりを自己完結文書といい、<article></article>で囲む
- <article>タグは自己完結文書の数だけ、複数の使用が可能
まとめ
これで今日のコーディングはこれで終了です。
いちど全体のコードを見直してみましょう。
間違いなく書けているか、確認してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>おいしいチーズ卵焼きを作ろう！</title>
</head>
<body>
<article>
<header>
<h1>チーズ卵焼きの作り方</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">レシピ一覧</a></li>
<li><a href="#">プロフィール</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>材料</h2>
<p>卵</p>
<p>チーズ</p>
</section>
<section>
<h2>作り方</h2>
<p>ボールに卵を割り入れ、チーズも入れたらかき混ぜます。</p>
<p>熱したフライパンに油を引いたら卵を1/3くらい流し込みます。
半熟になったら奥から手前に巻いていきます。</p>
<p>巻けたら奥に移動させて、同じ工程を２回繰り返します。</p>
<hr>
<p><b>チーズが焦げないように注意</b>してください。</p>
<p><strong>たった３分でチーズ卵焼き</strong>ができました！！</p>
</section>
<section>
<h2>できあがり!</h2>
<p>できあがりはこちら</p>
<img src="food_tamagoyaki.png" alt="卵焼きイメージ" height="180px">
<br>
<a href="https://cookpad.com/search/%E5%8D%B5%E7%84%BC%E3%81%8D" target="_blank">レシピの参考サイト</a>
</section>
</main>
</article>
<footer>
<a href="#" style="display:block;">トップへ戻る</a>
<small>©コード食堂</small>
</footer>
</body>
</html>今日見てきたタグはどれも見た目にはほとんど影響のない、文書の構造をまとめるようなものばかりでした。
このように、意味的に構造化していくタグをコンテンツセクショニングタグと呼びます。
ではなぜこのようなタグが存在しているのでしょうか
わたしたちにとって、文章は普段自分たちが使っている言葉なので、要点やページの伝えたいことが意識しなくても伝わってくると思います。
一方コンピュータにはただの文字の羅列にしか見えません。
そこで、まとまりをつくり、意味づけしてあげることで、コンピュータにもそれが何を示していることが理解できるページを作ることがとても重要なのです。
このように人だけでなくコンピュータにも優しいサイトのつくりを、セマンティックな、とかセマンティックウェブと呼びます。
なぜそれが重要なのかというと、ここでいうコンピュータとはまさにグーグル先生になるわけです。
もう分かりましたね。
グーグルが理解できるサイトは、検索順位に大きく影響しているのです。
きちんと情報が整理されたサイトはまさにSEOの基本となってきます。
（SEOとは自分のサイトのページを検索上位に表示させるように対策をすることです）
これらのタグはすべて２０１４年に大幅に改定されたHTML5で追加されました。
モダンなWebサイトをつくっていくために、新しいタグを駆使してセマンティックなサイトづくりを心がけるようにしていきましょう！