徹底解説 HTML5 マークアップガイドブック 最終草案対応版

概 要

HTML5マークアップの基礎と全要素・全属性を解説して好評だった「徹底解説 HTML5マークアップガイドブック」が、W3C HTML5の最終草案に対応してリニューアルされました。本書では、コンテンツ・モデルやセクション、アウトライン・アルゴリズムといったHTML5の特徴、HTML4との違い、各種タグの仕様と使い方、スクリプトの取り込みなど、ドキュメント構造とテキストの意味をはっきりさせるHTML5独特のマークアップテクニックを、豊富なサンプルを交えて、わかりやすく、かつ徹底的に解説しています。また、HTML5で新たに導入された要素だけでなく、HTML5に引き継がれた旧来の要素についても詳細に解説しているので、マークアップの基礎をすべて学べます。

著者 羽田野太巳
価格 本体3000円(税別)
ISBN 978-4-7980-3095-1
発売日 2011/11/25
判型 B5変
色数 2色
ページ数 608
CD/DVD
対象読者 初級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

第1章 HTML5概要

1.1 HTML5誕生の経緯

HTMLの限界

HTML5の誕生

HTML5の策定スケジュール

1.2 HTML5の設計原則

HTML5の策定で重要視される4つのポイント

ポイント(1)互換性

ポイント(2)実用性

ポイント(3)相互運用性

ポイント(4)ユニバーサル・アクセス

あくまでも原則であることに注意

1.3 HTML5の全体像

HTML5に関連する仕様の全体

仕様(1)Web Applications1.0

仕様(2)WHATWG HTML

仕様(3)HTML5

仕様(4)HTML Microdata

仕様(5)HTML Canvas 2D Context

仕様(6)HTML5 Web Messaging

仕様(7)Web Workers

仕様(8)Web Storage

仕様(9)Indexed Database API

仕様(10)Web SQL Database

仕様(11)Server-Sent Events

仕様(12)WebSocket API

仕様(13)WebSocket Protocol

仕様(14)Geolocation API

仕様(15)File API

第2章 HTML4とHTML5の違い

2.1 変更点の概要

旧来のマークアップとの3つの違い

2.2 新たに導入された要素

新要素の概要

2.3 変更された要素

意味が変更されたり、新たに意味付けされた要素の概要

2.4 廃止になった要素

廃止になった理由

見た目しか表さずCSSで対処できる要素

フレーム

ほとんど使われていない要素

2.5 DOCTYPE

シンプルになったDOCTYPE宣言

2.6 MathMLとSVG

HTML内に直接マークアップ可能に

第3章 HTML作成の準備

3.1 HTML5の用語

マークアップの理解に必要な用語

3.2 Content-Type

MIMEタイプの重要性

サーバー側の適切な設定が必要

3.3 HTMLとXHTML

XMLシリアライゼーションで起こる問題

3.4 文書型宣言

文書型宣言の方法

文書型宣言の目的

3.5 文字エンコーディング

文字エンコーディングの指定方法

XMLシリアライゼーションでの注意点

日本語以外の言語

3.6 マークアップの作法

これまでと同じマークアップ方法

規則(1)終了タグの省略

規則(2)空要素

規則(3)要素のマークアップのルール

規則(4)コンテンツ属性のマークアップ

3.7 構文チェック

HTML5に対応したバリデータ

The W3C Markup Validation Service

Validator.nu

3.8 Internet Explorer対応

Internet Explorerの問題点

問題の回避方法

3.9 Firefox 2対応

Firefox 2の問題点

問題の回避方法

3.10 スタイルシート

新要素をブロックとしてレンダリングする方法

第4章 コンテンツ・モデル

4.1 カテゴリー

カテゴリーの意味

カテゴリー(1)メタデータ・コンテンツ

カテゴリー(2)フロー・コンテンツ

カテゴリー(3)セクショニング・コンテンツ

カテゴリー(4)ヘッディング・コンテンツ

カテゴリー(5)フレージング・コンテンツ

カテゴリー(6)エンベッディッド・コンテンツ

カテゴリー(7)インタラクティブ・コンテンツ

カテゴリー(8)セクショニング・ルート

4.2 コンテンツ・モデル

コンテンツ・モデルの意味

パターン(1)カテゴリーに制限

パターン(2)特定の要素に制限

パターン(3)子孫の要素に制限

パターン(4)空

パターン(5)トランスペアレント

第5章 セクションとアウトライン

5.1 セクション

セクションの意味

HTML4やXHTML1の欠点

