講師だって、最初は初心者だもの[03]もっと調べておきたい、HTML5のこと。/森 和恵

投稿:  著者:  読了時間:7分(本文:約3,300文字)


ご無沙汰です。森和恵です。
段々と暑くなって、日に日に夏が近づきますね。GW明けでだる〜いですが、焦らずゆっくり進みましょう。

さて。
今回は、Visual Web Developer 2010 Express(VWDE)にはお休み頂いて、HTML5の文法的な事項をもう少しご紹介します。



▼HTML5で変更される要素、消える要素

前回、HTML5で追加される新要素を紹介しました↓が、
< http://bn.dgcr.com/archives/20110411140100.html >
削除される要素や、同じ要素でも意味が変わる要素もあります。

【削除される要素】

<font> <u> <s> <big> <center> ...など、見栄えを指定する要素や、<frame> <frameset> <noframe> ...など、フレーム関連の要素が削除されました。

【変更される要素】
<hr> 水平線 → "内容的な区切り"へ
<section> など、ひとまとまりの文章中で区切りとして使用します。

<a> インライン要素 → "インタラクティブ・コンテンツ"へ
ユーザーが操作する要素(インタラクティブ・コンテンツ)へと幅を広げました。単にテキストをマークするだけではなく、<div> など、ブロックを内包できます。また <a name="××">など、アンカーとしての利用は廃止されました。

<strong> 強調 → "重要"へ
注意喚起など、物事の重要性、大切さを伝える時に使用します。

<em> 強調 → "調子を強める・強調"へ

文脈で強めたい箇所を指定する場合に使います。強める箇所が変わることで文章の意味が違ってくる場合に使用します。

 |例えば、「"私は"明日は行きません」と"私は"を強調すると、
 |「私は行かないが、○○さんは行きます」のような意味合いを表します。
 |「私は"明日"は行きません」と"明日"を強調すると、
 |「明日は行かないけど、今日は行きます」のような意味合いを表します。
 |このように、文章中で特定の言葉を強めたい時に使います。

<small> 小文字 → "細目"へ
免責事項や著作権表記など、細目となるコンテンツに使用します。

 |<big> は削除されたのに、<small> は意味が変わって残っていたり、
 |<frame> 無くなったけど、<iframe> は残っているなど、面白いですよね。
 |※たぶん、<iframe> は利用頻度が高いので現状に即して残ったのかと...。
 |HTML5の全要素は、下記サイトにくわしくまとめられています。
 |< http://html5.jp/tag/elements/index.html >

▼HTML5 向けのリセット・スタイルシート

第一回で、HTML5未対応のInternet Explorerで新要素を認識するのにhtml5.jsを読み込む対策をしました。
< http://bn.dgcr.com/archives/20110207140200.html >

これで未対応ブラウザも新要素を認識しますが、デフォルトのスタイルがなにも設定されていません。

例えば、<header> <nav> <article> <section>...の新要素をブロック要素として扱うために"display:block;"を指定するなど、必要なスタイルをCSSで指定しておく必要があります。

ケースバイケースで指定するプロパティは違ってきますが、
「HTML5 Reset Stylesheet」
< http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html >
で標準的なHTML5 向けのリセット・スタイルシートが紹介されているので参考にしてみてください。

▼ HTML5を取り入れた事例

国内にもHTML5を取り入れたサイト事例は増えてきています。どんな風にHTML5を使っているのか比較すると面白いです。

Google < http://www.google.co.jp/ >
ローソン < http://www.lawson.co.jp/index.html >
無印良品ネットストア < http://www.muji.net/store/ >
アドビ & HTML5 < http://adobe-html5.jp/ >

 |個人的に面白かったのがGoogle。HTML5宣言しているのに<center> を
 |使ってたり、閉じタグが極力なかったりします。
 |なんと、最後は</script>で終わってるんですよ!
 |たぶん、表示高速化を計るためだと思いますけれど。

HTML5未対応ブラウザにも対応すべく、本来のHTML5の使い方をしていないサイトも多いようです。

例えば、HTML5のDOCTYPE宣言をしているものの、新要素を使わずに<div> でレイアウトしていたり、<header class="entry-header">など新要素のタグセレクタは使わずに、クラスで定義するケースも目立ちます。

個人的には、文法に準じるのが必ずしも良しとは思いません。スムーズな運用ができれば、則していなくてもOKかと思います。ただ、そうすることが適切かどうかを考えつつ、これらの事例を参考にしてください。

 |どれぐらいHTML5の文法に則しているかは、
 |バリデーターチェック↓である程度判断できます。
 |HTML5 Validator(W3C)
 |< http://validator.w3.org/ >

 |海外のサイト事例は日本より断然多いです。
 |HTML5マークアップの参考にしてみましょう。
 |海外サイトの事例紹介− HTML5 Gallery
 |< http://html5gallery.com/ >


...はい。今回は、ここまでにしましょう。
次回からは、コンテンツのパターン別にHTML5でページを作ります。
マークアップのケースを学びましょう。
どうぞよろしく。(<ゝω・)綺羅星☆

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu >

【森和恵 r360studio 〜 Web系インストラクター 〜】
<site: http://r360studio.com > <twitter: http://twitter.com/r360studio >
<mail: r360studio@gmail.com >

近況報告:
大阪iMedioさんの今年度のセミナーがスタートします。木曜日は恒例の導入セミナー。2時間で、さくっと自社サイト運営に必要な事項を確認できますよ。

『Webサイト導入[超]入門 〜ホームページをこれから始める方のために〜』
< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=11840 >
※サイト運営をこれからする人向け。
※制作担当の方は、よくわかってない上司の人とかオススメしてみてください。

『Webサイト[出直し]入門 〜あなたのサイトには何が足りないか〜』
< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=11841 >
※サイト運営をなんとなくしてるけど、いまひとつなんだよねとか、
※制作会社に丸投げしてるけど、ホントにこれでいいのかとか悩んでる人向け。

あと変わったところでは、インストラクターさん向けのセミナーをやります。これは自分でも初めての試みで、準備に気合い入ってます。

『教える技術--わかりやすいセミナー進行の極意』
< http://m2.cap-ut.co.jp/event/semi03.html >

宣伝ばっかですみません。(汗)