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

5,374 views

Published on

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
5,374
On SlideShare
0
From Embeds
0
Number of Embeds
221
Actions
Shares
0
Downloads
9
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

×