css nite in ginza, vol.55 (shift 4)

ツールの進化とこれからの制作環境 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（および、そのほかのスマートフォン）

スマートフォン対応

よいお年を