HTML5 スタンダード・デザインガイド

Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド

HTML5の各要素の定義や機能についてまとめ、サンプルを通してどのように活用できるかを習得できるように構成した一冊です。主要ブラウザに加えて、スマートフォンやタブレット(iOS&Android)の対応状況も掲載。

出版日 2013年2月
ISBN 4839945322
ISBN-13 978-4839945329
出版社 マイナビ
ページ数 320ページ
判型 B5変型

はじめに

長かったHTML5の策定作業も、いよいよゴールが見えてきました。

HTML5は従来のHTML/XHTMLに置き換わる、新しいHTMLとして開発が続けられてきました。しかし、拡張によって進化してきたこれまでのHTML/XHTMLとは異なり、セマンティクスという新たな概念を取り込みつつ再構築されているため、従来と同様に扱おうとすると戸惑うことが少なくありません。

HTML5はそのポジションが大きく変わってしまったため、従来の視点からHTML5を眺めてしまうと、見通しが非常に悪いのです。しかし、これまでのHTML/XHTMLの知識をちょっと脇に置いて、HTML5の視点に立ってみると、この新しいHTMLが長い年月をかけて緻密に作り上げられていることが見えてきます。

そして、この緻密さの基礎となっているのが「セマンティクス」です。
このセマンティクスという考え方は、新しく追加されたセクショニングやmicrodataなどの機能に限らず、すべての要素に込められており、これまでのビジュアルによるコンテンツデザインとは異なる、セマンティクスによるコンテンツデザインを実現します。
そして、このセマンティクスによるコンテンツデザインは、Webの新たな可能性を生み出す、HTML5の最も重要なテーマだといえるでしょう。

そこで本書では、HTML5の視点から、HTML5を理解することを目標に各要素に関する解説を行っています。また、セマンティクスによるコンテンツデザインを行う上で必要となる情報も、可能な限り盛り込みました。

HTML5の勧告候補もリリースされ、HTML5も一区切りがつきました。この機会にHTML5の視点に立ったウェブデザインをはじめてみてはいかがでしょうか。

掲載した要素

本書ではW3CのHTML5に採用された要素を項目として取り上げています。また、HTML5.1やHTML Living Standardで採用された要素や属性についても紹介していますので参考にしてください。

対応ブラウザ

本書では、要素ごとにiOS、Android、Firefox、Safari、Chrome、Opera、Internet Explorerにおける対応状況を示しています。また、必要に応じて古いバージョンの対応状況についても掲載しています。

もくじ

Chapter1 HTML5とインフォメーションデザイン

  これまでのHTML
  HTML5の登場とセマンティクス
  構造化データの活用
  セマンティック・マークアップの実践
  HTML5のコンテンツ・モデル

Chapter2 Webページの基本

  DOCTYPE 宣言
  ルート要素 html
  メタデータの設定 head
  コンテンツ body
  スタイルシート style
  スクリプト script / noscript

Chapter3 セクション

  セクションとアウトライン
  独立したコンテンツ article
  セクション section
  ナビゲーション nav
  補足・関連情報 aside
  見出し h1 / h2 / h3 / h4 / h5 / h6
  見出しのグループ化 hgroup
  ヘッダーとフッター header / footer
  汎用要素 div / span

Chapter4 メタデータ

  ページタイトル title
  リンクに関する設定 base
  関連URL link
  メタデータ meta
  コンテンツの内容をより詳細に明示する
  microdata(マイクロデータ)
  RDFa
  microformats(マイクロフォーマット)

Chapter5 外部コンテンツ

  画像 img
  インラインフレーム iframe
  外部コンテンツ object / param
  外部コンテンツの組み込みポイント embed
  ビデオ/ オーディオ video / audio / source
  テキストトラック track
  イメージマップ map / area
  Canvas canvas
  SVG svg
  MathML math

Chapter6 段落書式

  段落 p
  段落レベルの区切り hr
  連絡先・問い合わせ先 address
  引用 blockquote / q
  整形済みテキスト pre
  リスト ol / ul / li
  関連リスト dl / dt / dd
  図版とキャプション figure / figcaption

Chapter7 文字書式

  リンク a
  略語 abbr
  定義 dfn
  作品のタイトル cite
  日時 time
  コンピュータ関連 code / var / samp / kbd
  上付き・下付き sup / sub
  但し書き・注意 small
  重要 strong
  強調・強勢 em
  変更・更新した情報 s
  語句の区別 i / b / u
  ハイライト mark
  ルビ(ふりがな) ruby / rt / rp
  双方向アルゴリズムの変更 bdo
  双方向アルゴリズムの隔離 bdi
  追加・削除 ins / del
  改行 br
  改行を認める箇所 wbr

Chapter8 テーブル

  テーブル table / tr / th / td
  テーブルのキャプション caption
  列のグループ colgroup / col
  行のグループ thead / tbody / tfoot

Chapter9 フォーム

  フォーム form
  ラベル label
  フォームコントロールのグループ fieldset / legend
  データの入力・送信 input
  ボタン button
  選択肢 select / option / optgroup
  入力候補 datalist
  複数行のテキスト textarea
  暗号鍵 keygen
  計算結果 output
  進捗状況 progress
  メーター meter

Chapter10 インタラクティブ

  付加的な情報 details / summary
  コマンドリスト menu / command
  ダイアログボックス dialog

APPENDIX

  HTML5の構文規則
  HTML5の文法チェック
  未対応ブラウザへの対応
  グローバル属性
  要素&ブラウザ対応一覧
  逆引き索引
  索引