本書の見どころ
はじめに
世界中に存在しているウェブサイト。その基盤技術であるHTMLが十数年ぶりに改定されようとしています。単に情報を載せる「ウェブページ」から、情報を編集・活用できる「ウェブ・アプリケーション」へ。時代の要請に応じて「HTML5」という技術仕様が産声をあげています。
このHTML5は、2010年11月の本書執筆時点でまだ草案段階にありますが、次の10年をになる重要な技術となる宿命を背負っています。過去10年の間に高まった、人々のウェブへの依存度がそのまぎれもない証拠です。
本書では、HTML5がどのようなインパクトを持ち、どのようにコンピューター業界の勢力図を変え、どのように使いはじめられるかを解説しています。仕様が完成前ということもあって触れていない部分もありますが、これから来る大きな波のエッセンスを感じ取っていただければ、最初の目論見としては達成です。
本書が多少なりとも皆様のお役に立てれば幸いです。
第1章 HTML5で大きく変わるウェブの世界
-
HTML5がやってくる
- 十数年ぶりに変わるウェブのルール
- 一足先に始まった大手IT企業のHTML5対応
-
ウィンドウズを襲う新しい波
- HTML5に出遅れたマイクロソフト
- 反撃の切り札「IE9」登場
- 「IE6」サポート終了へ
- 企業の「IE6」ベース業務システムの今後
-
アップルの躍進
- iPadの衝撃
- フラッシュを捨て、HTML5を採ったアップル
- 白熱するアップル対アドビの論争
- 企業サイトはフラッシュの使用をやめるべきか?
-
グーグルの台頭
- スマートフォン市場で拡大する「アンドロイド」
- 「クローム」でパソコン市場に乗り込むグーグル
- HTML5を制するのはグーグルか
第2章 HTMLの誕生からHTML5へ
-
HTML5までの道のり
- HTMLの誕生
- 画像表示により花開いたウェブブラウザー
- 第一次ブラウザー戦争
- 問題の多かったHTML3.2
- HTMLの完成形
-
ウェブの発明者が目指した世界
- 世紀の発明をしたティム・バーナーズ=リー
- ウェブページは増えたがデータが足りない
- データを記述するためのXML
- XHTMLの普及と挫折
-
HTML5の登場
- ウェブアプリケーションへの期待
- HTML5の中心人物、イアン・ヒクソンの登場
- WHATWGとW3Cの違い
- W3CもHTML5に着手
-
HTML5はいつから使える？
HTML5をいつから使い始めればいいかについては、ウェブ制作の現場で大きな 問題になっていますが、ひとつ明らかなのは、すでに使っている人たちがいるということです。イアン・ヒクソンはHTML5の完成時期について、2022年頃と予測しています。ただし、ここで言われている「完成」には、少し補足が必要です。
第3章 コードでわかるHTML5の新機能
-
1. Doctype～はじめに「HTML5のウェブページを書く」と宣言する～
Doctypeに何を書くかによって、ウェブブラウザーはそのバージョンで求められている仕様に沿うよう挙動を変えてきます。また同様に、ウェブページ制作者が守るべき記述上のルールも変わってきますので、そのバージョンに対する理解が必要不可欠です。
-
2. セマンティクス～もっと意味のあるウェブへ～
- aside タグ ～機械にも重要度がわかるようにする～
- sectionタグ ～意味合いの異なるパートをさらに絞り込む～
- articleタグとhgroup タグ ～本文とタイトルの位置を明らかにする～
- navタグ ～人気のあったクラス名がタグに格上げ～
- headerタグとfooterタグ ～もうページの上と下だけではない～
-
3. リッチメディア～プラグイン依存からの脱却～
- audioタグ ～ウェブページ上で音楽を再生する～
- videoタグ ～フラッシュなしでも動画が見られる～
-
4. ブロックレベル要素へのリンク～後方互換性が生んだうれしい副産物～
HTML5では、ブロックレベル要素を囲うようにaタグを配置してもいいようになりました。従来の方法に比べると適切にマークアップされているので、SEOの面でも期待が持てます。
第4章 HTML5とともに使うCSS3の最新技術CSS2の限界を補うCSS3の表現力
-
border-radius プロパティ～コードを書くだけで角丸を実現する～
CSS2.1ではボーダー(線)の色や太さをコントロールすることはできましたが、基本的に直線しか表現できませんでした。CSS3のborder-radiusプロパティを使うことで、画像を制作しなくても簡単に角丸が実現でき、かつスタイルシートを直すだけで瞬時に角の丸み具合を調整できるようになります。
-
box-shadow プロパティ～ボックスの影が自在に演出できる～
ブロックレベル要素にドロップシャドウを加えるのは、従来のCSS2.1ではとても手間のかかる作業でした。背景画像を3種類程度必要とし、それらを敷くためのブロックレベル要素も同じ数だけ必要でした。それをCSS3では数行書くだけで実現してしまいます。
-
text-shadow プロパティ～テキスト部分に影を加える～
text-shadowプロパティは、非対応のウェブブラウザーのことは気にせず気軽に使うことができます。なぜかというと、text-shadowプロパティを使うより他に、文字に影を加える方法がないからです。
-
background プロパティ～CSS3でようやくグラデーションに対応～
画像を使わずにグラデーションを実現する方法については、backgroundプロパティを使います。backgroundプロパティ自体はCSS1の時代からあったのですが、画像を敷くかベタ塗りをするしかできませんでした。CSS3でようやくグラデーションに対応です。
著者紹介
- 春日智博（かすがともひろ）1976年生まれ。アップル社の直営店内外で業務用アプリケーションのデモンストレーターを経験後、都内の制作会社でウェブサイト作りの実地を積む。ウェブデザインやコーディング以外にCMS構築やビデオ編集、ニュースサイトのウェブマスターなどもこなす。（著者ブログ）
- 植木 皓（うえきこう）1981年東京生まれ。早稲田大学第二文学部卒業後、大手ネットメディアにてニュース執筆に従事。株式会社ニューズフロント所属。同社は英語力の豊かなIT専門記者を育成し、独自の速報・解説の執筆や企業広報の支援を手がける。