cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

[写経] HTML5&CSS3 ステップアップブック 1

だいぶ放置していた本の写経を著作権を守りつつやってみる。

html5

html5へ移行するメリット

  1. マークアップをシンプルにできる
  2. より細かくマークアップできる
  3. より柔軟に見出しをマークアップできる
  4. フォームのインターフェイスをわかりやすくできる
  5. ブロックレベルリンクを設定できる
  6. body内にstyleの設定を記述できる
  7. プラグインなしでビデオやオーディオを利用できる
  8. iframeやembedを利用できる
  9. SVGやCanvasで図形を描画する
  10. microdataを利用できる

css3へ移行するメリット

  1. 文字のデザインをカスタマイズできる
  2. 枠やメニューをグラフィカルにデザインできる
  3. アニメーションを設定できる
  4. 高さを揃えた段組みを設定できる
  5. フォームのインターフェースをわかりやすくデザインできる
  6. スマートフォンに対応できる

html5への移行

  1. DOCTYPE宣言の書き換え(<!DOCTYPE html>へ書き換え)*1
  2. ルート要素のxml宣言は不要(<html>のようにシンプルな記述)
  3. エンコードの種類の指定(<meta charset=”utf-8″>)*2

*1.DOCTYPE宣言が無いと下位互換モードになるので注意する
*2.下位互換の為に従来の記述も有効

html5に未対応なブラウザへの対応

  1. html5.jsライブラリを利用する
  2. 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>

Add a Comment

メールアドレスが公開されることはありません。

Get Adobe Flash player