2011/09/05Tweet先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5=難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。xhtmlではブロックレベル要素とインライン要素という分類に分けていましたが、HTML5ではそれは無くなり、代わりに『コンテンツ・モデル』という、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。このブログもHTML5で作成していますがXHTML→HTML5の移行は数個の新規タグと考え方がわかればすぐに移行できるとおもいます。そこでこれまで当ブログでまとめてきたHTML5の基本の記事からXHTMLからHTML5への移行の際のタグの違いをまとめて簡単な構成を作成してみました。正式な勧告がまだな状態のHTML5なので現段階(2011.09.01)での考えたマークアップなので、書き方が複数案あってどちらにしようか迷う部分もありました。おかしな部分や他にもっとよい書き方がありましたらアドバイスお願いします。このブログで皆さんと色々情報交換ができればうれしいです。HTML5の基本の書き方XHTML1.0とHTML5の基本のHTMLの違いを覚えましょう。この宣言文だけ変えて中のコードはいままでどおりでもHTML5のサイトになります。HTML5のDOCTYPE宣言XHTML1.0と比べて、HTML5では非常にシンプルになっていて、これで標準モードでレンダリングされHTML5に準拠したページになります。html要素と文字のエンコーディングXHTML1.0ではhtml要素にxmlns属性が必要でしたが、HTML5ではlang属性を記述して言語指定しています。続いてエンコーディングの指定方法ですが、HTML5でもエンコーディング指定をするのは変わりませんが短くなりました。HTML5がIEなど対応していないブラウザへ新要素への対応IE6からIE8はHTML5の新要素に対応していないのでスタイルシートを適応することができないようです。そこで、JavaScriptを用いて新たに要素を作成します。Sharp氏が公開した『html5.js』というライブラリをインポートすることで解決することができるようです。最後にHTML5用のリセットCSSを読み込みます。こちらもいろいろリセットCSSが公開されていいますが今回はhtml5doctorのリセットCSSがよく使われているようなので、html5doctorのリセットCSSをダウンロードして読み込みます。上記のリセットは利用しているサイトも多いようなので、このブログでも使用させていただきました。CSSの中には今までどうり各要素を一度リセットさせる内容と、新要素をdisplay:block;でblock要素に変えていたり、新たに加わったものへの対応が書かれていました。よいリセットCSSがありましたら教えてください。charset="UTF-8"><title>サイトのタイトル</title></head><body>//ここにサイトに表示するコンテンツ内容を記述</body></html>※既存のコードをそのまま使用する場合は「html5.js」や「html5reset.css」を使う必要はありません。このように上の4行を変えるだけで一応?HTML5で宣言されたコードになります。詳しくご覧になりたい方は過去のエントリーにもまとめてあります。第1回『HTML5の基本の書き方を覚える』この宣言文だけ変えてHTML5ですといえないこともない・・。これはちょっと楽しすぎだろうということでもうちょっと新しいタグを使って簡単なレイアウトのコーディングをXHTML1.0とHTML5で作成して比較してみようとおもいます。簡単なレイアウトでXHTML1.0とHTML5のタグの違いを比較してみる今回は下記の簡単なレイアウトを元にXHTML1.0とHTML5でマークアップしてみようとおもいます。CSSでのレイアウトまでは行わずに純粋にHTMLのマークアップ行い、次回のエントリーで新しいタグの説明とレイアウトの方を作成したいとおもいます。※クリックで拡大してみれますここから下に今回作成するXHTML1.0とHTML5でのマークアップですがレイアウト用のidやclassが入るとソースが長くなって読みにくくなるのでそちらはまだ設定していません。※CSSレイアウト用のclassやidなどは一部つけていない状態です。※画像のリンク、テキストのリンクなどソースが長くなるので一部つけていません。※仮テキストはソースコードが長くなるので短くしました。※HTML5では画像のaltタグの仕様が変わっておりますが今回は省略しております。--></body></html>上のソースが読みにくい場合は下記のサンプルページのソースをご覧ください。HTMLの確認のためコメントアウトしてあります。--></body></html>上のソースが読みにくい場合は下記のサンプルページのソースをご覧ください。お問い合わせメールをsmallタグからaddressタグに、コピーライトをpタグからsmallタグに変更いたしました。次回はxhtmlとHTML5でのタグの違いの説明やHTML5でこのページのアウトラインについてなどまとめて、レイアウトを完成させてみようとおもいます。徹底解説HTML5マークアップガイドブックHTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。してverが変わりました。同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。ブログを作成する際に参考にした本はこちらにまとめてあります。JAPANというサイトを作りました。このプロジェクトでは、日本各地の素晴らしい風景やイベントを動画で伝えていきたいと思ってます。トレーラーとして京都でのムービーをアップしましたのでよかったら見てください。※PCでご覧の方は是非4Kのフルスクリーンで見てください。ハヤシユタカ2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。詳しいプロフィールはこちら最近書いた記事2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。HTML5から追加された新要素を理解しよう!【初級編:HTML5のマークアップ】Facebookページで2つのブログの更新情報をチェック「HTML5でサイトをつくろう」と「WEBデザインクリップ」の更新情報やWEB制作に役立つ情報を更新しています。System」の使い方をまとめました。System」に画像対応などしてレスポンシブWEBサイトをつくろう(カスタマイズ編)最新のエントリー2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。勉強しながら調べたサイト情報やサンプルの作成。そのほかweb制作に役立つ情報を共有し、情報交換できるサイトになればうれしいです。