xhtmlからHTML5のマークアップの違いや概念を解説した書籍『WebデザイナーのためのHTML5入門』発売しました

秀和システムさんから執筆させていただいた書籍が発売になりました。

『WebデザイナーのためのHTML5入門』2012/8/22発売

amazonで「WebデザイナーのためのHTML5入門」を見る

秀和システムで「WebデザイナーのためのHTML5入門」を見る

ページ最後に出版社様から本書を5冊プレゼントいただきましたので5名様にプレゼントがあります。

『WebデザイナーのためのHTML5入門』概要

こちらの書籍ではHTML5といっても派手な技術などではなく、HTML5の基本のマークアップの考え方からxhtmlやHTML4からの要素（タグ）の使い方の違い、新要素の使い方、「カテゴリー」「コンテンツ・モデル」「アウトライン」の考えなどをまとめて、PCサイトでも今すぐ使えるHTML5の基本の本となっております。

対象者としてはいままでHTML4やXHTML1.0でWebサイトを作っている人や、HTMLのタグやCSSの基本がわかっている人に向けて書いています。

HTMLのタグって何？CSSの書き方って何？という人にはその辺の説明はあまりしていませんのでご注意ください。

しかし、レイアウトについては全CSSに何のための記述なのかをコメントいれてありますのでなぜそのように書いたかはわかるようにしてあります。

いまWeb制作会社など実務などでXHTMLなどでマークアップしているけど、HTML5ではどのような要素を使っているのか？どのような考え方に変更があるのか？などを勉強したい方には最適な内容になっているかと思います。

基本的にはHTML5といってもIE7やIE8などに対応していないと今はまだ意味が無いと思っているので「今すぐ使えるHTML5」という部分にポイントを置いています。

またPCサイトサイトだけではなく、CSSのメディアクエリを使用してスマートフォン用のレイアウトの実装もしておりますので、システムでの振り分けではなく簡単にフロント側だけでスマートフォンサイトを作りたいという部分についても作成しております。

本書で作成しているサンプルサイト

こちらで確認することができます。

また素材一式のダウンロードは出版社さんのサイトからダウンロードできます。

秀和システムで「WebデザイナーのためのHTML5入門」を見る

TOPページ

TOPページアウトライン

TOPページスマートフォン用

製品一覧ページ

製品一覧ページアウトライン

製品個別ページ

製品個別ページアウトライン

『WebデザイナーのためのHTML5入門』目次

■Chapter 01 HTML5でのサイト制作について
●01_01 HTML5とは何か？
●01_02 HTML5でできることは？
●01_03 HTML5はすぐに使えるのか？
●01_04 旧来のマークアップとHTML5との違いは？
●01_05 セマンティックなマークアップ

■Chapter 02 HTML5 のマークアップ基本
●02_01 従来のHTMLと新しいHTML5の基本文書の書き方を比較する
　02-01-01 DOCTYPE宣言
　02-01-02 html要素と文字エンコーディング
　02-01-03 省略可能となった属性（javascript）
　02-01-04 省略可能となった属性（css）
　02-01-05 空要素閉じタグの省略
　02_02 HTML5未対応のブラウザへの対応方法
　02-02-01 IE7とIE8に対応させるhtml5shimについて
　02-02-02 HTML5のリセットCSSについて

●02_03 HTML5で使い方が変更された要素のまとめ
　02-03-01 a要素
　02-03-02 address要素
　02-03-03 small要素
　02-03-04 dl要素
　02-03-05 strong要素
　02-03-06 b要素
　02-03-07 i要素
　02-03-08 s要素
　02-03-09 u要素
　02-03-10 cite要素
　02-03-11 hr要素

●02_04 HTML5の新要素について
　02-04-01 hgroup要素
　02-04-02 header要素
　02-04-03 footer要素
　02-04-04 nav要素
　02-04-05 aside要素
　02-04-06 time要素
　02-04-07 figure要素

