Download - CSS Nite in Ginza, Vol.55 (Shift 4)
![Page 1: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/1.jpg)
![Page 2: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/2.jpg)
ツールの進化とこれからの制作環境 2010
鷹野雅弘(スイッチ)
![Page 3: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/3.jpg)
![Page 4: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/4.jpg)
HMDキーワードは
2010-2011
![Page 5: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/5.jpg)
2010.5.29
![Page 6: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/6.jpg)
CS5 iPad
![Page 7: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/7.jpg)
iPad
![Page 8: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/8.jpg)
UI
![Page 9: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/9.jpg)
UIの進化のターニング・ポイント
![Page 10: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/10.jpg)
・マウス/指(マウスオーバー)・目とスクリーンの距離・ハードウェアをホールドする部分・ハードウェアの重量感・切替ながら読む(ブラウザのタブ)・ホワイトスペースの扱い
![Page 11: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/11.jpg)
CS52010.5.29
![Page 12: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/12.jpg)
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
![Page 13: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/13.jpg)
![Page 14: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/14.jpg)
Content-Awareコンテンツに応じる
![Page 15: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/15.jpg)
![Page 16: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/16.jpg)
![Page 17: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/17.jpg)
![Page 18: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/18.jpg)
HTML5 Packβ → 11.0.3
![Page 19: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/19.jpg)
HTML5 PackHTML5タグのサポートCSS3コードヒント
![Page 20: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/20.jpg)
HTML5 Pack
CSS3ドラえもん(精度向上)video/audio対応
画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DDhttp://shopdd.blog51.fc2.com/blog-entry-932.html
ライブビューの強化
![Page 21: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/21.jpg)
HTML5 PackHTML5タグのサポートCSS3コードヒントライブビューの強化
CSS3ドラえもん(精度向上)video/audio対応
ビューポートの設定メディアクエリーのコード挿入!
マルチスクリーン対応
![Page 22: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/22.jpg)
![Page 23: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/23.jpg)
ウィンドウサイズを変更すると、レイアウト(デザイン)も変更
![Page 24: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/24.jpg)
<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)" >
メディア・クエリー
![Page 25: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/25.jpg)
<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)" >
メディア・クエリー
![Page 26: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/26.jpg)
<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)" >
メディア・クエリー
![Page 27: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/27.jpg)
320 910
iphone.css tablet.css desktop.css
レスポンシブ・デザイン
![Page 28: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/28.jpg)
![Page 29: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/29.jpg)
![Page 30: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/30.jpg)
![Page 31: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/31.jpg)
メディア・クエリー<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)" >
![Page 32: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/32.jpg)
BrowserLab
![Page 33: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/33.jpg)
![Page 34: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/34.jpg)
![Page 35: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/35.jpg)
DwCS5βローカルコンテンツのプレビューに対応
![Page 36: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/36.jpg)
![Page 37: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/37.jpg)
ePubDigital Publishing Suite
![Page 38: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/38.jpg)
InDesign
♥
![Page 39: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/39.jpg)
![Page 40: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/40.jpg)
![Page 41: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/41.jpg)
Adobe Digital Magazine Solution
InDesign Digital Content Bundler
![Page 42: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/42.jpg)
InDesign
♥
![Page 43: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/43.jpg)
InDesign
![Page 44: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/44.jpg)
![Page 45: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/45.jpg)
![Page 46: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/46.jpg)
InDesign
♥
![Page 47: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/47.jpg)
まとめ
![Page 48: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/48.jpg)
HTML5 Pack
Content-Aware
ePubDigital Publishing Suite
BrowserLab
![Page 49: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/49.jpg)
HMDキーワードは
2010-2011
![Page 50: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/50.jpg)
2011 HTML5+CSS3 モバイル(マルチスクリーン) 電子書籍 Digital Magazine
Digital Books
![Page 51: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/51.jpg)
iPhone(および、そのほかのスマートフォン)
スマートフォン対応
![Page 52: CSS Nite in Ginza, Vol.55 (Shift 4)](https://reader033.vdocument.in/reader033/viewer/2022060107/554a709db4c90579288b4f24/html5/thumbnails/52.jpg)
よいお年を