HTML5とCSS3の基本と、表現技法がまとめられた『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』執筆させていただきました。

エムディエヌコーポレーションさんから執筆させていただいた書籍が発売になりました。

『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』2012/10/12発売

HTML5とCSS3の基本やCSS3でのアニメーション、WEBアプリの機能、フラッシュライクなサイトなどこれから注目の技術の基本をサンプルと共に紹介されています。

この書籍だけで全部の技術が習得できるものではないですが、幅広く網羅されておりますのでまずこれでこれからのWEBの技術をひと通り理解してさらに突き詰めていくという形で最適な内容となっています。

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

amazonで「すべての人に知っておいてほしい HTML5 & CSS3 の基本原則」を見る

MdNで「すべての人に知っておいてほしい HTML5 & CSS3 の基本原則」を見る

ページ最後に出版社様から本書を5冊プレゼントいただきましたので5名様にプレゼントがあります。

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


基本とポイント、表現技法がすべて身につけられる。

シンプルで単純明快なHTMLタグでコーディングが容易になる一方、ボックス処理やグラデーションなどのスタイル処理能力が高まり、ウェブのデザイン性を向上できるほか、アニメーションやオーディオ、動画などの動的表現にも対応するようになる「HTML5」と「CSS3」。現在、2014年の正式勧告に向けてHTMLの5回目の策定が行われており、HTML5という名称で呼ばれています。またCSSも3回目の策定が進んでおり、CSS3と呼ばれて、現在カラーモジュールなど一部の内容がすでに勧告されています。Google Chrome、Safari、Firefox、Opera、Internet Explolerなど主要なPC用ウェブブラウザの最新版やスマートフォン用ブラウザは、HTML5/CSS3に対応がなされており、すでに最新の表現をウェブ上で体験できるようになっています。本書は、今後ウェブ制作の主流となるHTML5とCSS3の全般的な知識について、わかりやすく丁寧に解説しました。また巻末にはこれらを駆使した表現テクニックを多数紹介。HTML5とCSS3の全体像や表現技法を一気に身につけたい方に最適な一冊です。

担当させていただいた内容

今回、僕の方では「Chapter 7 Webデザインの実践」の「CSS3の装飾とアニメーションのみで実装するギャラリーサイト」を担当させていただきました。

今回作成したサンプルサイト

サンプルはこちらにアップしてあります。

http://www.html5-memo.com/sample/html5-css3BOOK/

画像を極力使わずにCSS3で装飾を行い、ロールオーバーのアニメーションにCSS3のアニメーションを使用したサンプルとなっております。

CSS3のアニメーションが適用しないIEではアニメーションはなくロールオーバーのようにすることによってコンテンツの閲覧ができないということを回避しています。

このサイトで使用した写真以外の画像

このサイトの装飾はCSSを使用して写真以外で使用した画像は次の3点のみとなっています。

サイトで使用している画像

CSS3を効率良く使用することによって容量の軽減、修正の容易さを実現しています。

ページイメージ

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

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

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

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

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

本書『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』を5名さまにプレゼント

出版社様のご好意で本書を5冊いただきました。
そこでいつもブログを見ていただいている方に抽選で5名様にプレゼントいたします。

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

見てみたいという方は下記の方法で応募できます。

Twitterで応募

twitterで @html5memoをフォローし、「 書籍プレゼント『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』が欲しい! http://www.html5-memo.com/other/html5css3-book/ #html5-book 」 とツイートすればOKです。

↓コピペ用

書籍プレゼント『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』が欲しい! http://www.html5-memo.com/other/html5css3-book/ #html5-book

あわせてFacebookページも更新中

http://www.facebook.com/html5memo

FaceBookページでは3つのブログの更新情報やWEB制作においての気になる記事を更新しています。こちらもよかったら「いいね」お願いします。

書籍応募の締め切り

10月24日までツイートされた中から抽選で5名様を選び、ツイッターのダイレクトメールにてご連絡しますので、当選通知が来た方は送付先の住所を教えて下さい。

※なお発送は日本国内に限らさせていただきます。

なお、@html5memoをフォローし忘れてダイレクトメールが届かなかったり、連絡後1週間経っても返信が無い場合は当選が無効になるので気をつけて下さいね。

すべての人に知っておいてほしい 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 の基本原則

amazonで「すべての人に知っておいてほしい HTML5 & CSS3 の基本原則」を見る

MdNで「すべての人に知っておいてほしい HTML5 & CSS3 の基本原則」を見る

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事