最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう | デザインってオモシロイ -MdN Design Interactive-

最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう

2018.6.26 TUE

最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう

前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlと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でのマークアップもただの新要素を使うだけでなく、その意味合いを理解してマークアップする必要が出てくるのかもしれません。


新しい要素には直接スタイルをあてないで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"を設定
このようにhgroupタグを使う場合には上記のようにid="logogroup"を記述します。xhtmlでは<div id="logogroup>としました。そして、この要素にスタイルを宛てる際には下記のようにします。
/*今回このような記載はしないで*/

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
#logogroup{
width740px
floatleft


#subnav{
width200px
floatright
margin-top15px

更新情報のマークアップの違いを比較します

xhtmlでは定義リストを使用しシンプルなマークアップでしたが、HTML5では新要素の「section」「article」「header」を使用してマークアップしました。
【xhtmlでの更新情報のマークアップ】

div id="new"
 <h2>更新情報</h2
 <dl
  <dt>お知らせタイトル01span2016年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
比較してみるとHTML5の方が複雑なマークアップになっていますが、更新情報という括りをひとつのセクションとしてとらえ「section」要素を使用し、各更新情報を一つの独立したフィードとして考え「article」を使用し、更新内容の見出しを「header」を使用してマークアップしてあります。このようにマークアップすることで明示的にアウトラインを出すことができます。

スタイルの方は同じようなidやclassを使うことによって対応しています。
【xthmlでの更新情報のCSS】

/*更新情報*/

#news dt{
font-size1.3em
font-weightbold
backgroundurl(../images/icon_02.gif)no-repeat 0 2px
padding0 0 18px
margin20px 0 10px 0


#news dd{
padding-bottom12px
border-bottom1px dashed #ccc
margin-right26px
【HTML5での更新情報のCSS】

/*更新情報*/

#news h3
font-size1.3em
backgroundurl(../images/icon_02.gif)no-repeat 0 2px
padding-left18px
margin-3px 17px 10px 0
floatleft


#news .data{
margin-top20px
displayblock


#newstopics{
padding-bottom20px
border-bottom1px dashed #ccc
margin20px 26px 0 0
あとは特別な部分はありませんのでそれぞれの全体の要素の設計を見てみます。



●今回作成したxhtmlでのタグの使い方
▲クリックで拡大します

▲クリックで拡大します



●今回作成したHTML5でのタグの使い方
▲クリックで拡大します

▲クリックで拡大します

なお、完成したページはこちらになります。

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/
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN BOOKS|デザインの本

月刊MdN 最新刊

週間アクセスランキング

6.18-6.24