View
2.167
Download
1
Category
Preview:
DESCRIPTION
2010年12月16日、アップルストア銀座で開催したCSS Nite in Ginza, Vol.55(Shift 4)の『ツールの進化とこれからの制作環境 2010 』/鷹野雅弘(スイッチ)のスライドです。
Citation preview
ツールの進化とこれからの制作環境 2010
鷹野雅弘(スイッチ)
HMDキーワードは
2010-2011
2010.5.29
CS5 iPad
iPad
UI
UIの進化のターニング・ポイント
・マウス/指(マウスオーバー)・目とスクリーンの距離・ハードウェアをホールドする部分・ハードウェアの重量感・切替ながら読む(ブラウザのタブ)・ホワイトスペースの扱い
CS52010.5.29
2010CS5
CS4
CS3
CS2
CS
2010.5
2008.12
2007.6
2005.7
2004.1
2009
2011
2008
2007
2006
2005
2004
18
24
18
17
Content-Awareコンテンツに応じる
HTML5 Packβ → 11.0.3
HTML5 PackHTML5タグのサポートCSS3コードヒント
HTML5 Pack
CSS3ドラえもん(精度向上)video/audio対応
画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DDhttp://shopdd.blog51.fc2.com/blog-entry-932.html
ライブビューの強化
HTML5 PackHTML5タグのサポートCSS3コードヒントライブビューの強化
CSS3ドラえもん(精度向上)video/audio対応
ビューポートの設定メディアクエリーのコード挿入!
マルチスクリーン対応
ウィンドウサイズを変更すると、レイアウト(デザイン)も変更
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
メディア・クエリー
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
メディア・クエリー
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
メディア・クエリー
320 910
iphone.css tablet.css desktop.css
レスポンシブ・デザイン
メディア・クエリー<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >
BrowserLab
DwCS5βローカルコンテンツのプレビューに対応
ePubDigital Publishing Suite
InDesign
♥
Adobe Digital Magazine Solution
InDesign Digital Content Bundler
InDesign
♥
InDesign
InDesign
♥
まとめ
HTML5 Pack
Content-Aware
ePubDigital Publishing Suite
BrowserLab
HMDキーワードは
2010-2011
2011 HTML5+CSS3 モバイル(マルチスクリーン) 電子書籍 Digital Magazine
Digital Books
iPhone(および、そのほかのスマートフォン)
スマートフォン対応
よいお年を
Recommended