●02_05 HTML5の新要素section要素とarticle要素とセクションという考え方
　02-05-01 section要素とarticle要素について
　02-05-02 HTML5でのセクションという考え方
　02-05-03 セクション分けした原稿を見出し要素を使用してマークアップする
　02-05-04 class属性、id属性を設定してマークアップする

●02_06 HTML5の新要素section要素の使い方を詳しくみる
　02-06-01 section 要素の使い方
　02-06-02 section要素の主な特徴
　02-06-03 section要素を使用してマークアップする
　02-06-04 section要素とdiv要素の使用用途について
　02-06-05 section要素まとめ

●02_07 HTML5の新要素article要素の使い方を詳しくみる
　02-07-01 article 要素について
　02-07-02 article 要素を使用してブログなどのマークアップする
　02-07-03 article 要素を使用して通常サイトなどをマークアップする

■Chapter 03 HTML5の「カテゴリー」について
●03_01 カテゴリーとは？
　03-01-01 カテゴリー一覧

●03_02 カテゴリーの種類
　03-02-01 メタデータ・コンテンツ（Metadata content）
　03-02-02 フロー・コンテンツ（Flow content）
　03-02-03 セクショニング・コンテンツ（Sectioning content）
　03-02-04 ヘッディング・コンテンツ（Heading content）
　03-02-05 フレージング・コンテンツ（Phrasing content）
　03-02-06 エンベッディッド・コンテンツ（Embedded content）
　03-02-07 インタラクティブ・コンテンツ（Interactive content）
　03-02-08 セクショニング・ルート

■Chapter 04 HTML5 の「コンテンツ・モデル」について
●04_01 コンテンツ・モデルとは？

●04_02 サンプルコードでコンテンツ・モデルを確認

●04_03 特定の要素が持つ限定ルール
　04-03-01 特定の要素が持つ限定ルール1：hgroup要素
　04-03-02 特定の要素が持つ限定ルール2：子孫の要素を制限

■Chapter 05 HTML5の「アウトライン」について
●05_01 アウトラインとは？

●05_02 アウトラインをサンプルコードで確認する
　05-02-01 アウトラインを確認するツール「HTML5 Outliner」
　05-02-02 XHTML 1.0とHTML5のアウトラインを確認する

●05_03 暗黙的なアウトラインと明示的なアウトライン
　05-03-01 アウトラインのポイント（1） 暗黙的なアウトライン
　05-03-02 アウトラインのポイント（2） 明示的なアウトライン

●05_04 見出し要素をすべてh1にしてアウトラインを確認する
　05-04-01 XHTML 1.0のアウトラインを確認する

■Chapter 06 XHTML 1.0と比較しながらHTML5のマークアップをしてみる
●06_01 サンプルサイトをXHTML 1.0とHTML5で作成してマークアップの違いを確認してみる
　06-01-01 作成するサイトを見てみる
　06-01-02 タグの違いを確認してみる：ヘッダーエリア
　06-01-03 タグの違いを確認してみる：ナビゲーションエリア
　06-01-04 タグの違いを確認してみる：メインコンテンツエリア
　06-01-05 タグの違いを確認してみる：サイドエリア
　06-01-06 タグの違いを確認してみる：フッターエリア

●06_02 XHTML 1.0と比較しながらHTML5のアウトラインを確認してみる
　06-02-01 XHTML 1.0のコードでのアウトラインを確認してみる
　06-02-02 HTML5のコードでのアウトラインを確認してみる

●06_03 CSSレイアウトのためのclass属性、id属性を設定する
　06-03-01 ヘッダーエリアを設定する
　06-03-02 コンテンツエリアを設定する
　06-03-03 フッターエリアを設定する

■Chapter 07 CSSでレイアウトを作成する
●07_01 PCサイトのレイアウトを作成する
　07-01-01 ベースのCSSを設定する
　07-01-02 ヘッダーエリアを設定する
　07-01-03 ナビゲーション・グラフィックを設定する
　07-01-04 コンテンツ領域を設定する
　07-01-05 メインコンテンツエリアを設定する
　07-01-06 サイドエリアを設定する
　07-01-07 フッターエリアを設定する

