最新のウェブ技術を理解したいすべての人に

仕事にすぐ効く! HTML5読本

出版社:アスキー・メディアワークス
定価:872円(本体830円)発売日:2011/01/25
形態:B6変(176ページ)ISBN:978-4-04-870220-1

電子書籍を立ち読みAmazonで購入

HTML5読本 第1章 HTML5で大きく変わるウェブの世界 第2章 HTMLの誕生からHTML5へ 第3章 コードでわかるHTML5の新機能 第4章 HTML5とともに使うCSS3の最新技術 HTML5ロゴ

本書の見どころ

はじめに

世界中に存在しているウェブサイト。その基盤技術であるHTMLが十数年ぶりに改定されようとしています。単に情報を載せる「ウェブページ」から、情報を編集・活用できる「ウェブ・アプリケーション」へ。時代の要請に応じて「HTML5」という技術仕様が産声をあげています。

このHTML5は、2010年11月の本書執筆時点でまだ草案段階にありますが、次の10年をになる重要な技術となる宿命を背負っています。過去10年の間に高まった、人々のウェブへの依存度がそのまぎれもない証拠です。

本書では、HTML5がどのようなインパクトを持ち、どのようにコンピューター業界の勢力図を変え、どのように使いはじめられるかを解説しています。仕様が完成前ということもあって触れていない部分もありますが、これから来る大きな波のエッセンスを感じ取っていただければ、最初の目論見としては達成です。

本書が多少なりとも皆様のお役に立てれば幸いです。

第1章 HTML5で大きく変わるウェブの世界

  • Easy Navigation

    HTML5がやってくる

    • 十数年ぶりに変わるウェブのルール
    • 一足先に始まった大手IT企業のHTML5対応
  • In The Box

    ウィンドウズを襲う新しい波

    • HTML5に出遅れたマイクロソフト
    • 反撃の切り札「IE9」登場
    • 「IE6」サポート終了へ
    • 企業の「IE6」ベース業務システムの今後
  • Cost Effective

    アップルの躍進

    • iPadの衝撃
    • フラッシュを捨て、HTML5を採ったアップル
    • 白熱するアップル対アドビの論争
    • 企業サイトはフラッシュの使用をやめるべきか?
  • Easy Scheduler

    グーグルの台頭

    • スマートフォン市場で拡大する「アンドロイド」
    • 「クローム」でパソコン市場に乗り込むグーグル
    • HTML5を制するのはグーグルか

第2章 HTMLの誕生からHTML5へ

  • Favourite Bookmarker

    HTML5までの道のり

    • HTMLの誕生
    • 画像表示により花開いたウェブブラウザー
    • 第一次ブラウザー戦争
    • 問題の多かったHTML3.2
    • HTMLの完成形
  • Fast Network

    ウェブの発明者が目指した世界

    • 世紀の発明をしたティム・バーナーズ=リー
    • ウェブページは増えたがデータが足りない
    • データを記述するためのXML
    • XHTMLの普及と挫折
  • Plugin Compatible

    HTML5の登場

    • ウェブアプリケーションへの期待
    • HTML5の中心人物、イアン・ヒクソンの登場
    • WHATWGとW3Cの違い
    • W3CもHTML5に着手
  • Daily Statistics

    HTML5はいつから使える?

    HTML5をいつから使い始めればいいかについては、ウェブ制作の現場で大きな 問題になっていますが、ひとつ明らかなのは、すでに使っている人たちがいるということです。イアン・ヒクソンはHTML5の完成時期について、2022年頃と予測しています。ただし、ここで言われている「完成」には、少し補足が必要です。

第3章 コードでわかるHTML5の新機能

  • User Management

    1. Doctype~はじめに「HTML5のウェブページを書く」と宣言する~

    Doctypeに何を書くかによって、ウェブブラウザーはそのバージョンで求められている仕様に沿うよう挙動を変えてきます。また同様に、ウェブページ制作者が守るべき記述上のルールも変わってきますので、そのバージョンに対する理解が必要不可欠です。

  • Synchronization

    2. セマンティクス~もっと意味のあるウェブへ~

    • aside タグ ~機械にも重要度がわかるようにする~
    • sectionタグ ~意味合いの異なるパートをさらに絞り込む~
    • articleタグとhgroup タグ ~本文とタイトルの位置を明らかにする~
    • navタグ ~人気のあったクラス名がタグに格上げ~
    • headerタグとfooterタグ ~もうページの上と下だけではない~
  • Excellent Themes

    3. リッチメディア~プラグイン依存からの脱却~

    • audioタグ ~ウェブページ上で音楽を再生する~
    • videoタグ ~フラッシュなしでも動画が見られる~
  • 24 x 7 Support

    4. ブロックレベル要素へのリンク~後方互換性が生んだうれしい副産物~

    HTML5では、ブロックレベル要素を囲うようにaタグを配置してもいいようになりました。従来の方法に比べると適切にマークアップされているので、SEOの面でも期待が持てます。

第4章 HTML5とともに使うCSS3の最新技術CSS2の限界を補うCSS3の表現力

  • User Management

    border-radius プロパティ~コードを書くだけで角丸を実現する~

    CSS2.1ではボーダー(線)の色や太さをコントロールすることはできましたが、基本的に直線しか表現できませんでした。CSS3のborder-radiusプロパティを使うことで、画像を制作しなくても簡単に角丸が実現でき、かつスタイルシートを直すだけで瞬時に角の丸み具合を調整できるようになります。

  • Synchronization

    box-shadow プロパティ~ボックスの影が自在に演出できる~

    ブロックレベル要素にドロップシャドウを加えるのは、従来のCSS2.1ではとても手間のかかる作業でした。背景画像を3種類程度必要とし、それらを敷くためのブロックレベル要素も同じ数だけ必要でした。それをCSS3では数行書くだけで実現してしまいます。

  • Excellent Themes

    text-shadow プロパティ~テキスト部分に影を加える~

    text-shadowプロパティは、非対応のウェブブラウザーのことは気にせず気軽に使うことができます。なぜかというと、text-shadowプロパティを使うより他に、文字に影を加える方法がないからです。

  • 24 x 7 Support

    background プロパティ~CSS3でようやくグラデーションに対応~

    画像を使わずにグラデーションを実現する方法については、backgroundプロパティを使います。backgroundプロパティ自体はCSS1の時代からあったのですが、画像を敷くかベタ塗りをするしかできませんでした。CSS3でようやくグラデーションに対応です。

著者紹介

  • 春日智博(かすがともひろ)1976年生まれ。アップル社の直営店内外で業務用アプリケーションのデモンストレーターを経験後、都内の制作会社でウェブサイト作りの実地を積む。ウェブデザインやコーディング以外にCMS構築やビデオ編集、ニュースサイトのウェブマスターなどもこなす。(著者ブログ
  • 植木 皓(うえきこう)1981年東京生まれ。早稲田大学第二文学部卒業後、大手ネットメディアにてニュース執筆に従事。株式会社ニューズフロント所属。同社は英語力の豊かなIT専門記者を育成し、独自の速報・解説の執筆や企業広報の支援を手がける。

ギャラリー