[17-1] HTML5 の新要素でページ全体を組もう

最終更新日:2017年10月13日  (初回投稿日:2011年07月07日)

HTML5 から、各要素の「役割」が明確に決められました。
そして、よりセマンティックに HTML文書を組むための新要素も複数登場しました。

semantic は「意味論の」「意味論的な」と言った意味の形容詞です。
1つひとつの要素の役割にピッタリの箇所に使ってマークアップするルールが「セマンティック・マークアップ」です。

特に注目すべき新要素には、
セクショニングのための <article> <aside> <section> <nav> <header> <footer>要素と、グルーピングのための <main>要素があります。

これらはページ全体を組むときに大事な要素です。
今回から数回に渡って、これらの新要素の使い方を見ていきましょう。

「HTML5 の新要素」の記事リスト
  1. [17-1] HTML5 の新要素でページ全体を組もう ←今回
  2. [17-2] セクショニングの article要素、aside要素、section要素
  3. [17-3] セクショニング要素と見出し要素のルール
  4. [17-4] ナビゲーションのセクションを表す nav要素
  5. [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
  6. [17-6] メインコンテンツを表す 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> について詳しく見てみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.