●07_02 メディアクエリを使用してスマートフォンサイトのレイアウトを作成する
　07-02-01 レスポンシブWebデザインとは？
　07-02-02 メディアクエリとは？
　07-02-03 メディアクエリ用のCSSとviewportの設定
　07-02-04 ヘッダーエリアを設定する
　07-02-05 ナビゲーション・グラフィックを設定する
　07-02-06 メインコンテンツエリアとサイドエリアを設定する
　07-02-07 フッターエリアを設定する

●07_03 下層ページのレイアウトを作成する
　07-03-01 更新情報一覧ページを作成する
　07-03-02 メニュー一覧ページを作成する
　07-03-03 メニュー個別詳細ページを作成する
　07-03-04 スマートフォン用レイアウトのCSSを作成する

■Appendix A1 HTML5のform要素の概要
●A1_01 HTML5でinput要素に追加されたtype属性13個

●A1_02 入力可能値の制限やバリデーションに関する属性

●A1_03 そのほかのフォームの新しい要素

■Appendix A2 プラグインなしでも動画を再生できる
●HTML5のvideo要素の基本
　A2_01 video要素の再生とブラウザ表示
　A2_02 source要素を使用する

■Appendix A3 プラグインなしでも音声を再生できる
●HTML5のaudio要素の基本
　A3_01 audio要素の再生とブラウザ表示
　A3_02 source要素を使用する

本書『WebデザイナーのためのHTML5入門』を5名さまにプレゼント

終了いたしました。
たくさんのご応募ありがとうございました。

出版社様のご好意で本書を5冊いただきました。
そこでいつもブログを見ていただいている方に抽選で5名様にプレゼントいたします。

見てみたいという方は下記の方法で応募できます。

Twitterから応募

twitterで @html5memoをフォローし、「 書籍プレゼント『WebデザイナーのためのHTML5入門』が欲しい！ http://www.html5-memo.com/other/html5book/ #html5memobook 」 とツイートすればOK。

2012年8月27日19：45追記
シェアやいいねでの応募については規約違反というメッセージいただきまして気が付かずに行ってしまいまして大変申し訳ございません。
以降はtwitterのみでの応募とさせていただきます。お手数おかけいたしますがよろしくお願い致します。
すでにいいね、シェアしていただいた方はtwitterの方でのカウントととして抽選させていただきます。

Facebookから応募

HTML5でサイトを作ろうのFaecbookページを「いいね」をして頂いて、本ブログの記事を「シェア」して、「 書籍プレゼント『WebデザイナーのためのHTML5入門』が欲しい！ 」 」 とシェアしていただければOK。ハヤシユタカとFB上で友達出ない人、公開していない人はシェアが見えませんので記事を「いいね」でお願いします。

締め切り

9月3日までツイートされた中から抽選で5名様を選び、ツイッターのダイレクトメールもしくはfacebookメールで当選を連絡しますので、当選通知が来た方は送付先の住所を教えて下さい。

計5名さまにプレゼントいたします。
※なお発送は日本国内に限らさせていただきます。

なお、@html5memoをフォローし忘れてダイレクトメールが届かなかったり、連絡後1週間経っても返信が無い場合は当選が無効になるので気をつけて下さいね。

facebook、twitterの両方で応募していただいても大丈夫ですが、もし両方共に当選してしまいましたら片方のみにさせて頂きます。

最後に

これからもHTML5やjavascript、CSS3などの勉強をどんどんしていきたいと思っていますのでよろしくお願いします。

また勉強会やイベント、企業研修セミナーなどHTML5やWEB制作全般についてのセミナー・講演なども行っておりますので是非お声がけください。
※ブログのお問い合わせメールがあまり好調ではなくて気が付きませんので弊社HPよりお声掛け下さい。

●有限会社ムーニーワークス
http://www.moonyworks.com/