 メディア クエリ  CSS3 グリッド  CSS3 Flexbox  CSS3 マルチカラム  推奨事項  参考資料.

Presentation on theme: " メディア クエリ  CSS3 グリッド  CSS3 Flexbox  CSS3 マルチカラム  推奨事項  参考資料."— Presentation transcript:

1

2

3

4  メディア クエリ  CSS3 グリッド  CSS3 Flexbox  CSS3 マルチカラム  推奨事項  参考資料

5

6

7

8

9 12 3 2 3 1

10 拡張 拡張拡張 テキスト領域 目次 フッター バナー #mainContainer { display: -ms-grid; -ms-grid-columns: 1fr 6fr 130px; } #banner { -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 3; } #toc { -ms-grid-column: 1; -ms-grid-row: 2; } #textArea { -ms-grid-column: 2; -ms-grid-row: 2; } #images { -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-row-span: 2; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 2; -ms-grid-row: 3; }

11 #mainContainer { display: -ms-grid; -ms-grid-columns: 1fr 6fr 130px; } テキスト領域 目次 130 ピクセル 残りのスペース 1 分画 6 分画

12

13

14 Back Play Forward #playControl { display: -ms-box; -ms-box-orient: horizontal; -ms-box-align: middle; } button { -ms-box-flex: 1; }

15 Back Play Forward #playControl { display: -ms-box; -ms-box-orient: horizontal; /* -ms-box-orient プロパティで 定義された軸に対して 垂直方向の配置 ) */ -ms-box-align: middle; /*-ms-box-orient プロパティで 定義された軸に対して 水平方向の剰余スペースの配分 ) */ -ms-box-pack: center; }

16 @media all and (min-width: 300px) and (max-width: 400px) { #playControl { -ms-box-orient: vertical; /*-ms-box-orient プロパティで 定義された軸に対して 水平方向の剰余スペースの配分) */ -ms-box-pack: center; }

17 @media all and (max-width: 299px) { #playControl { -ms-box-orient: vertical; } #playButton { -ms-box-flex: 10; -ms-box-ordinal-group: 1; } #backButton { -ms-box-ordinal-group: 2; } #fwdButton { -ms-box-ordinal-group: 2; }

18

19

20

21 div { column-width: 12em; column-rule: thin solid black; column-gap: 2em; } … … 12em 2em

22

23

24

25 © 2010 Microsoft Corporation. All rights reserved. Microsoft 、 Windows 、 Windows Vista およびその他の製品名は、米国およびその他の国における登録商標または商標である可能性があります。 このプレゼンテーションに記載されている情報は、情報の提供のみを目的としており、このプレゼンテーションの発行時点におけるマイクロソフトの見解を反映したものです。マイクロソフトは 市場条件の変化に 対応する必要があるため、このプレゼンテーションはマイクロソフトの一部の義務として解釈することはできず、またマイクロソフトは記載事項について発行日後に その正確さを保証することはできま せん。明示、黙示、または法令に基づく規定にかかわらず、これらの情報についてマイクロソフトはいかなる責任も負わないものとします。