HTML5とCSS3でWebが変わる！でも導入は簡単！

HTML5とCSS3でWebが変わる！
でも導入は簡単！
蒲生トシヒロ
２００１年6月25日（土）　 HTML5+CSS3 制作現場の実践アプローチ大公開！

Presented By
Toshihiro Gamo

自己紹介

HTML5+CSS3 制作現場の実践アプローチ大公開！

蒲生トシヒロ（Dakiny）
有限会社ITプロフェッショナル代表取締役
Webプロデューサー、プランナー
広告代理店のディレクター兼プランナー出身。
1995年マルチメディア事業部を立ち上げインタ
ーネットの世界に入る。1999年に独立、2001年
有限会社ITプロフェッショナルを設立し今日に
至る。デザインや技術を大切にし自分でも手を
動かして確認するタイプ。CMS、HTML、ソーシ
ャルメディアが守備範囲。コラボ大好き:D
趣味はMovable Typeの布教活動。 Presented By
Toshihiro Gamo

関わった書籍


• Facebookページプロフェッショナルガイド
（2011年7月11日）
• Movable Type 5.1 プロの現場の仕事術
（2011年6月30日）
• CSS3デザインプロフェッショナルガイド
• Movable Type 5実践テクニック
• インターネット&Webの必須常識100
• Movable Type プロフェッショナル・スタイル
[MT4.1対応]
Presented By
Toshihiro Gamo

ブログ書いてます


•世界中の1%の人々へ
http://www.dakiny.com
•Twitter
http://twitter.com/Dakiny
•Facebookページ
http://www.facebook.com/
Hippos.JP

Presented By
Toshihiro Gamo

HTML5のメリット！


• 表現力が高くなる
• 記述の自由度が高い
• DOCUTYPEやHEAD内要素の
記述がシンプルに
• 将来性
• 話題性
• SEOが有利と言われる
※但し、根拠なし！

Presented By
Toshihiro Gamo

CSS3のメリット！


• 表現力が高くなる
• 工数が減る
• ファイルサイズが軽くなる
• 話題性
• 将来性

Presented By
Toshihiro Gamo

HTML5とは？


• HTML4の発展系
• HTMLの次期バージョン
• DOCUTYPEとHEAD内要素の
記述と新要素を除けば
HTML4や
XHTML1.0と
ほとんど記述は同じ
• 下位互換

Presented By
Toshihiro Gamo

HTML5でWebサイトを作ろう


•HTML5で構築された企業サイトが増えてきた

Presented By
Toshihiro Gamo

HTML5は簡単！


• HTML5の基本はたったこれだけ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5にチャレンジ！</title>
</head>
<body>
<h1>HTML5にチャレンジ！</h1>
　　<p>SEOも向上する？</p>
</body>
</html>

Presented By
Toshihiro Gamo

見通しをよくする要素


• わからないうちは、
Header
Footter
Secitonのみを
使いましょう
• その他はHTML5.JP等で
正しい使い方を勉強してから
利用してください
http://www.html5.jp/

Presented By
Toshihiro Gamo

CSS3とは？


• CSS2.1に新しいプロパティを
追加したもの
• CSS3を認識しない
ブラウザでは？
CSS3の部分だけが
無視される

Presented By
Toshihiro Gamo

未対応ブラウザではこう見える


• CSS3で追加された部分のみが
無視されます。

