[17-1] HTML5 の新要素でページ全体を組もう
最終更新日：2017年11月01日 （初回投稿日：2011年07月07日）
HTML5 から、各要素の「役割」が明確に決められました。
そして、よりセマンティックに HTML文書を組むための新要素も複数登場しました。
semantic は「意味論の」「意味論的な」と言った意味の形容詞です。
1つひとつの要素の役割にピッタリの箇所に使ってマークアップするルールが「セマンティック・マークアップ」です。
特に注目すべき新要素には、
セクショニングのための <article> <aside> <section> <nav> <header> <footer>要素と、グルーピングのための <main>要素があります。
これらはページ全体を組むときに大事な要素です。
今回から数回に渡って、これらの新要素の使い方を見ていきましょう。
●
2017年10月： [17-1] 〜 [17-6] は本文を大幅に書き換えました。
初回投稿時の 2011年は HTML5はまだ策定中で、ルールが現仕様と若干異なっていました。それを今回 HTML5.1 の勧告内容に沿って修正しています。
それに伴い [17-1] 〜 [17-6] は、タイトルや内容を変更しているものもあります。ご了承ください。
HTML5での セクショニングのための要素
HTML5での セクショニングのための要素は以下で、赤字が HTML5 からの新要素です。
- body
- article
- section
- nav
- aside
- h1 〜 h6
- header
- footer
- address
この中にも「カテゴリー」による分類があります。
HTML5 から「コンテンツ・モデル」という考え方が導入されました。
コンテンツ・モデルとは「要素をどの要素の中に置くか」のルール。
各要素はそれぞれ「コンテンツ・モデル」を持ち、置いていい要素（親になる要素）の種類が決まっています。
この「種類」は「カテゴリー」で分類されていて、「セクショニング・コンテント」「ヘディング・コンテント」などの複数のカテゴリーがあります。
（カテゴリーについては [37] HTML5要素の「カテゴリー」を見てみよう をご覧ください）
<body>要素は「セクショニング・ルート」という特別なカテゴリーに属しています。
<article> <aside> <section> <nav>要素は「セクショニング・コンテント」と「フロー・コンテント」に属しています。
「セクショニング・コンテント」の要素は「アウトライン」を持ちます。
ここで言うアウトラインとは、概要・あらすじって意味ではなく、文字通り「外郭」みたいなかんじ。ひとまとまりの関連性のコンテナ的なものになるという意味です。
<h1> 〜 <h6>要素は「ヘッディング・コンテント」「フロー・コンテント」に属し、 <header>、<footer>、<address>要素は「フロー・コンテント」です。
<article> <aside> <section> <nav>要素については、次回（ [17-2] ）以降で 順番に説明していきます。
HTML5での グルーピングのための要素
HTML5での グルーピングのための要素は以下。赤字が HTML5 からの新要素です。
- p
- hr
- pre
- blockquote
- ol, ul, li, dl, dt, dd
- figure
- figcaption
- div
- main
新要素 <main> は「フロー・コンテント」です。
<main>要素については [17-6]メインコンテンツを表す main要素 で説明します。
HTML5 の新要素で HTML文書がシンプルに
HTML5で加わった新要素のおかげで、HTML文書がシンプルに書けるようになりました。
例えばこんなレイアウトを作りたい場合。
かつての HTML4 や XHTML1 では、<div>要素でブロックを作り、それぞれに id名を付けてレイアウトしていました。
<div> は汎用ブロック要素です。ほかにピッタリの要素が無かったので、コレを使うしかありませんでした。
この方法だと、作り手によって名前はバラバラ。しかも 記述が長い！
HTML5 で新要素が追加され、意味を持つ要素で構成できるようになりました。
これだと要素の役割が一目瞭然。しかも記述が短い！
ナビゲーションは <nav>要素。メインコンテンツは <article>。サブ的コンテンツは <aside>。各コンテンツ内の「章・節・項」を区切るのに <section>要素が使えます。
ヘッダ・フッタ部分は、<header> <footer>要素が使えます。
用途どおりの名を持つ要素があると便利ですね。
新要素を使ったサンプル
新要素を使ってサンプルを作ってみました。
HTMLで組んだだけでは見にくいので、簡単に CSS でレイアウトしています。
（クリックで別ウィンドウでサンプルが開きます）
サンプルファイルの HTML・CSS のソースは、
[14-1] ブラウザでソースを表示する を参考にして見てみてください。
ちなみに、同じ HTMLで CSS無しのものはこちらです
（クリックで別ウィンドウでサンプルが開きます）
そして、ほぼ同じ HTMLで CSSの新しいプロパティを使ったサンプルです。
（クリックで別ウィンドウでサンプルが開きます）
このサンプルでは、CSSの「角丸ボックス」「ボックスシャドウ」「テキストシャドウ」「線形グラデーション」「円形（放射状）グラデーション」を使っています。
これらの CSSの新プロパティについては、[18-1] CSS3で、ボックス要素を角丸にしよう（border-radius）以降で説明します。
次回予告
次回は、HTML5 からの新要素 <article>、<aside>、<section> について詳しく見てみましょう。
- 関連記事
-
- [18-2] 要素にシャドウをつけよう（box-shadow）
- [18-1] 要素を角丸にしよう（border-radius）
- [17-6] メインコンテンツを表す main要素
- [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
- [17-4] ナビゲーションのセクションを表す nav要素
- [17-3] セクショニング要素と見出し要素のルール
- [17-2] セクショニングの article要素、aside要素、section要素
- [17-1] HTML5 の新要素でページ全体を組もう
- （ちょっとメモ）テーブルをレスポンシブ対応させるCSS
- [16-7] テーブルセルで使う scope属性と headers属性について
- [16-6] table縦列グループ化（ colgroup, col ）
- [16-5] table横列グループ化（thead, tbody, tfoot）
- [16-4] tableのセルの枠線を非表示にしよう（empty-cellsプロパティ）
- [16-3] table のセルを連結しよう（colspan属性・rowspan属性）
- [16-2] table にタイトルをつけよう（ caption要素 ）
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
Re: ソースの拝借
ソースの「拝借」とされていますが、どういったコトをなさろうとしているのかな？
当サイトの「プロフィール」ページに、「ご利用について」をまとめていますので、ご覧ください。
http://honttoni.blog74.fc2.com/blog-entry-67.html
HTMLやCSSなどの「サンプルソースコード」は、W3Cの仕様書を読んだりして「たぶんコレで正しいだろう」と私が思っているものを書いています。それはべつに私が発明したものではないので...。ご自由にコピーして頂いて結構です。
ただし、私もコーダーではないので、間違っていたり、古い記述だったりする可能性が大いにあります（ごめん。笑）。そこら辺は当方は責任を負いませんので、自己責任でお願いします。
他のサイトも参考になさって、ご自分が納得されるコードで書くことをお勧めします。
記事本文や記事中の画像などは、著作権がありますので、コピペはご法度です。
著作権法にひっかかりそうな「拝借」ならば、
当サイトのタイトル「ほんっとにはじめての HTML5 と CSS3」と、
URL「http://honttoni.blog74.fc2.com/」を明記してください。
よろしくお願いします。
Re: ソースの拝借
すみません、akayさんのコメントにメアドが記入されていたのですが、これが「FC2ブログ」のコメントシステムだと、こちらで消せなくて、公開されてしまいますので、akayさんのコメントそのものを削除させていただきました。
akayさんのコメントはこちらです。
> タイトル：ソースの拝借
> ソースを見せてもらいがら、ホームページを作成していますが
> オンライン上に載せてもよろしいでしょうか