HTML5で明示的に階層を示す方法

5.2 アウトライン・アルゴリズム

アウトライン・アルゴリズムの意味

アウトラインの意味

見出し要素だけでアウトラインを判別する方法

セクショニング要素を使ったアウトラインの判別方法

セクショニング・ルートの扱い

アウトラインを確認する方法

5.3 サイト・タイトルとページ・タイトル

HTML4やXHTML1での問題点

HTML5での解決法

見出し要素の数字も意識すべき理由

第6章 ルート要素

html要素(ルート要素)

html要素の利用法

第7章 メタデータ関連要素

7.1 head要素(ドキュメントのメタデータ)

head要素の利用法

7.2 title要素(ドキュメントのタイトル)

title要素の利用法

7.3 base要素(基準URL)

base要素の利用法

hrefコンテンツ属性

targetコンテンツ属性

7.4 link要素(ドキュメントの関連性)

link要素の利用法

relコンテンツ属性

hreflangコンテンツ属性

mediaコンテンツ属性

sizesコンテンツ属性

7.5 meta要素(ドキュメントのメタデータ)

meta要素の利用法

nameコンテンツ属性

http-equivコンテンツ属性(1)概要

http-equivコンテンツ属性(2)default-styleの利用例

http-equivコンテンツ属性(3)refreshの利用例

charsetコンテンツ属性

7.6 style要素(スタイル情報)

style要素の利用法

typeコンテンツ属性

mediaコンテンツ属性

scopedコンテンツ属性

第8章 スクリプティング関連要素

8.1 script要素(スクリプトの組み込み)

script要素の利用法

typeコンテンツ属性

srcコンテンツ属性

charsetコンテンツ属性

asyncコンテンツ属性

deferコンテンツ属性

スクリプトの説明文

8.2 noscript要素(スクリプトのフォールバック)

noscript要素の利用法

第9章 セクション関連要素

9.1 body要素(ドキュメントの本文)

body要素の利用法

9.2 section要素(セクション)【新要素】

section要素の利用法

間違った使い方

9.3 nav要素(ナビゲーション)【新要素】

nav要素の利用法

ナビゲーション・リンクのマークアップ

nav要素の数

ナビゲーションのグループ化

検索ボックス

サイトマップ

9.4 article要素(記事)【新要素】

article要素の利用法

記事の投稿日時をマークアップする

aritcle要素の中にarticle要素を入れる

ブログ以外でも使えるarticle要素

ページのメインコンテンツ部分は、すべてarticle?

ひとつの記事を複数のページに分割してもarticle?

9.5 aside要素(関連が薄いコンテンツ)【新要素】

aside要素の利用法

利用シーン(1)メイン・コンテンツに関係しないコンテンツ

利用シーン(2)メイン・コンテンツに関係するコンテンツ

利用シーン(3)ウェブ制作者の意図

9.6 h1~h6要素(見出し)

h1~h6要素の利用法

9.7 hgroup要素(見出しのグループ)【新要素】

hgroup要素の利用法

9.8 header要素(ヘッダー)【新要素】

header要素の利用法

ページ・ヘッダー

セクション・ヘッダー

9.9 footer要素(フッター)【新要素】

footer要素の利用法

ページ・フッター

セクション・フッター

footer要素の配置場所

肥大フッター

9.10 address要素(連絡先情報)【変更要素】

address要素の利用法

間違った利用法

第10章 グループ化要素

10.1 p要素(段落)

p要素の利用法

10.2 hr要素(テーマの変わり目)【変更要素】

hr要素の利用法

10.3 pre要素(フォーマット済みテキスト)

pre要素の利用法

10.4 blockquote要素(ブロック引用)

blockquote要素の利用法

引用元の表示

10.5 ol要素(順序付きリスト)

ol要素の利用法

startコンテンツ属性

reversedコンテンツ属性【新属性】

typeコンテンツ属性

10.6 ul要素(非順序リスト)

ul要素の利用法

10.7 li要素(リスト項目)

li要素の利用法

valueコンテンツ属性

10.8 dl要素(記述リスト)

dl要素の利用法

用語定義としての利用

10.9 dt要素(用語)

dt要素の利用法

10.10 dd要素(用語の説明)

dd要素の利用法

10.11 figure要素(キャプション付き図画)【新要素】

figure要素の利用法

10.12 figcaption要素(図画のキャプション)【新要素】

figcaption要素の利用法

10.13 div要素(一般的なコンテナ)

div要素の利用法

第11章 テキストの意味付け要素

