MdNCORPORATION

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

秋葉秀樹、安住 光、大藤 幹、多田吉臣、筒井志信、鍋坂理恵、ハヤシユタカ、比留間和也、吉岡 梅 共著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2012-10-12
仕様 B5変型判/216pP
ISBN 978-4-8443-6291-3
シンプルで単純明快なHTMLタグでコーディングが容易になる一方、ボックス処理やグラデーションなどのスタイル処理能力が高まり、ウェブのデザイン性を向上できるほか、アニメーションやオーディオ、動画などの動的表現にも対応するようになる「HTML5」と「CSS3」。現在、2014年の正式勧告に向けてHTMLの5回目の策定が行われており、HTML5という名称で呼ばれています。またCSSも3回目の策定が進んでおり、CSS3と呼ばれて、現在カラーモジュールなど一部の内容がすでに勧告されています。Google Chrome、Safari、Firefox、Opera、Internet Explolerなど主要なPC用ウェブブラウザの最新版やスマートフォン用ブラウザは、HTML5/CSS3に対応がなされており、すでに最新の表現をウェブ上で体験できるようになっています。本書は、今後ウェブ制作の主流となるHTML5とCSS3の全般的な知識について、わかりやすく丁寧に解説しました。また巻末にはこれらを駆使した表現テクニックを多数紹介。HTML5とCSS3の全体像や表現技法を一気に身につけたい方に最適な一冊です。


■ページ見本










目次

はじめに
目次

■Chapter1 マークアップ言語としてのHTML5
 1-01 HTML5とは
 1-02 セクショニング要素
 1-03 文書構造を表す要素
 1-04 テキストに関する新要素
 1-05 組み込み要素
 1-06 フォームに関する新要素
 1-07 インタラクティブ要素
 1-08 HTML5のグローバル属性
 1-09 HTML5時代の「リセット」

■Chapter2 CSS3時代のWebデザイン
 2-01 CSS3時代のWebデザインとは
 2-02 セレクタ
 2-03 テキストスタイルに関する新プロパティ
 2-04 CSS3時代のボックスモデル
 2-05 CSS3時代の色指定
 2-06 CSS3時代のボックス装飾
 2-07 CSS3時代の背景設定
 2-08 グラデーション
 2-09 トランスフォーム
 2-10 フレキシブルボックスレイアウト
 2-11 グリッドレイアウト
 2-12 マルチカラムレイアウト
 2-13 Webフォント
 2-14 CSS3時代のブラウザ対応策
 Column CSS3ジェネレータをうまく活用する

■Chapter 3 CSSアニメーションを極める
 3-01 CSSアニメーションの特徴と利用ポイント
 3-02 CSSアニメーションの基本
 3-03 transition
 3-04 animation
 3-05 組み合わせで標準プリセットにない動きを表現する
 3-06 jQueryを用いたtransitionコンボ
 Column アニメーション作成ツールを利用する

■Chapter 4 HTML5&CSS3のテクニック
 4-01 画像を使わずにCSS3で作るボタン
 4-02 アニメーションするナビゲーション
 4-03 transformを使った雑誌風のレイアウト
 4-04 画像を使わないパンくずリスト/タブ
 4-05 見映えのよいフォームを手軽に作る
 4-06 CSSによる立体表現の基礎
 4-07 CSSとHTMLだけで作る3D回転キューブ
 4-08 スマートフォンでも見やすいページにする

■Chapter 5 Webアプリの機能を取り入れる
 5-01 Webサイトにネイティブアプリ並みの機能と利便性を持たせる
 5-02 ブラウザで写真を撮影してサーバへ送る
 5-03 カメラのライブ映像をコマ撮りにしてブラウザに残す
 5-04 バイブレーションを鳴らしてフォーム入力ミスなどを知らせる
 5-05 位置情報を取得し、GooglMapsに現在位置を表示する
 5-06 電池残量を取得して電池量をCSSでグラフィカル表示
 5-07 画像をドラッグ&ドロップしてサーバにアップロード

■Chapter 6 Flashライクなデザイン
 6-01 Flashライクなデザイン
 6-02 Flashからのコンバート
 6-03 EdgAnimateでのアニメーション作成
 6-04 CreateJSでCanvasアニメーションを作成

■Chapter 7 Webデザインの実践
 7-01 CSS3の装飾とアニメーションのみで実装するギャラリーサイト
 7-02 CSS3で実装する動きのあるボタンとインターフェイス
 7-03 Canvasを使って作るインタラクションのあるグラフ
 7-04 EdgAnimateで作成するFlashライクなサイト

さくいん
執筆者一覧

ダウンロードデータ

すべての人に知っておいてほしい HTML5 & CSS3の基本原則
サンプルデータダウンロード


