HTML5 でコーディングしてみよう!
HTML5 によるコーディングについてまとめました. ちなみにこのサイトもずっと HTML5 で書いてたりします.
あらたに追加された要素の使い方や, CSS3 による段組レイアウトの例も書いてみました.
HTML5 テンプレート
HTML5 の基本となる部分です. ドキュメントタイプや文字コーディングの指定がシンプルになっています.
デモはこちら
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>HTML5 コーディング</title> <style> /* ここに CSS を書く */ </style> <script> /* ここに JavaScript を書く */ </script> </head> <body> <h1>HTML5 コーディング</h1> </body> </html>
省略可能になった DOCTYPE 宣言
指定の仕方がシンプルになっています
【 旧HTML 】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
【 HTML5 】
<!DOCTYPE html>
シンプルになった文字コード指定
文字コードの指定もシンプルになっています.
【 旧HTML 】
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" />
【 HTML5 】
<meta charset=UTF-8>
style と script のタイプ指定が不要に
今までも type 属性を省略しても正常に認識してくれていたのですが, HTML5 から正式に省略 OK になりました.
【 旧HTML 】
<style type="text/css"></style> <script type="text/javascript"></script>
【 HTML5 】
<style></style> <script></script>
セマンティックなマークアップ
ここでは, HTML5 で新たに追加された要素を使って body 部分をコーディングしていきます.
デモはこちら
<body> <header id="header"> <h1><header></h1> <nav id="nav"> <h1><nav></h1> </nav> </header> <div id="contents"> <section id="main"> <h1><section></h1> <article> <h1><article></h1> </article> <article> <h1><article></h1> </article> <article> <h1><article></h1> </article> </section> <aside id="side"> <h1><aside></h1> </aside> </div> <footer id="footer"> <h1><footer></h1> </footer> </body>
id, class名からの昇格
HTML4 では div に対して id, class を指定することで,コーディングしていましたが, よりセマンティックなコーディングを目指そうということでよく出てくる id, class 名をタグに昇格しました.
HTML5 で追加された主なタグ
HTML5 で追加された主なタグの一覧です.
HTML5(タグ) | HTML4(id, クラス名) | セマンティック |
---|---|---|
section | main, content, contents, area, body | 章や節といったセクションを表す. |
article | article, entry | ブログエントリや記事といった, それ自体でコンテンツとして成り立つ要素を表す. |
aside | sub | メインとなるコンテンツと関連性の薄い, つまり削除してもそれほど影響のないコンテンツを表します. 広告などに使用. |
header | head, header | ページやセクションのヘッダー部分を表す. |
footer | foot, footer | ページやセクションのフッダー部分を表す. |
nav | nav | ページのナビ部分を表します. |
これらの要素を使うことで, 人間の目にもクローラにもやさしいコーディングができます.
注意点
注意することが一つあります. それは, やみくもに div を section や article, aside に置き換えてはいけないということです.
html5doctorに以下の一文があります.
Don’t use it unless there is naturally a heading at the start of the section
セクションの始まりに見出し(h1~h6)を自然に入れられない場合は使わないでください 的なことが書かれています. この点だけ注意してください.
CSS3 で段組みレイアウト
これまでにコーディングした HTML5 要素の段組レイアウトの例です. CSS3 display:box; を使っています. リキットデザインにしてみました.
デモはこちら
* { margin: 0px; padding: 0px; -moz-box-sizing: border-box; box-sizing: border-box; font-family: "Meiryo", Arial, Helvetica, sans-serif; line-height: 1.5em; font-size: 12px; } h1 { font-size: 25px; } #header, #nav, #main, #main article, #side, #footer { margin: 10px; padding: 5px; border: 5px solid black; background-color: rgba(0, 0, 0, 0.125); border-radius: 5px; text-align: center; } #header { background-color: rgba(255, 0, 0, 0.125); min-width: 600px; } #contents { display: -webkit-box; display: -moz-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; width: 100%; min-width: 600px; min-height: 600px; } #main { -webkit-box-flex: 1; -moz-box-flex: 1; -moz-width: 800px; min-width: 400px; background-color: rgba(0, 255, 0, 0.125); } #side { width: 200px; background-color: rgba(0, 255, 0, 0.125); } #footer { min-width: 600px; background-color: rgba(0, 0, 255, 0.125); }
ちなみに, HTML5 として正しいかどうかをチェックしたい人は「Validator.nu (X)HTML5 Validator」というサイトが便利です. Address もしくは ファイルをアップロード, テキストエリアに直接書き込むかを選べる便利設計です.
次回は, display:box; を使った フレキシブルボックスレイアウトについて詳しく書こうと思います.
HTML5 によるコーディングについてざっくり書きました.
『HTML5 でコーディングしてみよう!』 http://t.co/DADPhP8 via @phi_jp
#web #html5
ちょっと修正.
HTML5 の構文チェックができるサイトへのリンクを追加.
『HTML5 でコーディングしてみよう!』
http://t.co/tjJnoze
#html5 #css3
[…] HTML5 でコーディングしてみよう! […]
[html5] / HTML5 でコーディングしてみよう! | TM Life http://t.co/c54rVv0
@Rosetta_Halt コラコラコラー!! これで勉強しなさい(さりげな..くないPRw)
http://t.co/3rIp8Fcy
ってのは冗談で, まぁコーディングの仕方は個々自由だから変なやつがほざいてた程度に流しといてちょ.
[…] う♪ 私のサイトでも HTML5 についてかいてます. ってさりげなくPR. […]
HTML5+CSS3の段組はこんな感じで書けるのかー。勉強になる!:http://t.co/58UunC7y
[…] HTML5 昔書いた HTML5 に関するエントリー 『HTML5 でコーディングしてみよう!』 のサンプルを jsdo.it […]
HTML5 でコーディングしてみよう! | TM Life http://t.co/gKxZhZDN
おっ、わかりやすい // HTML5 でコーディングしてみよう! http://t.co/SQPJwYsP @phi_jpさんから
おっ、わかりやすい // HTML5 でコーディングしてみよう! http://t.co/SQPJwYsP @phi_jpさんから
HTML5 でコーディングしてみよう! http://t.co/Y1rBRTJX 今作ってるサイトと大体構造合ってたから満足。やっぱりsectionでarticleくくるのか!
HTML5 でコーディングしてみよう! http://t.co/FSJmi3vo @phi_jpさんから
HTML5 でコーディングしてみよう! http://t.co/Y1rBRTJX 今作ってるサイトと大体構造合ってたから満足。やっぱりsectionでarticleくくるのか!
HTML5 でコーディングしてみよう! http://t.co/Y1rBRTJX 今作ってるサイトと大体構造合ってたから満足。やっぱりsectionでarticleくくるのか!
おっ、わかりやすい // HTML5 でコーディングしてみよう! http://t.co/SQPJwYsP @phi_jpさんから
RT @infoeproduction RT @tack261 おっ、わかりやすい // HTML5 でコーディングしてみよう! http://t.co/Oq5DnQ6l @phi_jpさんから