.box {
width: 400px;
height: 150px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

Presented By
Toshihiro Gamo

オンマウスで大きさと角度の変わるイメージ


• Transformsモジュールを
使ってオンマウスで
ボックスの大きさと
角度が変わる
イメージサンプルを
作ってみました。

• 詳細解説URL
http://www.dakiny.com/archives/web/css3_transitions/

Presented By
Toshihiro Gamo

基本要素を作る


• 最初にポラロイド写真風の
ボックスを作ります。

• 画像を１点用意してください。

• 画像サイズは任意で
例は200×200ピクセル。

Presented By
Toshihiro Gamo

HTML

• HTML

<div class="album">
<a href="http://www.dakiny.com/" class="polaroid"><img
src="img/dakiny-tr.png"
alt="Dakiny">Hello! This is Dakiny in Japan.</a>
</div>

Presented By
Toshihiro Gamo

CSS

• CSS

.polaroid {
width: 200px;
padding: 13px 13px 26px 13px;
border: 1px solid #BBBBBB;
background-color: white;
-webkit-box-shadow: 2px 2px 3px #AAAAAA;
-moz-box-shadow: 2px 2px 3px #AAAAAA;
box-shadow: 2px 2px 3px #AAAAAA;
}

Presented By
Toshihiro Gamo

ボックスに回転を加える


• ボックスを右に10度
回転させた表示を
にしてみます。

• 回転表示を行う場合は
transform: rotateを
拡大表示を行う場合は
transform: scaleを
使います。

Presented By
Toshihiro Gamo

ボックスに回転を加える
CSS

• CSSに下記のコードを追記します。

-webkit-transform: rotate(10deg) scale(1.0);
-moz-transform: rotate(10deg) scale(1.0);
-o-transform: rotate(10deg) scale(1.0);
transform: rotate(10deg) scale(1.0);

Presented By
Toshihiro Gamo

アニメーションを加える


• オンマウスの表示を
作ってみます。

• 回転表示を行う場合は
transform: rotateを
拡大表示を行う場合は
transform: scaleを
使います。

Presented By
Toshihiro Gamo

アニメーションを加える
CSS

• CSSに下記のコードを追記して完成です。
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px #999999;
-moz-box-shadow: 2px 2px 4px #999999;
box-shadow: 2px 2px 4px #999999;
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
transform: rotate(-10deg) scale(1.2);
} Presented By
Toshihiro Gamo

CSS3は思うよりずっと簡単！


• CSS3は手を動かせば
思うよりずっと簡単です。

• 是非、いろんなCSS3に
チャレンジして
自分のものにして
お金に替えてください。

Presented By
Toshihiro Gamo

HTML5とCSS3が開くWebの未来


1. デザイナーとエンジニアの距離が近くなる

2. 工程の短縮

3. コンピュータのUIがHTML+CSS+JavaScriptに

4. ハイレベルにおけるフロントエンドの需要の拡大

5. 努力した人が成功する世界になる

Presented By
Toshihiro Gamo

「Facebookページプロフェッショナルガイド」
7月11日発売Amazonにて予約中！

• 斉藤徹、竹村詠美、大元健志、Giax、メンバーズ等
国内第一人者が参加
ビジネス、テクノロジー両面から見た
Facebookの解説書
• 1章はマーケッターたちによるコラム
• 2章はFacebookの開発者ドキュメントに基づいた
Facebookページの作り方
• 3章はソーシャルグラプラグイン＋OGP
Fcebookアプリ
• 4章はトップWebデザイナーたちによる
Facebookページ事例紹介
• これ1冊でFacebookの実装は大丈夫
Presented By
Toshihiro Gamo

僕とコラボしませんか！


• 僕はコラボが大好きです。
まずはSNSでつながりませんか？
• Facebookは「蒲生トシヒロ」または
「Gamo」で検索すれば出てきます。
リアルにつきあいたい方は
メッセージを添えてリクエストください。
• Twitter IDは「Dakiny」です。
フォロー希望の方は@Dakinyで連絡ください。
• ご清聴ありがとうございました。

Presented By
Toshihiro Gamo

HTML5とCSS3でWebが変わる！でも導入は簡単！

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie HTML5とCSS3でWebが変わる！でも導入は簡単！

Ähnlich wie HTML5とCSS3でWebが変わる！でも導入は簡単！ (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (10)

HTML5とCSS3でWebが変わる！でも導入は簡単！