最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。
HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。
解説：（有）ムーニーワークス 林 豊／田崎一成
HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。
解説：（有）ムーニーワークス 林 豊／田崎一成
前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。
●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る
こちらをもとにCSSレイアウト用にclassやidを追加してCSSレイアウトの方を行います。今回、CSSを設定する際に決めたポイントは、新規の要素は記述の際にセレクタにタグだけの指定はせずにclassやidをつけてそれに対してCSSを記述しました。
現段階ではHTML5の仕様は確定していないので、これから無くなる可能性もあるのでセレクタに新要素はあてずにclass、idをつけるのが無難すので今回のサンプルもそのようにしました。
したがって、後ほどダウンロードしたCSSファイルを見ていただけると分かりますが、ほとんど同じ記述でレイアウトが作れています。CSSを設定する場合に直接classやidをセレクタにしているサイトはHTMLをちょっとタグを変えるだけでHTML5のコードになるというのが分かるかと思います。
ただ今回のxhtmlとHTML5の設計を作成してみましたが、見てもらえるとわかりますが、HTML5のタグの方が複雑というかタグの囲いが多くなりました。
これだったら今まで通りxhtmlでいいんじゃないかなと考える人も多いと思いますが、セマンティックWebを意識して、今後検索エンジンが新要素のマークアップを重視していく流れになるかもしれませんので、HTML5でのマークアップもただの新要素を使うだけでなく、その意味合いを理解してマークアップする必要が出てくるのかもしれません。
●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る
こちらをもとにCSSレイアウト用にclassやidを追加してCSSレイアウトの方を行います。今回、CSSを設定する際に決めたポイントは、新規の要素は記述の際にセレクタにタグだけの指定はせずにclassやidをつけてそれに対してCSSを記述しました。
現段階ではHTML5の仕様は確定していないので、これから無くなる可能性もあるのでセレクタに新要素はあてずにclass、idをつけるのが無難すので今回のサンプルもそのようにしました。
したがって、後ほどダウンロードしたCSSファイルを見ていただけると分かりますが、ほとんど同じ記述でレイアウトが作れています。CSSを設定する場合に直接classやidをセレクタにしているサイトはHTMLをちょっとタグを変えるだけでHTML5のコードになるというのが分かるかと思います。
ただ今回のxhtmlとHTML5の設計を作成してみましたが、見てもらえるとわかりますが、HTML5のタグの方が複雑というかタグの囲いが多くなりました。
これだったら今まで通りxhtmlでいいんじゃないかなと考える人も多いと思いますが、セマンティックWebを意識して、今後検索エンジンが新要素のマークアップを重視していく流れになるかもしれませんので、HTML5でのマークアップもただの新要素を使うだけでなく、その意味合いを理解してマークアップする必要が出てくるのかもしれません。
●新しい要素には直接スタイルをあてないでclassやidをつけました
＜hgroup id="logogroup"＞
＜h1＞＜img src="images/header_logo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /＞＜/h1＞
＜h2＞ゼロからはじめるHTML5でのサイト制作＜/h2＞
＜/hgroup＞
id="logogroup"を設定
＜h1＞＜img src="images/header_logo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /＞＜/h1＞
＜h2＞ゼロからはじめるHTML5でのサイト制作＜/h2＞
＜/hgroup＞
id="logogroup"を設定
このようにhgroupタグを使う場合には上記のようにid="logogroup"を記述します。xhtmlでは<div id="logogroup>としました。そして、この要素にスタイルを宛てる際には下記のようにします。
/*今回このような記載はしないで*/
hgroup｛
color：#f00；
｝
や
hgroup#logogroup｛
color：#f00；
｝
/*このようにclassやidで指定しております*/
#logogroup｛
color：#f00；
｝
hgroup｛
color：#f00；
｝
や
hgroup#logogroup｛
color：#f00；
｝
/*このようにclassやidで指定しております*/
#logogroup｛
color：#f00；
｝
このようにすれば<div id="logogroup">でも<hgroup id="logogroup">でもどちらにもスタイルを適用できます。もし仮に<hgroup>タグが非推奨になった場合でも、HTMLタグの方だけを変えればCSSはそのまま適用できるという形で変更箇所を少なくすることが可能です。
●ロゴなどのナビゲーションを左右に分ける部分はfloatを使用しました
HTML5の新要素のheader要素は下のグローバルナビゲーションを含めてheaderとしたかったので、floatをclearさせるためにid="header" class="clearfix"を使いましたので、HTML5ではheader要素の中にdiv要素を入れました。
＜div id="header" class="clearfix"＞
＜hgroup id="logogroup"＞
＜h1＞＜img src="images/header_logo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /＞＜/h1＞
＜h2＞ゼロからはじめるHTML5でのサイト制作＜/h2＞
＜/hgroup＞
＜ul id="subnav" class="clearfix"＞
＜li class="sitemap"＞＜a href="#"＞サイトマップ＜/a＞＜/li＞
＜li class="rss"＞＜a href="#"＞RSSフィード＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜hgroup id="logogroup"＞
＜h1＞＜img src="images/header_logo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /＞＜/h1＞
＜h2＞ゼロからはじめるHTML5でのサイト制作＜/h2＞
＜/hgroup＞
＜ul id="subnav" class="clearfix"＞
＜li class="sitemap"＞＜a href="#"＞サイトマップ＜/a＞＜/li＞
＜li class="rss"＞＜a href="#"＞RSSフィード＜/a＞＜/li＞
＜/ul＞
＜/div＞
#logogroup｛
width：740px；
float：left；
｝
#subnav｛
width：200px；
float：right；
margin-top：15px；
｝
width：740px；
float：left；
｝
#subnav｛
width：200px；
float：right；
margin-top：15px；
｝
●更新情報のマークアップの違いを比較します
xhtmlでは定義リストを使用しシンプルなマークアップでしたが、HTML5では新要素の「section」「article」「header」を使用してマークアップしました。
【xhtmlでの更新情報のマークアップ】
＜div id="new"＞
＜h2＞更新情報＜/h2＞
＜dl＞
＜dt＞お知らせタイトル01＜span＞2016年01月03日＜/span＞＜/dt＞
＜dd＞テキストテキストテキストテキストテキストテキスト…＜/dd＞
＜dt＞お知らせタイトル02＜span＞2016年01月02日＜/span＞＜/dt＞
＜dd＞テキストテキストテキストテキストテキストテキスト…＜/dd＞
＜dt＞お知らせタイトル03＜span＞2016年01月01日＜/span＞＜/dt＞
＜dd＞テキストテキストテキストテキストテキストテキスト…＜/dd＞
＜/dl＞
＜div＞
＜div id="new"＞
＜h2＞更新情報＜/h2＞
＜dl＞
＜dt＞お知らせタイトル01＜span＞2016年01月03日＜/span＞＜/dt＞
＜dd＞テキストテキストテキストテキストテキストテキスト…＜/dd＞
＜dt＞お知らせタイトル02＜span＞2016年01月02日＜/span＞＜/dt＞
＜dd＞テキストテキストテキストテキストテキストテキスト…＜/dd＞
＜dt＞お知らせタイトル03＜span＞2016年01月01日＜/span＞＜/dt＞
＜dd＞テキストテキストテキストテキストテキストテキスト…＜/dd＞
＜/dl＞
＜div＞
【HTML5での更新情報のマークアップ】
＜section id="new"＞
＜h2＞更新情報＜/h2＞
＜articles class="newstopics"＞
＜header class="clearfix"＞
＜h3＞お知らせタイトル01＜/h3＞
＜time datetime="2016-09-01" class="data"＞2016年09月01日＜/time＞
＜/header＞
＜p＞テキストテキストテキストテキストテキストテキスト…＜/p＞
＜/articles＞
＜articles class="newstopics"＞
＜header class="clearfix"＞
＜h3＞お知らせタイトル02＜/h3＞
＜time datetime="2016-09-01" class="data"＞2016年09月01日＜/time＞
＜/header＞
＜p＞テキストテキストテキストテキストテキストテキスト…＜/p＞
＜/articles＞
＜articles class="newstopics"＞
＜header class="clearfix"＞
＜h3＞お知らせタイトル02＜/h3＞
＜time datetime="2016-09-01" class="data"＞2016年09月01日＜/time＞
＜/header＞
＜p＞テキストテキストテキストテキストテキストテキスト…＜/p＞
＜/articles＞
＜/section＞
＜section id="new"＞
＜h2＞更新情報＜/h2＞
＜articles class="newstopics"＞
＜header class="clearfix"＞
＜h3＞お知らせタイトル01＜/h3＞
＜time datetime="2016-09-01" class="data"＞2016年09月01日＜/time＞
＜/header＞
＜p＞テキストテキストテキストテキストテキストテキスト…＜/p＞
＜/articles＞
＜articles class="newstopics"＞
＜header class="clearfix"＞
＜h3＞お知らせタイトル02＜/h3＞
＜time datetime="2016-09-01" class="data"＞2016年09月01日＜/time＞
＜/header＞
＜p＞テキストテキストテキストテキストテキストテキスト…＜/p＞
＜/articles＞
＜articles class="newstopics"＞
＜header class="clearfix"＞
＜h3＞お知らせタイトル02＜/h3＞
＜time datetime="2016-09-01" class="data"＞2016年09月01日＜/time＞
＜/header＞
＜p＞テキストテキストテキストテキストテキストテキスト…＜/p＞
＜/articles＞
＜/section＞
比較してみるとHTML5の方が複雑なマークアップになっていますが、更新情報という括りをひとつのセクションとしてとらえ「section」要素を使用し、各更新情報を一つの独立したフィードとして考え「article」を使用し、更新内容の見出しを「header」を使用してマークアップしてあります。このようにマークアップすることで明示的にアウトラインを出すことができます。
スタイルの方は同じようなidやclassを使うことによって対応しています。
スタイルの方は同じようなidやclassを使うことによって対応しています。
【xthmlでの更新情報のCSS】
/*更新情報*/
#news dt｛
font-size：1.3em；
font-weight：bold；
background：url（../images/icon_02.gif）no-repeat 0 2px；
padding：0 0 18px；
margin：20px 0 10px 0；
｝
#news dd｛
padding-bottom：12px；
border-bottom：1px dashed #ccc；
margin-right：26px；
｝
/*更新情報*/
#news dt｛
font-size：1.3em；
font-weight：bold；
background：url（../images/icon_02.gif）no-repeat 0 2px；
padding：0 0 18px；
margin：20px 0 10px 0；
｝
#news dd｛
padding-bottom：12px；
border-bottom：1px dashed #ccc；
margin-right：26px；
｝
【HTML5での更新情報のCSS】
/*更新情報*/
#news h3｛
font-size：1.3em；
background：url（../images/icon_02.gif）no-repeat 0 2px；
padding-left：18px；
margin：-3px 17px 10px 0；
float：left；
｝
#news .data｛
margin-top：20px；
display：block；
｝
#newstopics｛
padding-bottom：20px；
border-bottom：1px dashed #ccc；
margin：20px 26px 0 0；
｝
/*更新情報*/
#news h3｛
font-size：1.3em；
background：url（../images/icon_02.gif）no-repeat 0 2px；
padding-left：18px；
margin：-3px 17px 10px 0；
float：left；
｝
#news .data｛
margin-top：20px；
display：block；
｝
#newstopics｛
padding-bottom：20px；
border-bottom：1px dashed #ccc；
margin：20px 26px 0 0；
｝
あとは特別な部分はありませんのでそれぞれの全体の要素の設計を見てみます。
●今回作成したxhtmlでのタグの使い方
●今回作成したxhtmlでのタグの使い方
▲クリックで拡大します
●今回作成したHTML5でのタグの使い方
▲クリックで拡大します
なお、完成したページはこちらになります。
●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る
パッとソースを比較するとHTML5の方がコードが長くなっていますが、原稿内容に応じて使用する要素の意味を正しくマークアップすることによってセマンティックなWebサイトになると思います。実務レベルでどこまで正しくしなければいけないかなどは、googleやyahooの検索エンジンの動向によって制作の現場では変わっていくと思われます。
今回で「ゼロからはじめるHTML5でのサイト制作」は基本編として最終回になりますが、これからも日々勉強していきたいと思います。引き続きブログの方で勉強した情報などを更新してまいりますので宜しくお願いします。
●HTML5でサイトをつくろう
http://www.html5-memo.com/
●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る
パッとソースを比較するとHTML5の方がコードが長くなっていますが、原稿内容に応じて使用する要素の意味を正しくマークアップすることによってセマンティックなWebサイトになると思います。実務レベルでどこまで正しくしなければいけないかなどは、googleやyahooの検索エンジンの動向によって制作の現場では変わっていくと思われます。
今回で「ゼロからはじめるHTML5でのサイト制作」は基本編として最終回になりますが、これからも日々勉強していきたいと思います。引き続きブログの方で勉強した情報などを更新してまいりますので宜しくお願いします。
●HTML5でサイトをつくろう
http://www.html5-memo.com/
→連載目次
profile
●ハヤシユ タカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ 、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立 つ情報を集めて制作のヒントになるブログを更新している。
●HTML5でサイト をつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●ハヤシユ タカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ 、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立 つ情報を集めて制作のヒントになるブログを更新している。
●HTML5でサイト をつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