11.1 a要素(ハイパーリンク)

a要素の利用法

targetコンテンツ属性

relコンテンツ属性

hreflangコンテンツ属性

typeコンテンツ属性

プレースホルダー

11.2 em要素(強調)

em要素の利用法

11.3 strong要素(重要性)【変更要素】

strong要素の利用法

11.4 small要素(細目)【変更要素】

small要素の利用法

11.5 s要素(不正確)【変更要素】

s要素の利用法

11.6 cite要素(引用元のタイトルや作品名)

cite要素の利用法

賛否両論のcite要素

11.7 q要素(引用文)

q要素の利用法

citeコンテンツ属性

11.8 dfn要素(定義語)

dfn要素の利用法

dfn要素で表される定義語の解釈

11.9 abbr要素(省略語)

abbr要素の利用法

廃止されたacronym要素

11.10 time要素(日付と時間)【新要素】

time要素の利用法

datetimeコンテンツ属性

pubdateコンテンツ属性

11.11 code要素(コード)

code要素の利用法

11.12 var要素(変数)

var要素の利用法

11.13 samp要素(出力)

samp要素の利用法

11.14 kbd要素(入力)

kbd要素の利用法

samp要素の中でkbd要素を使った場合

kbd要素の中でsamp要素を使った場合

kbd要素をkbd要素の中で使った場合

11.15 sub要素(下付き文字)

sub要素の利用法

11.16 sup要素(上付き文字)

sup要素の利用法

11.17 i要素(イタリック表記が通例のテキスト)【変更要素】

i要素の利用法

11.18 b要素(ボールド表記が通例のテキスト)【変更要素】

b要素の利用法

11.19 u要素(固有名詞)【変更要素】

u要素の利用法

11.20 mark要素(ハイライト)【新要素】

mark要素の利用法

説明のため特定のキーワードに注目させる

引用者が引用文の一部をハイライトする

検索結果における検索キーワードのマーキング

11.21 ruby要素(ルビ)【新要素】

ruby要素の利用法

複雑ルビ

11.22 rt要素(ルビのテキスト)【新要素】

rt要素の利用法

11.23 rp要素(ルビの括弧)【新要素】

rp要素の利用法

11.24 bdi要素(方向性書式の分離)【新要素】

bdi要素の利用法

11.25 bdo要素(方向性書式制御)

bdo要素の利用法

11.26 span要素(一般的なテキスト範囲)

span要素の利用法

11.27 br要素(改行)

br要素の利用法

11.28 wbr要素(折り返し可能位置)【新要素】

wbr要素の利用法

第12章 訂正を表す要素

12.1 ins要素(挿入テキスト)

ins要素の利用法

citeコンテンツ属性

datetimeコンテンツ属性

差し替え訂正

リストの訂正

12.2 del要素(削除テキスト)

del要素の利用法

第13章 組み込みコンテンツ要素

13.1 img要素(イメージ)

img要素の利用法

srcコンテンツ属性

usemapコンテンツ属性

ismapコンテンツ属性

widthコンテンツ属性とheightコンテンツ属性

廃止されたlongdescコンテンツ属性

srcコンテンツ属性とaltコンテンツ属性

altコンテンツ属性の規定

13.2 iframe要素(インライン・フレーム)

iframe要素の利用法

srcコンテンツ属性

srcdocコンテンツ属性【新属性】

nameコンテンツ属性

sandboxコンテンツ属性【新属性】

seamlessコンテンツ属性【新属性】

widthコンテンツ属性とheightコンテンツ属性

13.3 embed要素(プラグイン)

embed要素の利用法

13.4 object要素(一般的な外部コンテンツ)

object要素の利用法

dataコンテンツ属性とtypeコンテンツ属性

nameコンテンツ属性

usemapコンテンツ属性

formコンテンツ属性

widthコンテンツ属性とheightコンテンツ属性

13.5 param要素(プラグインの初期パラメータ)

param要素の利用法

13.6 video要素(ビデオ)【新要素】

video要素の利用法

video要素の簡単な使い方

自動再生

ポスター・フレーム

ループ再生

ビデオのサイズ

事前ダウンロード

ミュート

ビデオのグループ化(同期再生)

ビデオの種類

ブラウザーがサポートするビデオ形式

source要素で複数のビデオ形式に対応する

スクリプトによるビデオ操作

13.7 audio要素(オーディオ)【新要素】

audio要素の利用法

audio要素の簡単な使い方

ブラウザーがサポートするオーディオ形式

