[写経] HTML5&CSS3 ステップアップブック 1
だいぶ放置していた本の写経を著作権を守りつつやってみる。
html5へ移行するメリット
- マークアップをシンプルにできる
- より細かくマークアップできる
- より柔軟に見出しをマークアップできる
- フォームのインターフェイスをわかりやすくできる
- ブロックレベルリンクを設定できる
- body内にstyleの設定を記述できる
- プラグインなしでビデオやオーディオを利用できる
- iframeやembedを利用できる
- SVGやCanvasで図形を描画する
- microdataを利用できる
css3へ移行するメリット
- 文字のデザインをカスタマイズできる
- 枠やメニューをグラフィカルにデザインできる
- アニメーションを設定できる
- 高さを揃えた段組みを設定できる
- フォームのインターフェースをわかりやすくデザインできる
- スマートフォンに対応できる
html5への移行
- DOCTYPE宣言の書き換え(<!DOCTYPE html>へ書き換え)*1
- ルート要素のxml宣言は不要(<html>のようにシンプルな記述)
- エンコードの種類の指定(<meta charset=”utf-8″>)*2
*1.DOCTYPE宣言が無いと下位互換モードになるので注意する
*2.下位互換の為に従来の記述も有効
html5に未対応なブラウザへの対応
- html5.jsライブラリを利用する
- html 5 Outlinerでアウトラインの確認が出来ます
ヘッダーのマークアップ
ヘッダーを<header>〜</header>でマークアップする。
headerは記事のヘッダーもマークアップすることが可能。
xhtmlの場合
<div id="header"> <h1>見出し</h1> <p>キャプション</p> </div>
html5の場合
<header> <h1>見出し</h1> <p>キャプション</p> </header>
ナビゲーションのマークアップ
<navi> <ul> <li>navi1</li> <li>navi2</li> <li>navi3</li> <ul> </navi>
記事のマークアップ
articleは再利用可能なコンテンツや自己完結しているコンテンツをマークアップするタグ。
例)フィードで配信、フォーラムの投稿、ブログの記事etc..
<article> <h2>タイトル</h2> <p>内容</p> </article>
セクションのマークアップ
articleでマークアップした内容を、より細かくマークアップするタグ。
コンテンツの構造をより明確にする事が可能。
navi、article、sectionなどはセクショニング・コンテンツカテゴリーに分類されるタグで、sectionは汎用的な用途で利用する。
そのため、見出しとセットで利用する方が無難。
<article> <h2>タイトル</h2> <p>内容</p> <section> <h3>セクション1</h> <p>内容</p> </section> <section> <h3>セクション2</h> <p>内容</p> </section> </article>
フッターのマークアップ
<footer> <small>Copyright (c) Frogegg.jp</small> </footer>
補足情報のマークアップ
<aside> <a href="feed.xml">feed</a> </aside>
見出しのマークアップ
ページ全体で<h1>〜<h6>を使いマークアップする事も可能だが、
セクショニング・コンテンツカテゴリーで区切るとそれぞれで<h1>〜<h6>を用いたマークアップが可能となる。
<h1>タイトル1<h1> <article> <h2>タイトル2<h2> <p>内容</p> <section> <h3>タイトル3</h3> <p>内容</p> </section> </article>
見出しのグループ化
hgroupを利用すると見出しのグループとしてマークアップする事が可能。
<hgroup> <h1>タイトル1<h1> <p>内容</p> </hgroup>
このページを読んだ人にオススメのブログ記事です！
About The Author
