html5とcss3でwebが変わる！でも導入は簡単！

Presented ByPresented ByToshihiroToshihiro GamoGamo

HTML5HTML5ととCSS3CSS3ででWebWebが変わる！が変わる！でも導入は簡単！でも導入は簡単！

蒲生蒲生トシヒロトシヒロ

２００１２００１年年66月月2525日（土日（土）　）　 HTML5+CSS3 HTML5+CSS3 制作現場の実践アプローチ大公開！制作現場の実践アプローチ大公開！


自己紹介自己紹介

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

蒲生トシヒロ（蒲生トシヒロ（DakinyDakiny））

有限会社有限会社ITITプロフェッショナル代表取締役プロフェッショナル代表取締役WebWebプロデューサー、プランナープロデューサー、プランナー

広告代理店のディレクター兼プランナー出身。広告代理店のディレクター兼プランナー出身。19951995年マルチメディア事業部を立ち上げインタ年マルチメディア事業部を立ち上げインターネットの世界に入る。ーネットの世界に入る。19991999年に独立、年に独立、20012001年年有限会社有限会社ITITプロフェッショナルを設立し今日にプロフェッショナルを設立し今日に至る。デザインや技術を大切にし自分でも手を至る。デザインや技術を大切にし自分でも手を動かして確認するタイプ。動かして確認するタイプ。CMSCMS、、HTMLHTML、、ソーシソーシャルメディアが守備範囲。コラボ大好きャルメディアが守備範囲。コラボ大好き::DD

趣味は趣味はMovable TypeMovable Typeの布教活動。の布教活動。


関わった書籍関わった書籍


•• FacebookFacebookページプロフェッショナルガイドページプロフェッショナルガイド（（20112011年年77月月1111日）日）

•• Movable Type 5.1 Movable Type 5.1 プロの現場の仕事術プロの現場の仕事術（（20112011年年66月月3030日）日）

•• CSS3CSS3デザインデザインプロフェッショナルガイドプロフェッショナルガイド

•• Movable Type 5Movable Type 5実践テクニック実践テクニック

•• インターネットインターネット&&WebWebの必須常識の必須常識100100

•• Movable Type Movable Type プロフェッショナル・スタイルプロフェッショナル・スタイル[[MT4.1MT4.1対応対応]]


ブログ書いてますブログ書いてます


••世界中の世界中の1%1%の人々への人々へhttp://www.http://www.dakinydakiny.com.com

••TwitterTwitterhttp://twitter.com/http://twitter.com/DakinyDakiny

••FacebookFacebookページページhttp://www.http://www.facebookfacebook.com/.com/Hippos.JPHippos.JP


HTML5HTML5のメリット！のメリット！


•• 表現力が高くなる表現力が高くなる

•• 記述の自由度が高い記述の自由度が高い

•• DOCUTYPEDOCUTYPEややHEADHEAD内要素の内要素の記述がシンプルに記述がシンプルに

•• 将来性将来性

•• 話題性話題性

•• SEOSEOが有利と言われるが有利と言われる※但し、根拠なし！※但し、根拠なし！


CSS3CSS3のメリット！のメリット！


•• 表現力が高くなる表現力が高くなる

•• 工数が減る工数が減る

•• ファイルサイズが軽くなるファイルサイズが軽くなる

•• 話題性話題性

•• 将来性将来性


HTML5HTML5とは？とは？


•• HTML4HTML4の発展系の発展系

•• HTMLHTMLの次期バージョンの次期バージョン

•• DOCUTYPEDOCUTYPEととHEADHEAD内要素の内要素の記述と新要素を除けば記述と新要素を除けばHTML4HTML4ややXHTML1.0XHTML1.0ととほとんど記述は同じほとんど記述は同じ

•• 下位互換下位互換


HTML5HTML5ででWebWebサイトを作ろうサイトを作ろう


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


HTML5HTML5は簡単！は簡単！


•• HTML5HTML5の基本はたったこれだけ。の基本はたったこれだけ。

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>HTML5にチャレンジ！</title>

</head><body><h1>HTML5にチャレンジ！</h1>

　　<p>SEOも向上する？</p></body>

</html>


見通しをよくする要素見通しをよくする要素


•• わからないうちは、わからないうちは、HeaderHeaderFootterFootterSecitonSecitonのみをのみを使いましょう使いましょう

•• その他はその他はHTML5.JPHTML5.JP等で等で正しい使い方を勉強してから正しい使い方を勉強してから利用してください利用してくださいhttp://www.html5.http://www.html5.jpjp//


