HTML5は、HTML4以前と比較して書き方がシンプルでわかりやすくなったところがいくつかあります。
今回は、HTML5で新しくできた要素を使ってざっとページのレイアウトを書いてみます。従来の書き方と比べてとてもシンプルになることが実感できると思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
| <article> | 独立した記事であることを示す |
| <aside> | 余談・補足情報であることを示す |
| <audio> | 音声を再生する |
| <canvas> | 図形などを描画する |
| <command> | 操作メニューのコマンドを指定する |
| <datalist> | 入力候補となるリストを定義 |
| <details> | 詳細情報であることを示す |
| <embed> | 外部コンテンツなどの埋め込み |
| <figcaption> | 画像や表のキャプションを示す |
| <figure> | 画像や表であることを示す |
| <footer> | フッターであることを示す |
| <header> | ヘッダーであることを示す |
| <keygen> | フォーム送信時に暗号キーを発行 |
| <mark> | 該当テキストをハイライトにする |
| <menu> | 操作メニューを作成 |
| <meter> | 測定値を示す |
| <nav> | ナビゲーションであることを示す |
| <output> | 計算結果を表示 |
| <progress> | タスクの進捗状況を示す |
| <section> | 一つのまとまりであることを示す |
| <source> | 動画や音声などのURLや種類を指定する |
| <summary> | <details>の内容を要約 |
| <time> | 日付や時刻をに示す |
| <video> | 動画を再生する |
| <rp> | ルビを括弧で囲む |
| <rt> | ルビのテキストを指定する |
| <ruby> | ルビを振る |
| <wbr> | 改行ができる場所を示す |
HTML5で加わった新要素のおかげで、HTML文書がシンプルに書けるようになりました。
下のようなレイアウトを想定してみます。
いままでのHTML4やXHTML1では、次のような書き方をしていました。
div要素でブロックを区切り、それぞれにid名を付け、CSSでレイアウト指定をするというやり方です。
この方法ですと、ボックスの名前はそれぞれ任意に付けられます。また、各ボックスの記述が長いです。
一方、HTML5では次のような書き方をします。
新しい要素が追加されたため、div要素を使わずに、これらの新要素で構成できます。
ナビゲーション部分はnav要素、メインコンテンツ部分はarticle要素、サブ的なコンテンツ部分はaside要素、各コンテンツ内の見出しを区切るsection要素、があります。
ヘッダ、フッタ部分は、header要素、footer要素が使えるようになりました。
実際のHTMLでは、下のように書いていきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTML5 【 レイアウト 】</title> <link rel="stylesheet" type="text/css" href="css/sample1.css" media="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>HTML5 【 レイアウト 】</h1> <p> <article> <aside> <section> <nav>の使い方</p> </header> <nav> <h1>グローバルナビゲーション</h1> <ul> <li><a href="#">HOME</a></li> <li><a href="#">MENU1</a></li> <li><a href="#">MENU2</a></li> <li><a href="#">MENU3</a></li> <li><a href="#">SITE MAP</a></li> <li><a href="#">ABOUT</a></li> </ul> </nav> <article> <section> <h2>大見出し１</h2> <p>・・・本文・・・</p> <h3>小見出し１</h3> <p>・・・本文・・・</p> <h3>小見出し２</h3> <p>・・・本文・・・</p> </section> <section> <h2>大見出し２</h2> <p>・・・本文省略・・・</p> </section> </article> <aside> <section> <h1>カテゴリー</h1> <ul> <li><a href="#">カテゴリー1</a></li> <li><a href="#">カテゴリー2</a></li> <li><a href="#">カテゴリー3</a></li> <li><a href="#">カテゴリー4</a></li> <li><a href="#">カテゴリー5</a></li> </ul> </section> <section> <h1>アーカイブ</h1> <ul> <li><a href="#">アーカイブ1</a></li> <li><a href="#">アーカイブ2</a></li> <li><a href="#">アーカイブ3</a></li> <li><a href="#">アーカイブ4</a></li> <li><a href="#">アーカイブ5</a></li> </ul> </section> </aside> <footer> Copyright ©HTML5 【 レイアウト 】 All Rights Reserved. </footer> </body> </html>
上から順番に<header><nav><article><aside><footer>と並んでいます。
さきほどのHTMLソースでは、上の方で
「<link rel=”stylesheet” type=”text/css” href=”css/sample1.css” media=”all”>」
として外部のCSSファイルを読み込んでいますが、このHTMLファイルを、CSSファイルなしで見ると次のようになります。
ナビゲーションのところに「グローバルナビゲーション」と大きく表示されています。これは見出し要素h1です。
５．CSSもシンプルにで紹介しますが、CSSでこのh1をdisplay :noneで非表示にしてます。CSSで視覚的にレイアウトを見ている時は表示されず、CSSなしなら表示されるようにしているのです。
CSSレイアウトを指定している時は、ヘッダの下に大きく目立つリンクとして配置するので、グローバルナビだとわかりますが、CSSなしの場合、単なるリスト要素で組んだリンクなので、目立ちません。その場合もグローバルナビだとわかるようにしておくと、アクセシビリティが確保できます。
※アクセシビリティ(accessibility) とは、「アクセスのしやすさ」という意味です。Webの場合は、閲覧環境などへの対応のしやすさも意味します。
IE8までは、HTML5の新要素に対応していないため、その点についての対策が必要です。
さきほどのHTMLソースの上の方で、次のような記述がありますが、これがその対策となります。
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
リンク先は、「Google code」が提供している「IE8までのブラウザにHTML5の新要素を理解させるオープンソース」です。
[if lt IE 9] と [endif] で囲まれていますが、これはIEの仕様で、「もしIE9未満だった場合にのみ実行する」という意味のようです。
ですので、上の記述によって「もしIE9未満だったら、HTML5の新要素対応のためのファイルを読み込む」という指示を出していることになります。
次は、CSSでレイアウトを書いてみます。
メインブロック（= article要素）とサイドバー（= aside要素）を横に並べたいので、CSSのfloatを使って横に並べました。
body {
width:900px;
margin:20px auto; /*←上下マージン20px、左右はautoでセンター合わせに*/
}
header, nav, article, aside, section, footer {
display:block; /*←新要素はデフォルトではinline要素なのでこの指定が必要。*/
}
header, nav, article, aside, section, footer {
border:1px solid #ccc; /*←各ブロックに枠線をつけてわかりやすくしました。*/
margin:0px 0px 10px;
padding:20px;
}
header {
text-align:center;
}
nav {
text-align:center;
padding:5px;
}
nav ul, nav li {
list-style-type:none;
display:inline; /*←display:inlineでli要素を横並びに。*/
padding:0px 10px;
}
nav h1 {
display:none; /*←display:noneで非表示にする。CSSが無効の時は見える。*/
}
article {
float:left; /*←article（メインブロック）はfloat:leftで左寄せに。*/
width:620px;
}
aside {
float:right; /*←aside（サイドバー）はfloat:rightで右寄せに。*/
width:180px;
}
footer {
clear:both; /*←articleとasideのfloatを、これでクリア。*/
text-align: center;
padding: 5px;
font-size: 80%;
}
id名やclass名が出てこないということは、全てHTML要素だけでCSSが指定できているということです。煩わしい名前対応の確認が不要となるので、作成時間も短縮されます。CSSの記述自体もとてもシンプルです。
今回は、HTML5の新要素を使ってWebページのレイアウトを組む際の大まかなイメージを紹介しました。
ここで使用した新要素について、次に少し詳しくまとめましたので、HTML5 【 レイアウト 】2 ～ article、aside、section、navも是非ご覧下さい。
INTERNOUS,inc. All rights reserved.
