Movatterモバイル変換


[0]ホーム

URL:


Toshihito Gamo, profile picture
Uploaded byToshihito Gamo
1,384 views

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

Embed presentation

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

Recommended

PDF
体験してみようWordPress.com
PDF
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
PDF
これから concrete5 を始める Web 制作者に伝えたい concrete5 と WordPress ここが一緒、ここが違う!
PDF
Web勉強会(HTML+CSS+JS入門の入門)
PDF
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
PDF
WordCamp Tokyo2012 handson Portfolio
PDF
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
PDF
HTML/CSSを効率的にする メタ言語とツールのアレコレ
PDF
WordPressで行う継続的インテグレーション入門編
PPTX
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
PDF
_s + bootstrapで始めるWordPressテーマ開発入門
PDF
Word pressはじめの一歩 テーマ作成ハンズオン
PDF
使いやすいWordPressのためのCSSのつくりかた
PDF
知っておきたい「Web制作イマドキの注目ポイント」
PDF
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
PDF
レスポンシブ・ウェブデザイン基礎
PDF
WordPressで作るポートフォリオサイト
PDF
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
PDF
ウェブ制作者のためのセルフブランディング
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
PDF
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
PDF
「おれおれサービス」に挑戦しよう
PDF
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
PDF
Yat-wbnara201602
PDF
2012: A Web Odyssey
PPTX
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
PDF
レスポンシブWebデザインの実践ワークフロー(WDS)
PPTX
HTML5 on ASP.NET
PDF
⑳CSSでアニメーション!その1

More Related Content

PDF
体験してみようWordPress.com
PDF
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
PDF
これから concrete5 を始める Web 制作者に伝えたい concrete5 と WordPress ここが一緒、ここが違う!
PDF
Web勉強会(HTML+CSS+JS入門の入門)
PDF
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
PDF
WordCamp Tokyo2012 handson Portfolio
PDF
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
PDF
HTML/CSSを効率的にする メタ言語とツールのアレコレ
体験してみようWordPress.com
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
これから concrete5 を始める Web 制作者に伝えたい concrete5 と WordPress ここが一緒、ここが違う!
Web勉強会(HTML+CSS+JS入門の入門)
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
WordCamp Tokyo2012 handson Portfolio
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
HTML/CSSを効率的にする メタ言語とツールのアレコレ

What's hot

PDF
WordPressで行う継続的インテグレーション入門編
PPTX
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
PDF
_s + bootstrapで始めるWordPressテーマ開発入門
PDF
Word pressはじめの一歩 テーマ作成ハンズオン
PDF
使いやすいWordPressのためのCSSのつくりかた
PDF
知っておきたい「Web制作イマドキの注目ポイント」
PDF
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
PDF
レスポンシブ・ウェブデザイン基礎
PDF
WordPressで作るポートフォリオサイト
PDF
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
PDF
ウェブ制作者のためのセルフブランディング
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
PDF
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
PDF
「おれおれサービス」に挑戦しよう
PDF
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
PDF
Yat-wbnara201602
PDF
2012: A Web Odyssey
PPTX
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
PDF
レスポンシブWebデザインの実践ワークフロー(WDS)
WordPressで行う継続的インテグレーション入門編
WordCamp Kansai 2015 ハンズオン - 踏み出してみよう!翻訳の第一歩 #wck2015
_s + bootstrapで始めるWordPressテーマ開発入門
Word pressはじめの一歩 テーマ作成ハンズオン
使いやすいWordPressのためのCSSのつくりかた
知っておきたい「Web制作イマドキの注目ポイント」
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
レスポンシブ・ウェブデザイン基礎
WordPressで作るポートフォリオサイト
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
ウェブ制作者のためのセルフブランディング
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
「おれおれサービス」に挑戦しよう
WordCamp2015 WordPressで自分の名前でドメイン取って ブログ作るとこまで 面倒みるワークショップ
Yat-wbnara201602
2012: A Web Odyssey
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
レスポンシブWebデザインの実践ワークフロー(WDS)

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

PPTX
HTML5 on ASP.NET
PDF
⑳CSSでアニメーション!その1
PDF
「html5 boilerplate」から考える、これからのマークアップ
PDF
_HTML5で組んでみた_
PDF
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
PDF
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
PDF
GDG Women DevfestW
PDF
㉘HTML5+CSS3でアニメーション!
PDF
HTML5
PDF
マルチデバイス対応のコーディング・マークアップのポイント
PDF
CSS Design and Programming
PDF
Concentrated HTML5 & Attractive HTML5
PDF
マークアップ講座 02 CSS
KEY
HTML5での制作、いつから始める?
PDF
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
PDF
HTML5 in Firefox4
PDF
Tech.G HTML5 プレ講座
PDF
jQuery Performance Tips – jQueryにおける高速化 -
PPTX
HTML5時代のフロントエンド開発入門
KEY
Html5時代のクリエイターのあり方
HTML5 on ASP.NET
⑳CSSでアニメーション!その1
「html5 boilerplate」から考える、これからのマークアップ
_HTML5で組んでみた_
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
GDG Women DevfestW
㉘HTML5+CSS3でアニメーション!
HTML5
マルチデバイス対応のコーディング・マークアップのポイント
CSS Design and Programming
Concentrated HTML5 & Attractive HTML5
マークアップ講座 02 CSS
HTML5での制作、いつから始める?
Webデザイン入門2-HTML5 フォーム,映像再生,音声再生, CSS3, レスポンシブWebデザイン-
HTML5 in Firefox4
Tech.G HTML5 プレ講座
jQuery Performance Tips – jQueryにおける高速化 -
HTML5時代のフロントエンド開発入門
Html5時代のクリエイターのあり方

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

  • 1.
    HTML5とCSS3でWebが変わる!でも導入は簡単! 蒲生 トシヒロ2001年6月25日(土)  HTML5+CSS3 制作現場の実践アプローチ大公開! Presented By Toshihiro Gamo
  • 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•Twitterhttp://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"><imgsrc="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

[8]ページ先頭

©2009-2025 Movatter.jp