このたびは、「すべての人に知っておいてほしいHTML5 & CSS3の基本原則」をご購入いただきまして、誠にありがとうございます。
以下に本書の解説で使用したサンプルデータを用意しましたのでご利用ください。


mdn_html5gnsk_samples.zip(6.8MB)


[収録内容]

Chapter 2
 2-03 テキストスタイルに関する新プロパティ
 2-06 CSS3 時代のボックス装飾
 2-07 CSS3 時代の背景設定

Chapter 3
 3-04 animation
 3-05 組み合わせで標準プリセットにない動きを表現する
 3-06 jQueryを用いたtransitionコンボ

Chapter 4
 4-01 画像を使わずにCSS3で作るボタン
 4-02 アニメーションするナビゲーション
 4-03 transformを使った雑誌風のレイアウト
 4-04 画像を使わないパンくずリスト/タブ
 4-05 見映えのよいフォームを手軽に作る
 4-06 CSSによる立体表現の基礎
 4-07 CSSとHTMLだけで作る3D 回転キューブ
 4-08 スマートフォンでも見やすいページにする

Chapter 5
 5-02 ブラウザで写真を撮影してサーバへ送る
 5-03 カメラのライブ映像をコマ撮りにしてブラウザに残す
 5-04 バイブレーションを鳴らしてフォーム入力ミスなどを知らせる
 5-05 位置情報を取得し、Google Mapsに現在位置を表示する
 5-06 電池残量を取得して電池量をCSSでグラフィカル表示
 5-07 画像をドラッグ&ドロップしてサーバにアップロード

Chapter 6
 6-02 Flashからのコンバート
 6-03 Edge Animateでのアニメーション作成
 6-04 CreateJSでCanvas アニメーションを作成

Chapter 7
 7-01 CSS3の装飾とアニメーションのみで実装するギャラリーサイト
 7-02 CSS3で実装する動きのあるボタンとインターフェイス
 7-03 Canvasを使って作るインタラクションのあるグラフ
 7-04 Edge Animateで作成するFlashライクなサイト


■ダウンロードにあたってのご注意■

ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

サンプルデータには「サンプルファイルについて.txt」が同梱されていますので、ご使用の前に必ずお読みください。

本サンプルは本文記載のコードの確認用としてご提供するものです。ダウンロードファイルを解凍すると、サンプルデータが各節ごとにHTML、CSS、JavaScriptなどの各種ファイルとして収録されています。ブラウザにドロップするなどしてご利用ください。5-02、5-07のサンプルについては、PHPコードを含むため、WebサーバやあるいはXAMPPなどの環境で所定の位置にファイルをアップしたうえで、PC、スマートフォンやタブレットのブラウザでアクセスしてください。Webサーバの設定、ファイルのアップロード場所などについては、サーバ管理者に問い合わせてください。

機種、OSのバージョン、ブラウザのバージョンに左右されるため、環境によってはうまく動作しない恐れがあります。あらかじめご了承ください。

※当サイトからダウンロードできるサンプルデータおよびリンクされたWebサイトを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただし「jQuery」等の一般に公開されているJavaScriptライブラリについては、各ライブラリのライセンス条件に従います。


※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトの著作権は、それぞれの制作者に帰属します。

※本書に掲載されているHTML、CSS、JavaScript等のコメントや改行位置等は、紙面掲載用として加工しているため、ダウンロードしたサンプルデータとは異なる場合があります。

お詫びと訂正

すべての人に知っておいてほしいHTML5 & CSS3の基本原則

本書のアップデート情報

このたびは『すべての人に知っておいてほしいHTML5 & CSS3の基本原則』をご購入いただきまして、誠にありがとうございました。

本書で紹介しているWebサービス/Webアプリなどは、状況に応じてアップデートやバージョンアップが行われることがあるため、書籍執筆時点の内容から変更している場合がございます。

そこで、こうしたアップデートやバージョンアップなどによって変更された項目について把握したものを、当ページで追加で逐次情報提供いたしますので、本書をお読みになる際にご参考にしてください。


■5章 5-02「ブラウザで撮影して写真をサーバへ送る」について(2012.10.12)

本書P144~145で、Android OS 4.0の標準ブラウザで、スマートフォンのカメラ機能をコントロールして写真データをサーバへ送る手法が紹介されております。こちらは、執筆時点ではAndroidでのみ行える技術でしたが、先ごろリリースされたアップル社のiOS6から、標準ブラウザのSafariでも本機能に対応しました。

なお、本記事の執筆を担当された秋葉秀樹氏のブログでもこれらのことについて補足しておりますので、あわせてご覧いただけますようお願い申し上げます。

秋葉秀樹氏ブログ
https://akibahideki.com/blog/htmlcss/ios6safarimediacapture-api.html

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