電子雑誌のためのweb adaptive layout
DESCRIPTION
2011年9月17日(土) CSS Nite LP, Disk 17 「HTML5による電子書籍」 ベルサール神保町 ルーム1-2TRANSCRIPT
![Page 1: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/1.jpg)
![Page 2: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/2.jpg)
電子雑誌のためのWeb Adaptive Layout
ウェブ・アダプティブ・レイアウト
境祐司 Youji Sakai
![Page 3: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/3.jpg)
Instructional Designer境祐司
profile
YOUJI SAKAI
![Page 4: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/4.jpg)
community
電子書籍メディア論http://www.facebook.com/eBookStrategy
デザインの未来http://www.facebook.com/TheFutureDesign
![Page 5: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/5.jpg)
Agenda今日お話すること
![Page 6: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/6.jpg)
Web Adaptive Layoutウェブ・アダプティブ・レイアウト
1-1. スマートデバイスの普及で変わること1-2. アダプティブデザインとは?
2-1. ウェブマガジンと電子雑誌の違い2-2. コンテンツ・ファースト
Web for All, Web on Everything
Webzine
![Page 7: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/7.jpg)
Web Adaptive Layoutウェブ・アダプティブ・レイアウト
3-1. 電子雑誌の設計3-2. Web Layoutの種類3-3. Grid Layout, Flexible Box Layout3-4. Multi-column Layout3-5. Media Queries
Web Adaptive Layout
![Page 8: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/8.jpg)
Web Adaptive Layoutウェブ・アダプティブ・レイアウト
4-1. まとめ4-2. 電子雑誌の未来、ウェブの未来
Future
![Page 9: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/9.jpg)
Web for All, Web on Everything
![Page 10: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/10.jpg)
Web for All, Web on Everything
スマートデバイスの普及で変わること
![Page 11: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/11.jpg)
Web for All, Web on Everything
スマートデバイスの普及で変わること
常時身につけている最も身近なウェブ端末
![Page 12: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/12.jpg)
Web for All, Web on Everything
スマートデバイスの普及で変わることスマートフォンで本・雑誌を読む
SMARTPHONE OPTIMIZATIONS
![Page 13: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/13.jpg)
Web for All, Web on Everything
スマートデバイスの普及で変わることタブレットで本・雑誌を読む
TABLET OPTIMIZATIONS
![Page 14: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/14.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
![Page 15: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/15.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
Ethan Marcotteイーサン・マルコッテ
“Fluid Grids, Fluid Images”
Responsive Web Designhttp://www.abookapart.com/products/responsive-web-design
A Book Apart
![Page 16: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/16.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
Fluid Gridshttp://www.alistapart.com/articles/fluidgrids/
A List Apart
![Page 17: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/17.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
“Fluid Grids”
![Page 18: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/18.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
“Fluid Grids”
[段の幅÷コンテントの幅×100]410÷860×100=47.6744186
[段の余白÷コンテントの幅×100]20÷860×100= 2.3255814
![Page 19: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/19.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
“Fluid Grids”
![Page 20: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/20.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
DEMONSTRATIONデモをご覧ください
![Page 21: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/21.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
Jeffrey Zeldmanジェフリー・ゼルドマン
“mobile, responsive, and adaptive”
Jeffrey Zeldman's keynote talk from DIBI Conference 2011.
The Medium Comes of Age
http://vimeo.com/27769380
![Page 22: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/22.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
![Page 23: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/23.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
最適化?
![Page 24: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/24.jpg)
Web for All, Web on Everything
アダプティブデザインとは?Buy Once, Read Everywhere.
![Page 25: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/25.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
http://www.amazon.com/b?ie=UTF8&node=2248263011
Kindle Editionswith Audio/Video
Kindle for iPad, Kindle for iPhone
![Page 26: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/26.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
デバイスごとの最適化では追いつかない
![Page 27: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/27.jpg)
Web for All, Web on Everything
アダプティブデザインとは?
最適化ではなく「適応」
![Page 28: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/28.jpg)
Web for All, Web on Everything
Chrome LiteMobile Safari
SMART DEVICE
DESKTOP
![Page 29: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/29.jpg)
Web for All, Web on Everything
Chrome LiteMobile Safari
SMART DEVICE
![Page 30: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/30.jpg)
Web for All, Web on Everything
Chrome Lite Mobile Safari
![Page 31: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/31.jpg)
Web for All, Web on Everything
Chrome Lite Mobile Safari
IE9
![Page 32: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/32.jpg)
Webzine
![Page 33: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/33.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 34: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/34.jpg)
Webzine
ウェブマガジンと電子雑誌の違いThe New Yorkerhttp://www.newyorker.com/ WIRED for iPad
![Page 35: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/35.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
The New Yorkerhttp://www.newyorker.com/
![Page 36: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/36.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
The New Yorkerhttp://www.newyorker.com/
![Page 37: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/37.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
The New Yorkerhttp://www.newyorker.com/
contents
![Page 39: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/39.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
New York Magazinehttp://nymag.com/contents
![Page 42: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/42.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
WIRED for iPad
![Page 43: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/43.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
WIRED for iPad
![Page 44: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/44.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
WIRED for iPad
![Page 45: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/45.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
WIRED for iPad
![Page 46: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/46.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
・広告モデル・定期購読モデル
ペイドコンテンツ
![Page 47: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/47.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
New York Magazinehttp://nymag.com/
contents広告モデル
![Page 48: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/48.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
WIRED for iPad
定期購読モデル
![Page 49: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/49.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
・広告モデル・定期購読モデルペイドコンテンツ
ビジネスモデルによってデザインも変わる
![Page 50: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/50.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
HTML5 based Magazine
![Page 51: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/51.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
HTML5basedMagazine
treesaverhttp://treesaver.net/
![Page 52: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/52.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 53: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/53.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 54: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/54.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
treesaver
![Page 55: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/55.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 56: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/56.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
Think Quarterlyhttp://www.thinkwithgoogle.com/quarterly/innovation
The Innovation Issue
by
![Page 57: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/57.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 58: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/58.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 59: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/59.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 60: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/60.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
![Page 61: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/61.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
Grid layout
![Page 62: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/62.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
PC smartphone
![Page 63: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/63.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
PC smartphone
![Page 64: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/64.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
Website Apps WebApps
![Page 65: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/65.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
Website Apps WebApps eMagazine
Kindle EditionEPUBMobiPDF
![Page 66: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/66.jpg)
Webzine
ウェブマガジンと電子雑誌の違い
Technology
![Page 67: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/67.jpg)
Webzine
コンテンツ・ファースト
![Page 68: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/68.jpg)
Webzine
Luke Wroblewskiルーク・ウロブレウスキ
“Mobile-first”
コンテンツ・ファースト
Mobile First - 5/27/2010http://www.youtube.com/watch?gl=JP&v=NjE_Or4VIlU
![Page 69: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/69.jpg)
Webzine
Luke Wroblewskiルーク・ウロブレウスキ
“content first, navigation second”
コンテンツ・ファースト
Designing Mobile Web Experienceshttp://www.uie.com/brainsparks/2011/04/08/luke-wroblewski-designing-mobile-web-experiences/
![Page 70: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/70.jpg)
Webzine
コンテンツ・ファースト
“Content Strategy”
![Page 71: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/71.jpg)
Webzine
コンテンツ・ファースト
Kristina Halvorsonクリスティーナ・ハルバーソン
“Content Strategy”
Erin Kissaneエリン・キセイン
![Page 72: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/72.jpg)
Web AdaptiveLayout
![Page 73: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/73.jpg)
Web Adaptive Layout
電子雑誌の設計
![Page 74: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/74.jpg)
Web Adaptive Layout電子雑誌の設計
データはマシンリーダブルであること
適切なフォールバックを用意すること
情緒的価値の高い魅力的なビジュアルを提供すること
![Page 75: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/75.jpg)
Web Adaptive Layout電子雑誌の設計
データはマシンリーダブルであること
適切なフォールバックを用意すること
情緒的価値の高い魅力的なビジュアルを提供すること
・HTML5は文脈依存のマークアップ
・グレースフル・デグラデーションを理解する
・心を揺さぶる表現なくして人を惹きつけることはできない
![Page 76: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/76.jpg)
Web Adaptive Layout
Web Layoutの種類
![Page 77: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/77.jpg)
Web Adaptive LayoutWeb Layoutの種類
ノーマルフローフロートポジショニンググリッドレイアウトマルチカラムレイアウトフレキシブルボックスレイアウト
![Page 78: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/78.jpg)
Web Adaptive LayoutWeb Layoutの種類
ノーマルフロー
フロート
ポジショニング
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
浮動化絶対配置
![Page 79: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/79.jpg)
Web Adaptive LayoutWeb Layoutの種類
ノーマルフロー フロート ポジショニング
浮動化 絶対配置相対配置固定配置
![Page 80: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/80.jpg)
Web Adaptive LayoutWeb Layoutの種類
ノーマルフロー
フロート
ポジショニング
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
浮動化絶対配置
![Page 81: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/81.jpg)
ノーマルフロー
フロート
ポジショニング
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
Web Adaptive LayoutWeb Layoutの種類
グリッド配置複数列配置
可変ボックス配置
浮動化絶対配置
![Page 82: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/82.jpg)
Web Adaptive LayoutWeb Layoutの種類
グリッドレイアウト
マルチカラムレイアウト
フレキシブルボックスレイアウト
グリッド配置
複数列配置
可変ボックス配置
リキッドデザインの特性を維持したまま高度なレイアウトを実現
記事の可読性を向上させる
レイアウト要素のコンポーネント化に適している
![Page 83: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/83.jpg)
Web Adaptive Layout
Grid LayoutFlexible Box Layout
![Page 84: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/84.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
大きく変わる!ウェブレイアウトの設計
グリッドフィールドの指定
構成要素の配置
デスクトップ向けのレイアウトフレーム
スマートデバイス向けのレイアウトフレーム
![Page 85: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/85.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
大きく変わる!ウェブレイアウトの設計
![Page 86: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/86.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Douglas Bowmanダグラス・ボーマン
“Throwing Tables Out the Window”テーブルは窓から投げ捨てろ
2004年7月
![Page 87: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/87.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Jeremy Keithジェレミー・キース
“ There Is No Mobile Web”
There Is No Mobile Webhttp://adactio.com/extras/slides/thereisnomobileweb.pdfPDF
![Page 88: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/88.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
one web flexible
![Page 89: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/89.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
one web flexible
Grid LayoutFlexible Box LayoutMulti-column Layout
![Page 90: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/90.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Grid Layout
![Page 91: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/91.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Grid Layouthttp://www.w3.org/TR/css3-grid-layout/
まだ策定中です。最新情報はW3Cのサイトで確認してください
2011年9月17日
![Page 92: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/92.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
グリッドフィールドの指定
grid-columnsgrid-rows
![Page 93: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/93.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
構成要素の配置
grid-columngrid-row
grid-column-spangrid-row-span
![Page 94: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/94.jpg)
Web Adaptive Layout
DEMONSTRATIONデモをご覧ください
![Page 95: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/95.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>
![Page 96: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/96.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>
たったこれだけ
![Page 97: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/97.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>
たったこれだけdiv要素は1つ
![Page 98: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/98.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
<div id="container"><header><h1>The Future of Design</h1><h2>Contact Us monkeyish studio production</h2></header><nav><h3>Contents</h3><ul><li>Facebook</li><li>Twitter</li><li>YouTube</li><li>Ustream</li></ul></nav><article><h3>The Future of Design 2012</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p><section><h3>Column1</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></section><section><h3>Column2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></article><aside><h3>Supplementation</h3><section><h3>Column3</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></section></aside><footer><p>Copyright © 2012 monkeyish studio</p></footer></div>
headernav
article section section
aside sectionfooter
![Page 99: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/99.jpg)
Web Adaptive Layout
Grid Layout
![Page 100: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/100.jpg)
Web Adaptive Layout
![Page 101: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/101.jpg)
Web Adaptive Layout
![Page 102: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/102.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
#container {width: 90%;margin: 0 5%;display: -ms-grid;-ms-grid-columns: 12% 64% 24%;-ms-grid-rows: 1fr 1fr 1fr;
}
![Page 103: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/103.jpg)
Web Adaptive Layout
![Page 104: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/104.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
header {-ms-grid-column: 1;-ms-grid-row: 1;-ms-grid-column-span: 3;
}nav {
-ms-grid-column: 1;-ms-grid-row: 2;
}article {
-ms-grid-column: 2;-ms-grid-row: 2;
}
aside { -ms-grid-column: 3;-ms-grid-row: 2;
}footer {
-ms-grid-column: 1;-ms-grid-row: 3;-ms-grid-column-span: 3;
}
![Page 105: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/105.jpg)
Web Adaptive Layout
![Page 106: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/106.jpg)
Web Adaptive Layout
column:1; row:1; column-span:3;
column:2; row:2; column:3;row:2;
![Page 107: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/107.jpg)
Web Adaptive Layout
![Page 108: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/108.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
#container {-ms-grid-columns: 130px 64% 1fr;
}
![Page 109: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/109.jpg)
Web Adaptive Layout
130px 64%
![Page 110: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/110.jpg)
Web Adaptive Layout
![Page 111: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/111.jpg)
Web Adaptive Layout
![Page 112: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/112.jpg)
Web Adaptive Layout
![Page 113: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/113.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
#container {width: 90%;min-width:840px;
}
![Page 114: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/114.jpg)
Web Adaptive Layout
![Page 115: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/115.jpg)
Web Adaptive Layout
![Page 116: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/116.jpg)
Web Adaptive Layout
![Page 117: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/117.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
要素を再配置する
![Page 118: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/118.jpg)
Web Adaptive Layout
![Page 119: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/119.jpg)
Web Adaptive Layout
![Page 120: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/120.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
nav { -ms-grid-column: 1;-ms-grid-row: 2;}article { -ms-grid-column: 2;-ms-grid-row: 2;}
![Page 121: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/121.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
nav { -ms-grid-column: 1;-ms-grid-row: 2;}article { -ms-grid-column: 2;-ms-grid-row: 2;}
nav { -ms-grid-column: 2;-ms-grid-row: 2;}article { -ms-grid-column: 1;-ms-grid-row: 2;}
![Page 122: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/122.jpg)
Web Adaptive Layout
column:2; row:2;
![Page 123: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/123.jpg)
Web Adaptive Layout
column:1; row:2;
![Page 124: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/124.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
要素を再配置する-2
![Page 125: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/125.jpg)
Web Adaptive Layout
![Page 126: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/126.jpg)
Web Adaptive Layout
![Page 127: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/127.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
わかりますか?
![Page 128: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/128.jpg)
Web Adaptive Layout
column:1; row:1; column-span:3;
![Page 129: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/129.jpg)
Web Adaptive Layout
![Page 130: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/130.jpg)
Web Adaptive Layout
column:2;row:1;
column-span:2;
![Page 131: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/131.jpg)
Web Adaptive Layout
column:2;row:1;
column-span:2;
column:1;row:2;
![Page 132: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/132.jpg)
Web Adaptive Layout
column:2;row:1;
column-span:2;
column:1;row:1;
column-row:2;
![Page 133: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/133.jpg)
Web Adaptive Layout
Flexible Box Layout
![Page 134: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/134.jpg)
Web Adaptive Layout
Flexible Box Layout Module
http://www.w3.org/TR/css3-flexbox/
まだ策定中です。最新情報はW3Cのサイトで確認してください
2011年9月17日
![Page 135: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/135.jpg)
Web Adaptive Layout
![Page 136: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/136.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
<nav role="navigation"><h3>Navigation</h3><ol>
<li><a href="#">Facebook</a></li><li><a href="#">Twitter</a></li><li><a href="#">YouTube</a></li><li><a href="#">Ustream</a></li><li><a href="#">Google+</a></li>
</ol></nav>
![Page 137: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/137.jpg)
Web Adaptive Layout
![Page 138: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/138.jpg)
Web Adaptive Layout
![Page 139: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/139.jpg)
Web Adaptive Layout
![Page 140: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/140.jpg)
Web Adaptive Layout
![Page 141: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/141.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
@media screen and (min-width: 35em) {body {
display: -ms-box;display: box;box-orient: vertical;box-direction: reverse;}
[role="navigation"] ol {display: box;box-orient: horizontal;box-direction: normal;}
[role="navigation"] li {box-flex: 1;}
}
![Page 142: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/142.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
グリッドレイアウトに組み込む
![Page 143: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/143.jpg)
Web Adaptive Layout
![Page 144: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/144.jpg)
Web Adaptive Layout
![Page 145: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/145.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Grid Layout+
Flexible Box Layout+
Multi-column Layout
![Page 146: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/146.jpg)
Web Adaptive Layout
![Page 147: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/147.jpg)
Web Adaptive Layout
![Page 148: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/148.jpg)
Web Adaptive Layout
![Page 149: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/149.jpg)
Web Adaptive Layout
![Page 150: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/150.jpg)
Web Adaptive Layout
![Page 151: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/151.jpg)
Web Adaptive Layout
![Page 152: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/152.jpg)
Web Adaptive Layout
![Page 153: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/153.jpg)
Web Adaptive Layout
![Page 154: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/154.jpg)
Web Adaptive Layout
![Page 155: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/155.jpg)
Web Adaptive Layout
![Page 156: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/156.jpg)
Web Adaptive Layout
![Page 157: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/157.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Grid Layout+
Flexible Box Layout+
Multi-column Layout
![Page 158: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/158.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
Grid Layout+
Flexible Box Layout+
Multi-column Layout
![Page 159: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/159.jpg)
Web Adaptive Layout
Multi-column Layout
![Page 160: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/160.jpg)
Web Adaptive LayoutMulti-column Layout
CSS Multi-column Layout Modulehttp://www.w3.org/TR/css3-multicol/
![Page 161: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/161.jpg)
Web Adaptive LayoutMulti-column Layout
記事の可読性向上
グリッドフレームにマルチカラムを挿入
デスクトップ向けのマルチカラム
スマートデバイス向けのマルチカラム
![Page 162: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/162.jpg)
Web Adaptive LayoutMulti-column Layout
記事の可読性向上
column-countcolumn-gap, column-rule
column-spanbreak-before, break-after
![Page 163: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/163.jpg)
Web Adaptive Layout
DEMONSTRATIONデモをご覧ください
![Page 164: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/164.jpg)
Web Adaptive Layout
![Page 165: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/165.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
.multicol {column-count:2;
}
![Page 166: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/166.jpg)
Web Adaptive Layout
![Page 167: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/167.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
@media screen and (max-width:940px) {.multicol {
column-count:1;}
}
![Page 168: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/168.jpg)
Web Adaptive Layout
![Page 169: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/169.jpg)
Web Adaptive Layout
![Page 170: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/170.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
.multicol {column-count:3;column-gap:2em;column-rule:solid 1px #999;
}
![Page 171: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/171.jpg)
Web Adaptive Layout
![Page 172: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/172.jpg)
Web Adaptive Layout
![Page 173: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/173.jpg)
Web Adaptive LayoutGrid Layout, Flexible Box Layout
フロートとポジショニングの融合
![Page 174: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/174.jpg)
Web Adaptive Layout
PositionedFloats
CSS Floats and Positioning Level 3http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html
![Page 175: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/175.jpg)
Web Adaptive Layout
![Page 176: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/176.jpg)
Web Adaptive Layout
![Page 177: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/177.jpg)
Web Adaptive Layout
![Page 178: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/178.jpg)
Web Adaptive Layout
![Page 179: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/179.jpg)
Web Adaptive Layout
![Page 180: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/180.jpg)
Web Adaptive Layout
DEMONSTRATIONデモをご覧ください
![Page 181: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/181.jpg)
Web Adaptive Layout
IE10のデフォルトページから選択
![Page 182: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/182.jpg)
Web Adaptive Layout
![Page 183: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/183.jpg)
Web Adaptive Layout
![Page 184: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/184.jpg)
Web Adaptive Layout
Media Queries
![Page 185: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/185.jpg)
Web Adaptive LayoutMedia Queries
リーダビリティの基準
スクリーンサイズとブラウザのウィンドウサイズ
マルチカラムの切り替え
構成要素の配置換え
![Page 186: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/186.jpg)
Web Adaptive LayoutMedia Queries
スクリーンサイズとブラウザのウィンドウサイズ
min-width, max-widthmin-device-widthmax-device-width
![Page 187: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/187.jpg)
Web Adaptive LayoutMedia Queries
![Page 188: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/188.jpg)
Web Adaptive LayoutMedia Queries
![Page 189: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/189.jpg)
Web Adaptive LayoutMedia Queries
![Page 190: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/190.jpg)
Web Adaptive LayoutMedia Queries
![Page 191: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/191.jpg)
Web Adaptive LayoutMedia Queries
![Page 193: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/193.jpg)
Web Adaptive LayoutHardboiled CSS3 Media Queries
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
![Page 194: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/194.jpg)
Future
![Page 195: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/195.jpg)
Web Adaptive Layout
・アダプティブデザインとは?
・マシンリーダブルと適切なフォールバック
・数年後に大きく変わるウェブレイアウト
・今やっておくこと
まとめ
![Page 196: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/196.jpg)
Web Adaptive Layout
・アダプティブデザインとは?
・マシンリーダブルと適切なフォールバック
・数年後に大きく変わるウェブレイアウト
・今やっておくこと
まとめ
さまざまな環境に(最適化ではなく)「適応」するデザインを目指す
プログラム処理可能なデータにする/古い環境を切り捨てない
これからは“one web flexible”を意識していこう
試す(最も重要)、公開する、意見交換する
![Page 197: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/197.jpg)
Future
電子雑誌の未来、ウェブの未来
![Page 198: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/198.jpg)
Future
電子雑誌の未来、ウェブの未来
Web for All, Web on Everything
みんなのウェブ、どこからでもウェブ
![Page 199: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/199.jpg)
Thank you for your attention.
ご清聴ありがとうございました
![Page 200: 電子雑誌のためのWeb Adaptive Layout](https://reader038.vdocuments.net/reader038/viewer/2022102621/549821f5b47959be2a8b4642/html5/thumbnails/200.jpg)
community
電子書籍メディア論h t t p : / / w w w. f a c e b o o k . c o m / e B o o k S t r a t e g y