CSS3CSS3とは？とは？


•• CSS2.1CSS2.1に新しいプロパティをに新しいプロパティを追加したもの追加したもの

•• CSS3CSS3を認識しないを認識しないブラウザでは？ブラウザでは？CSS3CSS3の部分だけがの部分だけが無視される無視される


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


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

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


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


•• TransformsTransformsモジュールをモジュールを

使ってオンマウスで使ってオンマウスで

ボックスの大きさとボックスの大きさと

角度が変わる角度が変わる

イメージサンプルをイメージサンプルを

作ってみました。作ってみました。

•• 詳細解説詳細解説URLURL

http://www.http://www.dakinydakiny.com/archives/web/css3_transitions/.com/archives/web/css3_transitions/


基本要素を作る基本要素を作る


•• 初にポラロイド写真風の初にポラロイド写真風の

ボックスを作ります。ボックスを作ります。

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

•• 画像サイズは任意で画像サイズは任意で

例は例は200200××200200ピクセル。ピクセル。


基本要素を作る基本要素を作るHTMLHTML


•• HTMLHTML

<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>


基本要素を作る基本要素を作るCSSCSS


•• CSSCSS

.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;}


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


•• ボックスを右にボックスを右に1010度度

回転させた表示を回転させた表示を

にしてみます。にしてみます。

•• 回転表示を行う場合は回転表示を行う場合は

transform: rotatetransform: rotateをを

拡大表示を行う場合は拡大表示を行う場合は

transform: scaletransform: scaleをを

使います。使います。


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


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

-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);


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


•• オンマウスの表示をオンマウスの表示を

作ってみます。作ってみます。

•• 回転表示を行う場合は回転表示を行う場合は

transform: rotatetransform: rotateをを

拡大表示を行う場合は拡大表示を行う場合は

transform: scaletransform: scaleをを

使います。使います。


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


•• CSSCSSに下記のコードを追記して完成です。に下記のコードを追記して完成です。

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);}


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


•• CSS3CSS3は手を動かせばは手を動かせば

思うよりずっと簡単です。思うよりずっと簡単です。

•• 是非、いろんな是非、いろんなCSS3CSS3にに

チャレンジしてチャレンジして

自分のものにして自分のものにして

お金に替えてください。お金に替えてください。


HTML5HTML5ととCSS3CSS3が開くが開くWebWebの未来の未来


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

2.2. 工程の短縮工程の短縮

3.3. コンピュータのコンピュータのUIUIががHTML+CSS+JavaScriptHTML+CSS+JavaScriptにに

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

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


「「FacebookFacebookページプロフェッショナルガイド」ページプロフェッショナルガイド」77月月1111日発売日発売AmazonAmazonにて予約中！にて予約中！


•• 斉藤徹、竹村詠美、大元健志、斉藤徹、竹村詠美、大元健志、GiaxGiax、、メンバーズ等メンバーズ等国内第一人者が参加国内第一人者が参加ビジネス、テクノロジー両面から見たビジネス、テクノロジー両面から見たFacebookFacebookの解説書の解説書

•• 11章はマーケッターたちによるコラム章はマーケッターたちによるコラム

•• 22章は章はFacebookFacebookの開発者ドキュメントに基づいたの開発者ドキュメントに基づいたFacebookFacebookページの作り方ページの作り方

•• 33章はソーシャルグラプラグイン＋章はソーシャルグラプラグイン＋OGPOGPFcebookFcebookアプリアプリ

•• 44章はトップ章はトップWebWebデザイナーたちによるデザイナーたちによるFacebookFacebookページ事例紹介ページ事例紹介

•• これこれ11冊で冊でFacebookFacebookの実装は大丈夫の実装は大丈夫


僕とコラボしませんか！僕とコラボしませんか！


•• 僕はコラボが大好きです。僕はコラボが大好きです。まずはまずはSNSSNSでつながりませんか？でつながりませんか？

•• FacebookFacebookは「蒲生トシヒロは「蒲生トシヒロ」」またはまたは「「GamoGamo」」で検索すれば出てきます。で検索すれば出てきます。リアルにつきあいたい方はリアルにつきあいたい方はメッセージを添えてリクエストください。メッセージを添えてリクエストください。

•• Twitter IDTwitter IDは「は「DakinyDakiny」」です。です。フォロー希望の方はフォロー希望の方は@@DakinyDakinyで連絡くださいで連絡ください。。

•• ご清聴ありがとうございました。ご清聴ありがとうございました。

html5とcss3でwebが変わる！でも導入は簡単！

Technology