Books for Web CreativeシリーズHTML5マークアップ入門

[表紙]HTML5マークアップ入門

紙版発売
電子版発売

B5変形判/288ページ

定価2,838円(本体2,580円+税10%)

ISBN 978-4-7741-5022-2

ただいま弊社在庫はございません。

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

従来よりも大幅に範囲が広がり,機能が強化されたHTML5。本書はそのうちのコアである「文書のマークアップ」に特化した入門書です。

HTML5では,より柔軟・正確に文書の構造・意味付けを表現できるようになりました。そして,それに伴い,多くの新要素・属性が採用され,また従来の要素・属性にも多くの変更が加えられました。

本書では,第1部でまずこうした要素・属性を解説した上で,第2部では一般的な企業Webサイトで使われるモジュール(パーツ)を例にとり,具体的なマークアップ法を紹介します。

こんな方におすすめ

  • Webデザイナー
  • HTMLコーダー
  • マークアップエンジニア
  • Webディレクター

目次

Part1 HTML5入門

Chapter1 HTML5へようこそ

1.1 マークアップってなんだろう

1.2 HTML5はなぜ生まれたか?

  • HTMLのなりたち
  • テーブルレイアウト
  • CSSレイアウト
  • HTML5策定の背景

1.3 HTML5でできるようになること

  • HTML
  • JavaScript

1.4 利用にあたっての懸念

  • HTML5の策定状況
  • ブラウザの実装状況
  • アクセシビリティ

Chapter2 HTML5のポイント1 ~文書構造~

2.1 要素の読み方

  • 要素? タグ?
  • 要素を構成する5つの情報

2.2 構文

  • DOCTYPE宣言
  • 要素名の大文字/小文字
  • 終了タグのない要素の扱い
  • 属性の記述
  • 開始/終了タグの省略

2.3 土台となるHTML

  • DOCTYPE宣言
  • html要素
  • meta要素
  • link要素
  • script要素
  • 土台となるHTML

2.4 セクション

  • HTML4による文書構造作成の問題点
  • HTML4とHTML5の階層構造の比較
  • HTML5でのアウトラインの作られ方
  • 自己完結した内容を示すarticle要素
  • ナビゲーションを示すnav要素
  • ドキュメントやアプリケーションを区分けするsection要素
  • 記事本体から外れている内容を示すaside要素
  • 勘違いしやすいheader要素とfooter要素

2.5 見出し

  • 見出し要素のランクによる階層構造の問題点
  • 見出し要素による構造から,セクショニング・コンテンツによる構造へ
  • アウトラインから見出し要素を隠すことができるhgroup要素

2.6 テキスト

  • 包容力のあるa要素
  • 重要性はstrong要素,強調はem要素
  • 細かく使い分けるb要素,i要素,mark要素
  • 細目に使うsmall要素
  • テキストの意味付けをする要素の一覧表

2.7 使えなくなる要素/属性

  • 使えなくなる要素
  • 使えなくなる属性

Chapter3 HTML5のポイント2 ~Webアプリ,埋め込みコンテンツ,フォーム~

3.1 Webアプリケーション

  • ツールバーを作るmenu要素,command要素
  • 追加情報を表示するdetails要素,summary要素
  • contextmenu属性
  • draggable属性
  • dropzone属性

3.2 埋め込みコンテンツ

  • 動画や音楽を再生するaudio要素,video要素
  • スクリプトを使って図を表示するcanvas要素
  • hidden属性

3.3 フォーム関連

  • 新しいユーザーインターフェイスが追加されたinput要素
  • フォーム関連の要素に追加された属性
  • テキストボックスの入力補助をするdatalist要素
  • ある範囲内の測定値を示すmeter要素
  • 計算結果を示すoutput要素
  • タスクの進行度を示すprogress要素

Part2 HTML5実践

Chapter4  Webサイト共通モジュールのマークアップ

4.1 ヘッダ

  • ヘッダの適切なマークアップ
  • ロゴとタグラインを入れる
  • お問い合わせ,サイトマップ,サイト内検索を入れる
  • サイト内検索に入力例を表示

4.2 フッタ

  • フッタ枠の適切なマークアップ
  • 「個人情報保護方針」「このサイトについて」ページへのリンクを入れる
  • 問い合わせ用メールアドレスへのリンクを表示
  • コピーライト表記を入れる

4.3 ナビゲーション

  • グローバルナビゲーションの作成
  • パンくずナビゲーションの作成
  • ページ内リンクの作成
  • カテゴリー内移動ナビゲーションの作成
  • サブコンテンツの作成

4.4 メインコンテンツ

  • セクショニングを意識したマークアップ

4.5 コンテンツエリア

  • コンテンツエリアのマークアップ

4.6 共通モジュール一覧

Chapter5 個別ページのモジュールのマークアップ

5.1 企業情報

  • セクショニング・コンテンツの適切なマークアップ
  • 読み方の難しい名前にルビをふる

5.2 実績トップ

  • 実績を絞込み検索するための入力フォームの作成
  • 検索結果として,サムネイル,案件名,カテゴリー,リリース年月を表示する
  • 検索結果が多いときのためにページネーションを表示する

5.3 実績詳細

  • コンテンツのセクションを適切にマークアップする
  • コンテンツのヘッダ,フッタを適切にマークアップする
  • 画像とキャプションを関連付ける
  • 動画を埋め込む
  • 動画に字幕を挿入する

5.4 ニュースリリーストップ

  • コンテンツのセクションを適切にマークアップする
  • 記事の日付,タイトルを入れる
  • 各記事の全体をリンク範囲にする
  • ページネーション(「古い記事へ」「1」「2」「3」「新しい記事へ」など)を入れる
  • サブコンテンツにカテゴリー,月別アーカイブ,フィードのリンクを入れる

5.5 ニュースリリース詳細

  • 記事本体とコメント/トラックバックのセクションを適切にマークアップする
  • タイトルとサブタイトルを適切にマークアップする
  • コメントをマークアップする
  • コメント入力欄で必須入力とメールアドレス/URLの入力をマークアップする
  • トラックバックをマークアップする

5.6 お問い合わせ

  • コンテンツのセクションを適切にマークアップする
  • 電話番号,FAX番号を適切にマークアップする
  • 「メールアドレス」「年齢」「電話番号」の入力フォームを適切にマークアップする
  • 入力フォームの「名前」「なまえ」「メールアドレス」「問い合わせ内容」は必須入力項目にする
  • 入力フォームの注意書きを適切にマークアップする
  • 「年齢」は入力の自動補完をしないようにする
  • 「入力内容の確認」ボタンと「入力内容の保存」ボタンのクリック時は,それぞれ別のアクション先を指定する
  • 「入力内容の保存」ボタンのクリック時は入力値のチェックをしないようにする
  • ユーザーが入力フォームの最初の入力項目をすぐに記入できるようにする

Appendix

  • 付録1 HTML4からHTML5への変更点
  • 付録2 HTML5に記載されている一覧表
  • 付録3 各ブラウザのHTML5実装度一覧表
  • 付録4 HTML5参考リンク集

著者プロフィール

森史憲(もりふみのり)

1976年鹿児島市生まれ。

大学は文学部を卒業。システムエンジニアの会社に勤務後,2002年から制作会社やデザイン会社でコーダー,マークアップエンジニアとして多くのWebサイトを制作。

2010年10月から鹿児島市でフリーランスのHTMLコーダー。

主な業務は小規模,中規模のWebサイトコーディング,「森さんのコーディングの会」講師など。

丸めがねのぼうず頭でカレーと地ビールをこよなく愛する九州男児。