WebデザイナーのためのHTML5入門

概 要

HTMLの新しい規格であるHTML5をつかってスマホやPCサイトを作るためのテクニックガイドです。本書では、すでにXHTMLやCSSでマークアップをしている人を対象に、HTML5のマークアップの基本を旧来のHTMLと比較しながら解説します。一般的なWebサイトの制作に必要な考え方、ページ作成に必要な要素、HTML5の新要素と使い方、スマートフォン向けサイト対策を踏まえた実践的なサイト構築のノウハウなどを丁寧に解説しています。レスポンシブWebやプログレッシブ・エンハンスメント、CSS3メディアクエリといった、これからWebデザイナーにとって必須となる知識をしっかり学びましょう! 作業用データのダウンロードサービス付き。

著者 ハヤシユタカ
価格 本体2400円(税別)
ISBN 978-4-7980-3445-4
発売日 2012/8/22
判型 B5変
色数 2色
ページ数 272
CD/DVD
対象読者 初級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

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個

search

tel

url

email

range

color

datetime

date

month

week

time

datetime-local

number

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

required属性

pattern属性

step属性

maxlength属性

min/max属性

novalidate属性

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

autofocus属性

autocomplete属性

list属性

placeholder属性

Appendix A2 プラグインなしでも動画を再生できる

HTML5のvideo要素の基本

A2_01 video要素の再生とブラウザ表示

A2_02 source要素を使用する

Appendix A3 プラグインなしでも音声を再生できる

HTML5のaudio要素の基本

A3_01 audio要素の再生とブラウザ表示

A3_02 source要素を使用する

PR

秀和システム