Contenu connexe Similaire à HTML5とCSS3でWebが変わる!でも導入は簡単! Similaire à HTML5とCSS3でWebが変わる!でも導入は簡単! (20) HTML5とCSS3でWebが変わる!でも導入は簡単!2. 自己紹介
HTML5+CSS3 制作現場の実践アプローチ大公開!
蒲生トシヒロ(Dakiny)
有限会社ITプロフェッショナル代表取締役
Webプロデューサー、プランナー
広告代理店のディレクター兼プランナー出身。
1995年マルチメディア事業部を立ち上げインタ
ーネットの世界に入る。1999年に独立、2001年
有限会社ITプロフェッショナルを設立し今日に
至る。デザインや技術を大切にし自分でも手を
動かして確認するタイプ。CMS、HTML、ソーシ
ャルメディアが守備範囲。コラボ大好き:D
趣味はMovable Typeの布教活動。 Presented By
Toshihiro Gamo
3. 関わった書籍
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 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
4. ブログ書いてます
HTML5+CSS3 制作現場の実践アプローチ大公開!
•世界中の1%の人々へ
http://www.dakiny.com
•Twitter
http://twitter.com/Dakiny
•Facebookページ
http://www.facebook.com/
Hippos.JP
Presented By
Toshihiro Gamo
5. HTML5のメリット!
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 表現力が高くなる
• 記述の自由度が高い
• DOCUTYPEやHEAD内要素の
記述がシンプルに
• 将来性
• 話題性
• SEOが有利と言われる
※但し、根拠なし!
Presented By
Toshihiro Gamo
6. CSS3のメリット!
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 表現力が高くなる
• 工数が減る
• ファイルサイズが軽くなる
• 話題性
• 将来性
Presented By
Toshihiro Gamo
7. HTML5とは?
HTML5+CSS3 制作現場の実践アプローチ大公開!
• HTML4の発展系
• HTMLの次期バージョン
• DOCUTYPEとHEAD内要素の
記述と新要素を除けば
HTML4や
XHTML1.0と
ほとんど記述は同じ
• 下位互換
Presented By
Toshihiro Gamo
8. HTML5でWebサイトを作ろう
HTML5+CSS3 制作現場の実践アプローチ大公開!
•HTML5で構築された企業サイトが増えてきた
Presented By
Toshihiro Gamo
9. HTML5は簡単!
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 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
10. 見通しをよくする要素
HTML5+CSS3 制作現場の実践アプローチ大公開!
• わからないうちは、
Header
Footter
Secitonのみを
使いましょう
• その他はHTML5.JP等で
正しい使い方を勉強してから
利用してください
http://www.html5.jp/
Presented By
Toshihiro Gamo
11. CSS3とは?
HTML5+CSS3 制作現場の実践アプローチ大公開!
• CSS2.1に新しいプロパティを
追加したもの
• CSS3を認識しない
ブラウザでは?
CSS3の部分だけが
無視される
Presented By
Toshihiro Gamo
12. 未対応ブラウザではこう見える
HTML5+CSS3 制作現場の実践アプローチ大公開!
• CSS3で追加された部分のみが
無視されます。
.box {
width: 400px;
height: 150px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Presented By
Toshihiro Gamo
13. オンマウスで大きさと角度の変わるイメージ
HTML5+CSS3 制作現場の実践アプローチ大公開!
• Transformsモジュールを
使ってオンマウスで
ボックスの大きさと
角度が変わる
イメージサンプルを
作ってみました。
• 詳細解説URL
http://www.dakiny.com/archives/web/css3_transitions/
Presented By
Toshihiro Gamo
14. 基本要素を作る
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 最初にポラロイド写真風の
ボックスを作ります。
• 画像を1点用意してください。
• 画像サイズは任意で
例は200×200ピクセル。
Presented By
Toshihiro Gamo
15. 基本要素を作る
HTML
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 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
16. 基本要素を作る
CSS
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 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
17. ボックスに回転を加える
HTML5+CSS3 制作現場の実践アプローチ大公開!
• ボックスを右に10度
回転させた表示を
にしてみます。
• 回転表示を行う場合は
transform: rotateを
拡大表示を行う場合は
transform: scaleを
使います。
Presented By
Toshihiro Gamo
18. ボックスに回転を加える
CSS
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 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
19. アニメーションを加える
HTML5+CSS3 制作現場の実践アプローチ大公開!
• オンマウスの表示を
作ってみます。
• 回転表示を行う場合は
transform: rotateを
拡大表示を行う場合は
transform: scaleを
使います。
Presented By
Toshihiro Gamo
20. アニメーションを加える
CSS
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 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
21. CSS3は思うよりずっと簡単!
HTML5+CSS3 制作現場の実践アプローチ大公開!
• CSS3は手を動かせば
思うよりずっと簡単です。
• 是非、いろんなCSS3に
チャレンジして
自分のものにして
お金に替えてください。
Presented By
Toshihiro Gamo
22. HTML5とCSS3が開くWebの未来
HTML5+CSS3 制作現場の実践アプローチ大公開!
1. デザイナーとエンジニアの距離が近くなる
2. 工程の短縮
3. コンピュータのUIがHTML+CSS+JavaScriptに
4. ハイレベルにおけるフロントエンドの需要の拡大
5. 努力した人が成功する世界になる
Presented By
Toshihiro Gamo
23. 「Facebookページプロフェッショナルガイド」
7月11日発売Amazonにて予約中!
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 斉藤徹、竹村詠美、大元健志、Giax、メンバーズ等
国内第一人者が参加
ビジネス、テクノロジー両面から見た
Facebookの解説書
• 1章はマーケッターたちによるコラム
• 2章はFacebookの開発者ドキュメントに基づいた
Facebookページの作り方
• 3章はソーシャルグラプラグイン+OGP
Fcebookアプリ
• 4章はトップWebデザイナーたちによる
Facebookページ事例紹介
• これ1冊でFacebookの実装は大丈夫
Presented By
Toshihiro Gamo
24. 僕とコラボしませんか!
HTML5+CSS3 制作現場の実践アプローチ大公開!
• 僕はコラボが大好きです。
まずはSNSでつながりませんか?
• Facebookは「蒲生トシヒロ」または
「Gamo」で検索すれば出てきます。
リアルにつきあいたい方は
メッセージを添えてリクエストください。
• Twitter IDは「Dakiny」です。
フォロー希望の方は@Dakinyで連絡ください。
• ご清聴ありがとうございました。
Presented By
Toshihiro Gamo