13.8 source要素(メディア・ソース)【新要素】

source要素の利用法

typeコンテンツ属性

mediaコンテンツ属性

13.9 track要素(ビデオ字幕)【新要素】

track要素の利用法

字幕フォーマット

字幕の種類

字幕の言語

字幕のラベル

デフォルトの字幕

13.10 canvas要素(動的グラフィック)【新要素】

canvas要素の利用法

canvasのサイズ

フォールバック

スクリプトによるcanvasの描画

13.11 map要素(イメージマップ)

map要素の利用法

13.12 area要素(イメージマップのハイパーリンク)

area要素の利用法

hrefコンテンツ属性

altコンテンツ属性

形状の定義

第14章 テーブル関連要素

14.1 table要素(テーブル)

table要素の利用法

レイアウト目的でtable要素を利用することは非推奨

レイアウト目的かどうかの区別

テーブルの説明情報

テーブルの概念

tbody要素は本来は必須

14.2 caption要素(テーブルのタイトルや説明文)

caption要素の利用法

14.3 colgroup要素(テーブルの列グループ)

colgroup要素の利用法

14.4 col要素(テーブルの列)

col要素の利用法

14.5 tbody要素(テーブルの行グループ)

tbody要素の利用法

14.6 thead要素(テーブルのヘッダー行グループ)

thead要素の利用法

14.7 tfoot要素(テーブルのフッター行グループ)

tfoot要素の利用法

14.8 tr要素(テーブルの行)

tr要素の利用法

14.9 td要素(テーブルのデータ・セル)

td要素の利用法

colspanコンテンツ属性とrowspanコンテンツ属性

headersコンテンツ属性

14.10 th要素(テーブルのヘッダー・セル)

th要素の利用法

scopeコンテンツ属性

rowキーワードとcolキーワード

rowgroupキーワード

colgroupキーワード

第15章 フォーム関連要素

15.1 form要素(サブミット・フォーム)

form要素の利用法

accept-charsetコンテンツ属性

actionコンテンツ属性

autocompleteコンテンツ属性

enctypeコンテンツ属性

methodコンテンツ属性

nameコンテンツ属性

novalidateコンテンツ属性

targetコンテンツ属性

15.2 fieldset要素(フォーム・コントロールのグループ)

fieldset要素の利用法

disabledコンテンツ属性

formコンテンツ属性【新属性】

nameコンテンツ属性

15.3 legend要素(タイトルや説明)

legend要素の利用法

15.4 label要素(フォーム・コントロールのキャプション)

label要素の利用法

forコンテンツ属性

formコンテンツ属性【新属性】

15.5 input要素(フォーム・コントロール)

input要素の利用法

typeコンテンツ属性

hidden

text

search【新タイプ】

tel【新タイプ】

url【新タイプ】

email【新タイプ】

password

datetime【新タイプ】

date【新タイプ】

month【新タイプ】

week【新タイプ】

time【新タイプ】

datetime-local【新タイプ】

number【新タイプ】

range【新タイプ】

color【新タイプ】

checkbox

radio

file

submit

image

reset

button

共通のコンテンツ属性

autocompleteコンテンツ属性【新属性】

listコンテンツ属性【新属性】

readonlyコンテンツ属性

sizeコンテンツ属性

requiredコンテンツ属性【新属性】

multipleコンテンツ属性

maxlengthコンテンツ属性

patternコンテンツ属性【新属性】

minコンテンツ属性とmaxコンテンツ属性

stepコンテンツ属性【新属性】

placeholderコンテンツ属性【新属性】

autofocusコンテンツ属性【新属性】

disabledコンテンツ属性

formコンテンツ属性【新属性】

nameコンテンツ属性

valueコンテンツ属性

dirnameコンテンツ属性【新属性】

15.6 button要素(ボタン)

button要素の利用法

15.7 select要素(選択肢フォーム・コントロール)

select要素の利用法

sizeコンテンツ属性

multipleコンテンツ属性

15.8 datalist要素(入力候補選択肢)【新要素】

datalist要素の利用法

15.9 optgroup要素(選択肢のグループ)

optgroup要素の利用法

15.10 option要素(選択肢)

option要素の利用法

valueコンテンツ属性

labelコンテンツ属性

selectedコンテンツ属性

disabledコンテンツ属性

15.11 textarea要素(テキスト入力エリア)

textarea要素の利用法

colsコンテンツ属性とrowsコンテンツ属性

maxlengthコンテンツ属性

placeholderコンテンツ属性【新属性】

