HTML5に書き換えてみた
3.ページ構造を新要素で


HTML5ではページ構造を明示する要素として、 main、header、footer、nav、aside、article、sectionが用意されました。

ページの構造を表示する従来の方法は、divでの区切り、table内のマス目の利用、などでした。 しかしこれらの方法は単に構造を指定するものであり、idやclassで付けられたブロック毎の名前は検索エンジンにとっては意味が無いものでした。

しかしHTML5の新要素でページを構成すると、各部分の役割が明確に伝わっていくのです。役割は次の通りです。

header・・・ページのヘッダー
     →こちらが書き換えの説明

nav・・・・主要なナビゲーション
     →こちらが書き換えの説明

aside・・・本文の関連記事や補足的なコンテンツ
     →こちらが書き換えの説明

main・・・・ページのメインコンテンツ(本文)
     →こちらが書き換えの説明

footer・・・ページのフッター
     →こちらが書き換えの説明

article・・単独で利用可能な記事

section・・文書のアウトラインを構成する

 

さて書き換え前のページは下の様に見えます。

書き換え前

このページの構成は下の様に、table要素で組み立てています。

書き換え前の構造

書き換えは、以下の考え方で行います。

・table.menu1は廃止

・td.header2をheader要素へ

・table.tablemenu1とtable.plan(ナビ)からグローバルナビ項目を取り出し

nav要素へ

・table.tablemenu1とtable.plan(ナビ)内のグローバルナビ項目以外は

aside要素へ

・記事1~のtable.planは、main要素へ

・h4はfooter要素へ

header要素への書き換えは、html文書内では下の様になります。

header要素へ書き換え

header要素への書き換えに伴いcss内も下の様に書き換えます。

header要素へ書き換え

リンク項目をnav要素とaside要素へ分けます。

「トップページへ戻ります」は「お知らせコーナー」に改称してnav要素へ

「おたすけシルバー隊について」は「おたすけシルバー隊とは」に改称してnav要素へ

「こんな事しています」は「活性化に向けて」に改称してnav要素へ

「会則」はaside要素へ

「活動のあゆみ」はaside要素へ

「更新履歴」はaside要素へ

「お役立ち情報」はaside要素へ

「助成による活動強化の記録」は「活性化に向けて」に吸収

「地域生涯学習」はnav要素へ

「オープンカレッジ」はnav要素へ

「パソコンサロン」はnav要素へ

「ボランティアコラボステップ・1」は「ステップ・1とともに」に改称してnav要素へ

「ボランティアコラボ豊川中央フリースクール」は「豊川中央フリースクールとともに」に改称して

nav要素へ

「とよかわボランティア・市民活動センターにて」は「イベントへの参加」に改称して

nav要素へ

nav要素が9項目、aside要素が4項目です。

nav要素はheader要素の中に、下の様にリストで記述します。

nav要素へ書き換え

この9項目の見た目を整理するのはCSSになります。横並びにする、文字色や背景色をコントロールする、 などはCSSの中で行います。

今回は、5項目横並び2段のナビにして下に5pxだけ裏地を出し、各項目は背景色を円形グラデュエーションにして マウスオン時には背景色と文字色を変える様にします。実際のCSS文書は下の通りです。

cssでのnav要素

書き換え後の画面を見てみます。

書き換え後の画面

「お知らせコーナー」にマウスオンすると画面は下の様に変わります。

書き換え後の画面

さて上のCSS文書中「li a」と「li a:hover」の2ケ所の記述で、 背景に円形グラデュエーションを描かせるbackground:radial-gradientを使っています。 今まではGIMPを使って画像を作っていたグラデュエーションですが、これがCSSでできる様になりました。

中心色がd4fcc8で終了色(周辺)が79f559になるグラデュエーション背景の記述は、下の通りです。

background:radial-gradient(#d4fcc8,#79f559);

グラデュエーションを周辺の95%で止めて、その外の背景色は終了色にしたい場合の記述は、下の通りです。

background:radial-gradient(#d4fcc8,#79f559 95%);

 

4項目のaside要素はHTML文書中には下の様に記述します。

aside要素書き換え後

CSS文書で各要素のスタイルを記述します。

cssでのaside要素

aside要素の幅、margin、背景色を指定し左寄せで配置します。 asideの中のdivでは幅と高さ、margin、中味の文字の大きさ、太さと配置を指定します。

div内のa要素は通常時とマウスオン時で設定を変えています。変える設定は背景画像と文字の色です。 尚、a要素はブロック扱いしています。

出来上りの確認をします。

aside要素書き換え後の画像

1番上の「お役立ち情報」にマウスオンしたら・・・

aside要素書き換え後のマウスオン画像

 

main要素はタブ<main></main>で囲われます。ただmainは、ここで紹介しているnavなどの他の要素よりも 後でくわえられていますので古いIEでは対応されていません(2016年4月時点)。

従って、現時点ではrole属性を使って下の様に記述する方が安心です。

<main role="main">
メインコンテンツ
</main>

role属性と言うのは、Webページの構造を記述するものです。従って、今回の様に、セマンティクス様の要素と役割がかぶります。 従って、HTMLの要素のみでセマンティクスが確保できる様になれば、role属性は不要です。

mainは、下の様に、見出しh1、ページ内リンク用リストul、それと複数のsectionで構成されます。 6つの記事が用意されていますので、ul内のリスト項目liは6つ、sectionも6つ(下画像では、大幅に割愛)有ります。

main要素書き換え後

sectionは見出しh2と文章、画像で構成され、id属性でリンク用名前を付けています。 ul内で指定されたリンク先名になります。 又、section内末尾には、<p>と</p>でページトップへのリンクを掛けています。

 

CSS文書を見て見ましょう。

cssでのmain要素

mainコンテンツはasideの右横に置くので、float: leftを使います。

h1はmainコンテンツ内幅方向中央に置くので、margin:0 auto;を使います。

リストmain ulは頭に・を付けたいので list-style: disc; を使います。

リスト項目main liは;float: leftを使って左合わせ横並びに設定します。

main sectionのcss記述はdivと同じ感覚でやっています。

この様にmain部分も作成できました。実際のWeb画面は下の様になっています。

main要素書き換え後の画面

フッターでは、著作権だけをシンプルに表示しています。

footer要素書き換え後

CSS文書を見て見ましょう。

cssでのfooter要素

実際のWeb画面は下の様になっています。

footer要素書き換え後の画面

ページトップ

前ページ←

→次ページ

コーナー