HTML5 でコーディングしてみよう!

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

HTML5 によるコーディングについてまとめました. ちなみにこのサイトもずっと HTML5 で書いてたりします.

あらたに追加された要素の使い方や, CSS3 による段組レイアウトの例も書いてみました.

sample

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; を使ったフレキシブルボックスレイアウトについて詳しく書こうと思います.