readonlyコンテンツ属性

requiredコンテンツ属性【新属性】

wrapコンテンツ属性

15.12 keygen要素(鍵ペア生成)【新要素】

keygen要素の利用法

15.13 output要素(フォームの計算結果)【新要素】

output要素の利用法

15.14 progress要素(進捗)【新要素】

progress要素の利用法

15.15 meter要素(ゲージ)【新要素】

meter要素の利用法

第16章 インタラクティブ要素

16.1 details要素(オンデマンドの詳細情報)【新要素】

details要素の利用法

openコンテンツ属性

16.2 summary要素(オンデマンドの詳細情報の要約)【新要素】

summary要素の利用法

16.3 command要素(コマンド)【新要素】

command要素の利用法

typeコンテンツ属性

labelコンテンツ属性

iconコンテンツ属性

disabledコンテンツ属性

checkedコンテンツ属性

radiogroupコンテンツ属性

16.4 menu要素(コマンドのリスト)【変更要素】

menu要素の利用法

ツールバー

コンテキスト・メニュー

コマンドのリスト・メニュー

第17章 グローバル属性

17.1 グローバル属性とは

HTML5のグローバル属性

その他のグローバル属性

17.2 accesskeyコンテンツ属性(アクセスキー)

accesskeyコンテンツ属性の利用法

複数のキーを割り当てる

17.3 classコンテンツ属性(クラス)

classコンテンツ属性の利用法

17.4 contenteditableコンテンツ属性(編集有効化)【新属性】

contenteditableコンテンツ属性の利用法

Internet Explorerのリバースエンジニアリングによって策定されたcontenteditable

17.5 contextmenuコンテンツ属性(コンテキスト・メニュー)【新属性】

contextmenuコンテンツ属性の利用法

17.6 dirコンテンツ属性(テキストの書式方向)

dirコンテンツ属性の利用法

17.7 draggableコンテンツ属性(ドラッグ有効化)【新属性】

draggableコンテンツ属性の利用法

17.8 dropzoneコンテンツ属性(ドロップ有効化)【新属性】

dropzoneコンテンツ属性の利用法

17.9 hiddenコンテンツ属性(無関係・無意味を表す)【新属性】

hiddenコンテンツ属性の利用法

17.10 idコンテンツ属性(要素の識別子)

idコンテンツ属性の利用法

17.11 langコンテンツ属性(言語)

langコンテンツ属性の利用法

langコンテンツ属性がセットされていない要素は何語か

17.12 spellcheckコンテンツ属性(スペル・文法チェック)【新属性】

spellcheckコンテンツ属性の利用法

17.13 styleコンテンツ属性(スタイルシート)

styleコンテンツ属性の利用法

17.14 tabindexコンテンツ属性(タブ・インデックス)

tabindexコンテンツ属性の利用法

負の整数を指定した場合

0を指定した場合

17.15 titleコンテンツ属性(タイトル)

titleコンテンツ属性の利用法

17.16 data-*コンテンツ属性(独自データ)【新属性】

data-*コンテンツ属性の利用法

17.17 roleコンテンツ属性/aria-*コンテンツ属性(支援テクノロジー向け注記)【新属性】

roleコンテンツ属性とaria-*コンテンツ属性の役割

17.18 マイクロデータ【新属性】

マイクロデータの概要

マイクロデータの利用法

itemref属性

ボキャブラリー

第18章 リンク・リレーション

18.1 リンク・リレーションとは

リンク・リレーションの意味

リンク・リレーションの策定の理由

リンク・リレーションのキーワードと意味

リンクの種類

リンク・リレーションの拡張

18.2 alternate

alternateの利用法

18.3 author【新キーワード】

authorの利用法

18.4 bookmark

bookmarkの利用法

18.5 external【新キーワード】

externalの利用法

18.6 help

helpの利用法

18.7 icon【新キーワード】

iconの利用法

18.8 license【新キーワード】

licenseの利用法

18.9 next

nextの利用法

18.10 nofollow【新キーワード】

nofollowの利用法

18.11 noreferrer【新キーワード】

noreferrerの利用法

18.12 pingback【新キーワード】

pingbackの利用法

18.13 prefetch【新キーワード】

prefetchの利用法

18.14 prev

prevの利用法

18.15 search【新キーワード】

searchの利用法

18.16 stylesheet

stylesheetの利用法

代替スタイルシート

18.17 sidebar【新キーワード】

sidebarの利用法

18.18 tag【新キーワード】

tagの利用法

PR

秀和システム